Dev Design LibrarySvelte Effect Components
Dev Design Library indexes 73 Svelte effect components from 4 open-source UI libraries, with the most coming from Canvas UI, Animations (Svelte), cnblocks and sv-efferd. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets Svelte.
Ascii ObjectCanvas UI · ReactA 3D model or image redrawn as shape-matched ASCII.
Card Decoratorcnblocks · SvelteDecorative card component with visual effects
Animated BeamAnimations (Svelte) · SvelteA component for creating animated beam effects between two elements with customizable gradients and paths.
Hero Onesv-efferd · SvelteA full hero composition with sticky header, editorial spotlight, and a marquee trust band.
Ascii SweepCanvas UI · ReactAn ascii band that rewrites the whole page as it sweeps.
Hero Ninecnblocks · SvelteHero with animated background elements
Blur FadeAnimations (Svelte) · SvelteA component that animates content with blur and fade effects, supporting directional movement and intersection…
Logo Cloud Foursv-efferd · SvelteA marquee logo band with progressive edge blur and a layered track surface.
AsciifyCanvas UI · ReactAn ascii lens that follows your cursor.
Integration Eightcnblocks · SvelteIntegration grid with animated connections
Border BeamAnimations (Svelte) · SvelteA component for creating animated border beam effects around elements with customizable gradients, duration, and…
Logo Cloud Threesv-efferd · SvelteA scrolling logo marquee with a soft edge mask and editorial rhythm.
BendCanvas UI · ReactHow strongly unrevealed content smears around the reveal edge in CSS pixels.
Integration Twocnblocks · SvelteTwo-row integration logo marquee
Cool ModeAnimations (Svelte) · SvelteAdd a fun particle effect that follows mouse interactions, with support for emojis, images, and custom shapes.
Marqueesv-efferd · Svelte
BlazeCanvas UI · ReactFire, smoke, and heat rising over the page.
Logocloud Threecnblocks · SvelteScrolling logo cloud marquee with progressive blur edges
Dither ShaderAnimations (Svelte) · SvelteA canvas-based component that applies dithering effects to images with customizable patterns and color modes.
Progressive blursv-efferd · Svelte
BubbleCanvas UI · ReactA glassy droplet trailing the cursor.
Logocloud Twocnblocks · SvelteInteractive logo cloud with hover call-to-action
FlowAnimations (Svelte) · SvelteA group of components for building directed flow diagrams with nodes and connectors.
CanvasCanvas UI · ReactThe page painted onto canvas, with a brush for a cursor.
Marqueecnblocks · SvelteAnimated marquee component for horizontally or vertically scrolling content
Glare HoverAnimations (Svelte) · SvelteA glare hover effect that adds a subtle shine to elements when hovered.
ClothCanvas UI · ReactHangs the page on rippling fabric.
Progressive Blurcnblocks · SvelteProgressive layered blur overlay component
LensAnimations (Svelte) · SvelteAn interactive component that enables zooming into images, videos and other elements.
CloudsCanvas UI · ReactTheme-aware mist parted by cursor wind.
Magic CardAnimations (Svelte) · SvelteA spotlight effect that follows your mouse cursor and highlights borders on hover.
Decrypt RevealCanvas UI · ReactUI encrypted into ASCII, decoded by the cursor.
MarqueeAnimations (Svelte) · SvelteA smooth scrolling marquee component with support for horizontal and vertical directions, pause on hover, and reverse…
DisplacementCanvas UI · ReactGrid cells shearing the page apart under the cursor.
Neon Gradient CardAnimations (Svelte) · SvelteA card component with animated neon gradient borders and customizable colors, border size, and radius.
Dithered ObjectCanvas UI · ReactA 3D model or image rendered through a 1-bit dither.
Orbiting CirclesAnimations (Svelte) · SvelteA component that displays icons or elements orbiting in a circular path with customizable radius, duration, and…
DropletsCanvas UI · ReactRain droplets refracting the page.
Pixel ImageAnimations (Svelte) · SvelteAn image component that reveals itself through a pixelated grid animation with optional grayscale to color transition.
Flame WrapCanvas UI · ReactA card wrapped in a border of fire.
PointerAnimations (Svelte) · SvelteA component that displays a pointer when hovering over an element
Force FieldCanvas UI · ReactAn energy shield where clicks detonate shockwaves.
Progressive BlurAnimations (Svelte) · SvelteA component that creates a progressive blur effect at the top, bottom, or both edges of a container with customizable…
FrostCanvas UI · ReactFrosted blur of the page inside the droplet (0 to 1).
Shine BorderAnimations (Svelte) · SvelteA component that adds a shining animated border effect with customizable colors, duration, and border width.
GlassCanvas UI · ReactA crystal-ball lens that zooms on targets.
Smooth CursorAnimations (Svelte) · SvelteA smooth animated cursor component with spring physics that follows mouse movement with rotation and scale effects.
Glass ObjectCanvas UI · ReactModels, SVGs, and images as floating liquid glass.
Video TextAnimations (Svelte) · SvelteA component that displays video content masked by text, creating a text-shaped video effect with customizable…
GlitchCanvas UI · ReactBroadcast glitch bursts over the live page.
Fancy Pixel TrailAnimations (Svelte) · Svelte
Glyph RainCanvas UI · ReactFalling glyphs that light up the page, and surge under the cursor.
Fancy Pixelate Svg FilterAnimations (Svelte) · Svelte
GridCanvas UI · ReactCells across the width of the wrapped area.
Spell MarqueeAnimations (Svelte) · Svelte
Hex FloatCanvas UI · ReactThe page on shiny floating hex tiles.
Spell Perspective BookAnimations (Svelte) · Svelte
Ink ObjectCanvas UI · ReactA 3D model or image printed as rough ink strokes.
Spell Text MarqueeAnimations (Svelte) · Svelte
LaserCanvas UI · ReactA beam that reveals the page on scroll.
Spell Tilt CardAnimations (Svelte) · Svelte
LiquidCanvas UI · ReactA pointer-driven fluid simulation over live HTML.- BacklightAnimations (Svelte) · SvelteAn SVG filter wrapper that adds a soft, saturated backlight glow around the content it wraps.
Liquid ObjectCanvas UI · ReactModels dragged through invisible liquid.
MagnifyCanvas UI · ReactA sci-fi scanner lens with click ripples.
Particle ObjectCanvas UI · ReactModels rebuilt as swirling particle clouds.
Particle RevealCanvas UI · ReactUI revealed from fine particles by the cursor.
Particle ScrollCanvas UI · ReactThe page dissolves into sand below a line.
PeelCanvas UI · ReactPeels the page back from an edge in 3D.
Retro DitherCanvas UI · ReactA retro dithered pass over the live page.
RippleCanvas UI · ReactWater ripples from every click over live HTML.
ShatterCanvas UI · ReactShatters the page into glass shards.
VhsCanvas UI · ReactAnalog tape artifacts over the live page.