Dev Design Library

Animations (Svelte) components

Svelte 5 Animations includes Magic UI, Spell UI build using Tailwind CSS & Motion SV

Components
108
Framework
Svelte
Stack
Svelte, TypeScript, Tailwind
License
MIT
GitHub stars
356
Source
https://github.com/SikandarJODD/animations
Website
https://sv-animations.vercel.app
Install
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/{name}.json

All Animations (Svelte) components

  • Animated Background: A shared animated background that smoothly moves between selected or hovered items.
  • Animated Beam: A component for creating animated beam effects between two elements with customizable gradients and paths.
  • Animated Circular Progress Bar: A circular progress bar component with animated transitions between primary and secondary colors.
  • Animated Gradient Text: An animated gradient background which transitions between colors for text.
  • Animated Grid Pattern: An animated grid pattern component that creates a dynamic background with moving squares that fade in and out.
  • Animated List: A component that animates list items with smooth layout transitions, revealing items one by one from top to bottom.
  • Animated Shiny Text: A shimmering text effect component that creates a moving shine animation across text.
  • Animated 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…
  • Arc Timeline: A curved timeline that rotates through milestone steps with clickable markers, icons, and configurable spacing.
  • Aurora Text: A text component with animated aurora gradient effect that smoothly transitions between customizable colors.
  • Avatar Circles: A component that displays overlapping avatar circles with optional count indicator for showing team members or contributors.
  • Backlight: An SVG filter wrapper that adds a soft, saturated backlight glow around the content it wraps.
  • Bento Grid: A flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.
  • Blur Fade: A component that animates content with blur and fade effects, supporting directional movement and intersection observer triggering.
  • Border Beam: A component for creating animated border beam effects around elements with customizable gradients, duration, and direction.
  • Cool Mode: Add a fun particle effect that follows mouse interactions, with support for emojis, images, and custom shapes.
  • Dia Text Reveal: A sweeping gradient text reveal with viewport triggering and rotating text support.
  • Dither Shader: A canvas-based component that applies dithering effects to images with customizable patterns and color modes.
  • Dock: A macOS-style dock component with smooth magnification animation on hover, inspired by the macOS dock.
  • Dot Pattern: A customizable dot pattern background component with optional glow animations and mask effects.
  • Dotted Map: A world map component rendered with dots, supporting custom markers with staggered entrance animations.
  • Fancy Animated Gradient Svg
  • Fancy Letter 3D Swap
  • Fancy Letter Swap
  • Fancy Letter Swap Ping Pong: Text whose letters slide out and are replaced by a copy on hover, one after another, and go back when the pointer leaves.
  • Fancy Media Between Text
  • Fancy Parallax Floating
  • Fancy Pixel Trail
  • Fancy Pixelate Svg Filter
  • Fancy Random Letter Swap
  • Fancy Random Letter Swap Ping Pong: Text whose letters slide out and are replaced by a copy on hover in random order, and go back when the pointer leaves.
  • Fancy Scramble Hover: Text whose characters scramble through random glyphs while the pointer is over it.
  • Fancy Scramble In: Text that appears by scrambling random characters that resolve into the real letters from left to right.
  • Fancy Text Along Path: Text laid along an SVG path that moves along the curve, in a loop or with the scroll.
  • Fancy Text Highlighter
  • Fancy Text Rotate: Text slot that rotates through a list of words, each one sliding out as the next slides in.
  • Fancy Underline To Background
  • Fancy Vertical Cut Reveal
  • File Tree: An interactive file tree component with expandable folders, selectable files, and smooth animations.
  • Flickering Grid: An animated flickering grid pattern component that creates a dynamic canvas-based background with randomly flickering squares.
  • Flow: A group of components for building directed flow diagrams with nodes and connectors.
  • Glare Hover: A glare hover effect that adds a subtle shine to elements when hovered.
  • Globe: An autorotating, interactive, and highly performant globe made using WebGL.
  • Glyph Matrix: An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
  • Grid Pattern: An SVG-based grid pattern background component with support for highlighted squares and customizable grid dimensions.
  • Hero Video Dialog: A video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.
  • Hexagon Pattern: An SVG-based hexagon pattern background component with configurable radius, gap, direction, and highlighted cells.
  • Hyper Text: An animated text component that creates a glitch effect by cycling through random characters before revealing the final text.
  • Icon Cloud: An interactive 3D tag cloud component that displays icons or images in a sphere formation with smooth rotation and drag interactions.
  • Interactive Hover Button: A button with an interactive hover effect featuring an expanding dot and sliding text animation with an arrow.
  • Lens: An interactive component that enables zooming into images, videos and other elements.
  • Light Rays: A component that creates animated light rays with customizable count, color, blur, speed, and length.
  • Line Shadow Text: A text component with an animated diagonal line shadow effect that moves across the text.
  • Magic Card: A spotlight effect that follows your mouse cursor and highlights borders on hover.
  • Marquee: A smooth scrolling marquee component with support for horizontal and vertical directions, pause on hover, and reverse animation.
  • Meteors: A meteor shower effect component with customizable number of meteors and animated falling effects.
  • Morphing Text: A text component that smoothly morphs between multiple text strings with a blur transition effect.
  • Motion Grid: A frame-based 2D grid animation primitive with active/inactive cell states.
  • Neon Gradient Card: A card component with animated neon gradient borders and customizable colors, border size, and radius.
  • Noise Texture: An SVG fractal noise layer using feTurbulence for subtle texture overlays.
  • Number Ticker: An animated number counter component with spring physics that smoothly animates from a start value to an end value.
  • Orbiting Circles: A component that displays icons or elements orbiting in a circular path with customizable radius, duration, and direction.
  • Pixel Image: An image component that reveals itself through a pixelated grid animation with optional grayscale to color transition.
  • Pointer: A component that displays a pointer when hovering over an element
  • Progressive Blur: A component that creates a progressive blur effect at the top, bottom, or both edges of a container with customizable blur levels and…
  • Pulsating Button: A button component with a pulsating ring effect that expands and fades around the button.
  • Rainbow Button: A button component with animated rainbow gradient borders and background that cycles through multiple colors.
  • Retro Grid: An animated retro-style grid background component with customizable angle, cell size, opacity, and colors.
  • Ripple: A component that creates expanding ripple circles with customizable size, opacity, and number of circles.
  • Ripple Button: A button component with a ripple effect that appears on click, expanding from the click position.
  • Scroll Progress: A fixed progress bar component that indicates page scroll progress with a gradient color effect.
  • Separator: A flexible horizontal separator for dividing content with solid or gradient lines and optional centered labels.
  • Shimmer Button: A button component with an animated shimmer effect that slides across the button surface.
  • Shine Border: A component that adds a shining animated border effect with customizable colors, duration, and border width.
  • Shiny Button: A button component with a shiny gradient mask effect that animates across the text on hover and press.
  • Smooth Cursor: A smooth animated cursor component with spring physics that follows mouse movement with rotation and scale effects.
  • Sparkles Text: A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
  • Spell Animated Checkbox
  • Spell Badge
  • Spell Bar Spinner
  • Spell Blur Reveal
  • Spell Color Selector
  • Spell Exploding Input
  • Spell Fallback Avatar
  • Spell Gradient Wave Text
  • Spell Highlighted Text
  • Spell Keyboard Shortcut
  • Spell Label Input
  • Spell Logo Carousel
  • Spell Marquee
  • Spell Perspective Book
  • Spell Qrcode
  • Spell Randomized Text
  • Spell Signature
  • Spell Slide Up Text: Text that slides up into view from behind a mask.
  • Spell Special Text
  • Spell Spotify Card
  • Spell Text Marquee
  • Spell Tilt Card
  • Spell Words Stagger: Text whose words appear one after another with a short delay.
  • Stagger Text: An interactive text component where characters animate vertically on hover with a staggered delay effect.
  • Striped Pattern: An SVG-based striped pattern background component with configurable direction and stripe dimensions.
  • Terminal: A terminal-like UI component with typing animations, sequence control, and intersection observer support.
  • Text Animate: Animate text with various effects like blur, slide, scale, and fade with granular control over words, characters, or lines.
  • Typing Animation: A typewriter effect component that types out text with customizable speed, cursor styles, and support for cycling through multiple words.
  • Video Text: A component that displays video content masked by text, creating a text-shaped video effect with customizable typography.
  • Warp Background: A 3D perspective grid background with animated light beams that create a warping effect.
  • Word Rotate: A component that cycles through an array of words with smooth fade and slide animations between transitions.

Browse by category