Svelte Animations
sv-animations.vercel.appFreerepo only
Svelte 5 Animations includes Magic UI, Spell UI build using Tailwind CSS & Motion SV
Items
66
2026-08-01Every entry in its own registry.json, counted last night.Free to install
66
2026-08-01Item endpoints that returned source without credentials.Behind a key
0
2026-08-01Item endpoints that answered 401.Last push
7 days ago
285 stars. Both figures are GitHub's about this repository, not ones this index measured.Blocks
Search withinFreeits item endpoint answered without a keyPaidits item endpoint answered 401Unverifiedit serves no item endpoint we could ask
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Animated Beamanimated-beam | A component for creating animated beam effects between two elements with customizable gradients and paths. | Blocks | Free | 1 dep · 6 files | |
| Animated Circular Progress Baranimated-circular-progress-bar | A circular progress bar component with animated transitions between primary and secondary colors. | Blocks | Free | no deps · 2 files | |
| Animated Gradient Textanimated-gradient-text | An animated gradient background which transitions between colors for text. | Blocks | Free | no deps · 2 files | |
| Animated Grid Patternanimated-grid-pattern | An animated grid pattern component that creates a dynamic background with moving squares that fade in and out. | Blocks | Free | 1 dep · 2 files | |
| Animated Listanimated-list | A component that animates list items with smooth layout transitions, revealing items one by one from top to bottom. | Blocks | Free | 1 dep · 2 files | |
| Animated Shiny Textanimated-shiny-text | A shimmering text effect component that creates a moving shine animation across text. | Blocks | Free | no deps | |
| Animated Theme Toggleranimated-theme-toggler | A smooth animated theme toggler that uses the View Transition API to create a circular reveal effect when switching between light and dark themes. | Blocks | Free | no deps · 2 files | |
| Arc Timelinearc-timeline | A curved timeline that rotates through milestone steps with clickable markers, icons, and configurable spacing. | Blocks | Free | no deps · 3 files | |
| Aurora Textaurora-text | A text component with animated aurora gradient effect that smoothly transitions between customizable colors. | Blocks | Free | no deps · 2 files | |
| Avatar Circlesavatar-circles | A component that displays overlapping avatar circles with optional count indicator for showing team members or contributors. | Blocks | Free | no deps · 2 files | |
| Backlightbacklight | An SVG filter wrapper that adds a soft, saturated backlight glow around the content it wraps. | Blocks | Free | no deps · 2 files | |
| Bento Gridbento-grid | A flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style. | Blocks | Free | 1 dep · 3 files | |
| Blur Fadeblur-fade | A component that animates content with blur and fade effects, supporting directional movement and intersection observer triggering. | Blocks | Free | 2 deps · 2 files | |
| Border Beamborder-beam | A component for creating animated border beam effects around elements with customizable gradients, duration, and direction. | Blocks | Free | 1 dep · 2 files | |
| Cool Modecool-mode | Add a fun particle effect that follows mouse interactions, with support for emojis, images, and custom shapes. | Blocks | Free | no deps · 2 files | |
| Dia Text Revealdia-text-reveal | A sweeping gradient text reveal with viewport triggering and rotating text support. | Blocks | Free | 1 dep · 2 files | |
| Dither Shaderdither-shader | A canvas-based component that applies dithering effects to images with customizable patterns and color modes. | Blocks | Free | no deps · 2 files | |
| Dockdock | A macOS-style dock component with smooth magnification animation on hover, inspired by the macOS dock. | Blocks | Free | 1 dep · 3 files | |
| Dot Patterndot-pattern | A customizable dot pattern background component with optional glow animations and mask effects. | Blocks | Free | 1 dep · 2 files | |
| Dotted Mapdotted-map | A world map component rendered with dots, supporting custom markers with staggered entrance animations. | Blocks | Free | 1 dep · 2 files | |
| File Treefile-tree | An interactive file tree component with expandable folders, selectable files, and smooth animations. | Blocks | Free | 2 deps · 5 files | |
| Flickering Gridflickering-grid | An animated flickering grid pattern component that creates a dynamic canvas-based background with randomly flickering squares. | Blocks | Free | no deps · 2 files | |
| Flowflow | A group of components for building directed flow diagrams with nodes and connectors. | Blocks | Free | 2 deps · 13 files | |
| Glare Hoverglare-hover | A glare hover effect that adds a subtle shine to elements when hovered. | Blocks | Free | no deps · 2 files | |
| Globeglobe | An autorotating, interactive, and highly performant globe made using WebGL. | Blocks | Free | 1 dep · 2 files | |
| Glyph Matrixglyph-matrix | An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer. | Blocks | Free | 1 dep · 2 files | |
| Grid Patterngrid-pattern | An SVG-based grid pattern background component with support for highlighted squares and customizable grid dimensions. | Blocks | Free | no deps · 2 files | |
| Hero Video Dialoghero-video-dialog | A video dialog component with animated entrance effects, thumbnail support, and customizable animation styles. | Blocks | Free | 2 deps · 2 files | |
| Hexagon Patternhexagon-pattern | An SVG-based hexagon pattern background component with configurable radius, gap, direction, and highlighted cells. | Blocks | Free | no deps · 2 files | |
| Hyper Texthyper-text | An animated text component that creates a glitch effect by cycling through random characters before revealing the final text. | Blocks | Free | 1 dep · 2 files | |
| Icon Cloudicon-cloud | An interactive 3D tag cloud component that displays icons or images in a sphere formation with smooth rotation and drag interactions. | Blocks | Free | no deps · 2 files | |
| Interactive Hover Buttoninteractive-hover-button | A button with an interactive hover effect featuring an expanding dot and sliding text animation with an arrow. | Blocks | Free | 1 dep · 2 files | |
| Lenslens | An interactive component that enables zooming into images, videos and other elements. | Blocks | Free | 1 dep · 2 files | |
| Light Rayslight-rays | A component that creates animated light rays with customizable count, color, blur, speed, and length. | Blocks | Free | 1 dep · 2 files | |
| Line Shadow Textline-shadow-text | A text component with an animated diagonal line shadow effect that moves across the text. | Blocks | Free | 1 dep · 2 files | |
| Magic Cardmagic-card | A spotlight effect that follows your mouse cursor and highlights borders on hover. | Blocks | Free | 1 dep · 2 files | |
| Marqueemarquee | A smooth scrolling marquee component with support for horizontal and vertical directions, pause on hover, and reverse animation. | Blocks | Free | no deps · 2 files | |
| Meteorsmeteors | A meteor shower effect component with customizable number of meteors and animated falling effects. | Blocks | Free | no deps · 2 files | |
| Morphing Textmorphing-text | A text component that smoothly morphs between multiple text strings with a blur transition effect. | Blocks | Free | no deps · 2 files | |
| Motion Gridmotion-grid | A frame-based 2D grid animation primitive with active/inactive cell states. | Blocks | Free | 1 dep · 5 files | |
| Neon Gradient Cardneon-gradient-card | A card component with animated neon gradient borders and customizable colors, border size, and radius. | Blocks | Free | no deps · 2 files | |
| Noise Texturenoise-texture | An SVG fractal noise layer using feTurbulence for subtle texture overlays. | Blocks | Free | no deps · 2 files | |
| Number Tickernumber-ticker | An animated number counter component with spring physics that smoothly animates from a start value to an end value. | Blocks | Free | 1 dep · 2 files | |
| Orbiting Circlesorbiting-circles | A component that displays icons or elements orbiting in a circular path with customizable radius, duration, and direction. | Blocks | Free | no deps · 2 files | |
| Pixel Imagepixel-image | An image component that reveals itself through a pixelated grid animation with optional grayscale to color transition. | Blocks | Free | 2 deps · 2 files | |
| Pointerpointer | A component that displays a pointer when hovering over an element | Blocks | Free | 2 deps · 2 files | |
| Progressive Blurprogressive-blur | A component that creates a progressive blur effect at the top, bottom, or both edges of a container with customizable blur levels and positioning. | Blocks | Free | no deps · 2 files | |
| Pulsating Buttonpulsating-button | A button component with a pulsating ring effect that expands and fades around the button. | Blocks | Free | no deps · 2 files |
