{ "$schema": "https://shadcn-svelte.com/schema/registry.json", "name": "Svelte Animations", "homepage": "https://sv-animations.vercel.app", "items": [ { "name": "animated-gradient-text", "type": "registry:block", "title": "Animated Gradient Text", "description": "An animated gradient background which transitions between colors for text.", "files": [ { "path": "./src/lib/components/magic/animated-gradient-text/animated-gradient-text.svelte", "type": "registry:component", "target": "magic/animated-gradient-text/animated-gradient-text.svelte" }, { "path": "./src/lib/components/magic/animated-gradient-text/index.ts", "type": "registry:file", "target": "magic/animated-gradient-text/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-gradient": "gradient 8s linear infinite" } }, "css": { "@keyframes gradient": { "to": { "background-position": "var(--bg-size, 300%) 0" } } } }, { "name": "text-animate", "type": "registry:block", "title": "Text Animate", "description": "Animate text with various effects like blur, slide, scale, and fade with granular control over words, characters, or lines.", "files": [ { "path": "./src/lib/components/magic/text-animate/text-animate.svelte", "type": "registry:component", "target": "magic/text-animate/text-animate.svelte" }, { "path": "./src/lib/components/magic/text-animate/index.ts", "type": "registry:file", "target": "magic/text-animate/index.ts" } ], "registryDependencies": [], "dependencies": ["runed", "motion-sv"] }, { "name": "animated-beam", "type": "registry:block", "title": "Animated Beam", "description": "A component for creating animated beam effects between two elements with customizable gradients and paths.", "files": [ { "path": "./src/lib/components/magic/animated-beam/animated-beam.svelte", "type": "registry:component", "target": "magic/animated-beam/animated-beam.svelte" }, { "path": "./src/lib/components/magic/animated-beam/index.ts", "type": "registry:file", "target": "magic/animated-beam/index.ts" }, { "path": "./src/lib/components/magic/animated-beam/types.ts", "type": "registry:file", "target": "magic/animated-beam/types.ts" }, { "path": "./src/lib/components/magic/animated-beam/use-gradient-coordinates.svelte.ts", "type": "registry:file", "target": "magic/animated-beam/use-gradient-coordinates.svelte.ts" }, { "path": "./src/lib/components/magic/animated-beam/use-path-calculator.svelte.ts", "type": "registry:file", "target": "magic/animated-beam/use-path-calculator.svelte.ts" }, { "path": "./src/lib/components/magic/animated-beam/use-resize-observer.svelte.ts", "type": "registry:file", "target": "magic/animated-beam/use-resize-observer.svelte.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "animated-theme-toggler", "type": "registry:block", "title": "Animated Theme Toggler", "description": "A smooth animated theme toggler that uses the View Transition API to create a circular reveal effect when switching between light and dark themes.", "files": [ { "path": "./src/lib/components/magic/animated-theme-toggler/animated-theme-toggler.svelte", "type": "registry:component", "target": "magic/animated-theme-toggler/animated-theme-toggler.svelte" }, { "path": "./src/lib/components/magic/animated-theme-toggler/index.ts", "type": "registry:file", "target": "magic/animated-theme-toggler/index.ts" } ], "registryDependencies": [], "cssVars": {}, "css": { "::view-transition-old(root), ::view-transition-new(root)": { "animation": "none", "mix-blend-mode": "normal" } } }, { "name": "arc-timeline", "type": "registry:block", "title": "Arc Timeline", "description": "A curved timeline that rotates through milestone steps with clickable markers, icons, and configurable spacing.", "files": [ { "path": "./src/lib/components/magic/arc-timeline/arc-timeline.svelte", "type": "registry:component", "target": "magic/arc-timeline/arc-timeline.svelte" }, { "path": "./src/lib/components/magic/arc-timeline/index.ts", "type": "registry:file", "target": "magic/arc-timeline/index.ts" }, { "path": "./src/lib/components/magic/arc-timeline/types.ts", "type": "registry:file", "target": "magic/arc-timeline/types.ts" } ], "registryDependencies": [] }, { "name": "animated-circular-progress-bar", "type": "registry:block", "title": "Animated Circular Progress Bar", "description": "A circular progress bar component with animated transitions between primary and secondary colors.", "files": [ { "path": "./src/lib/components/magic/animated-circular-progress-bar/animated-circular-progress-bar.svelte", "type": "registry:component", "target": "magic/animated-circular-progress-bar/animated-circular-progress-bar.svelte" }, { "path": "./src/lib/components/magic/animated-circular-progress-bar/index.ts", "type": "registry:file", "target": "magic/animated-circular-progress-bar/index.ts" } ], "registryDependencies": [] }, { "name": "animated-grid-pattern", "type": "registry:block", "title": "Animated Grid Pattern", "description": "An animated grid pattern component that creates a dynamic background with moving squares that fade in and out.", "files": [ { "path": "./src/lib/components/magic/animated-grid-pattern/animated-grid-pattern.svelte", "type": "registry:component", "target": "magic/animated-grid-pattern/animated-grid-pattern.svelte" }, { "path": "./src/lib/components/magic/animated-grid-pattern/index.ts", "type": "registry:file", "target": "magic/animated-grid-pattern/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "blur-fade", "type": "registry:block", "title": "Blur Fade", "description": "A component that animates content with blur and fade effects, supporting directional movement and intersection observer triggering.", "files": [ { "path": "./src/lib/components/magic/blur-fade/blur-fade.svelte", "type": "registry:component", "target": "magic/blur-fade/blur-fade.svelte" }, { "path": "./src/lib/components/magic/blur-fade/index.ts", "type": "registry:file", "target": "magic/blur-fade/index.ts" } ], "registryDependencies": [], "dependencies": ["runed", "motion-sv"] }, { "name": "border-beam", "type": "registry:block", "title": "Border Beam", "description": "A component for creating animated border beam effects around elements with customizable gradients, duration, and direction.", "files": [ { "path": "./src/lib/components/magic/border-beam/border-beam.svelte", "type": "registry:component", "target": "magic/border-beam/border-beam.svelte" }, { "path": "./src/lib/components/magic/border-beam/index.ts", "type": "registry:file", "target": "magic/border-beam/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "file-tree", "type": "registry:block", "title": "File Tree", "description": "An interactive file tree component with expandable folders, selectable files, and smooth animations.", "files": [ { "path": "./src/lib/components/magic/file-tree/file-tree.svelte", "type": "registry:component", "target": "magic/file-tree/file-tree.svelte" }, { "path": "./src/lib/components/magic/file-tree/folder.svelte", "type": "registry:component", "target": "magic/file-tree/folder.svelte" }, { "path": "./src/lib/components/magic/file-tree/file.svelte", "type": "registry:component", "target": "magic/file-tree/file.svelte" }, { "path": "./src/lib/components/magic/file-tree/collapse-button.svelte", "type": "registry:component", "target": "magic/file-tree/collapse-button.svelte" }, { "path": "./src/lib/components/magic/file-tree/index.ts", "type": "registry:file", "target": "magic/file-tree/index.ts" } ], "registryDependencies": [], "dependencies": ["@lucide/svelte", "motion-sv"] }, { "name": "dot-pattern", "type": "registry:block", "title": "Dot Pattern", "description": "A customizable dot pattern background component with optional glow animations and mask effects.", "files": [ { "path": "./src/lib/components/magic/dot-pattern/dot-pattern.svelte", "type": "registry:component", "target": "magic/dot-pattern/dot-pattern.svelte" }, { "path": "./src/lib/components/magic/dot-pattern/index.ts", "type": "registry:file", "target": "magic/dot-pattern/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "dia-text-reveal", "type": "registry:block", "title": "Dia Text Reveal", "description": "A sweeping gradient text reveal with viewport triggering and rotating text support.", "files": [ { "path": "./src/lib/components/magic/dia-text-reveal/dia-text-reveal.svelte", "type": "registry:component", "target": "magic/dia-text-reveal/dia-text-reveal.svelte" }, { "path": "./src/lib/components/magic/dia-text-reveal/index.ts", "type": "registry:file", "target": "magic/dia-text-reveal/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "cool-mode", "type": "registry:block", "title": "Cool Mode", "description": "Add a fun particle effect that follows mouse interactions, with support for emojis, images, and custom shapes.", "files": [ { "path": "./src/lib/components/magic/cool-mode/cool-mode.svelte", "type": "registry:component", "target": "magic/cool-mode/cool-mode.svelte" }, { "path": "./src/lib/components/magic/cool-mode/index.ts", "type": "registry:file", "target": "magic/cool-mode/index.ts" } ], "registryDependencies": [] }, { "name": "shine-border", "type": "registry:block", "title": "Shine Border", "description": "A component that adds a shining animated border effect with customizable colors, duration, and border width.", "files": [ { "path": "./src/lib/components/magic/shine-border/shine-border.svelte", "type": "registry:component", "target": "magic/shine-border/shine-border.svelte" }, { "path": "./src/lib/components/magic/shine-border/index.ts", "type": "registry:file", "target": "magic/shine-border/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-shine": "shine var(--duration) infinite linear" } }, "css": { "@keyframes shine": { "0%": { "background-position": "0% 0%" }, "50%": { "background-position": "100% 100%" }, "100%": { "background-position": "0% 0%" } } } }, { "name": "animated-list", "type": "registry:block", "title": "Animated List", "description": "A component that animates list items with smooth layout transitions, revealing items one by one from top to bottom.", "files": [ { "path": "./src/lib/components/magic/animated-list/animated-list.svelte", "type": "registry:component", "target": "magic/animated-list/animated-list.svelte" }, { "path": "./src/lib/components/magic/animated-list/index.ts", "type": "registry:file", "target": "magic/animated-list/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "animated-shiny-text", "type": "registry:block", "title": "Animated Shiny Text", "description": "A shimmering text effect component that creates a moving shine animation across text.", "files": [ { "path": "./src/lib/components/magic/animated-shiny-text/animated-shiny-text.svelte", "type": "registry:component", "target": "magic/animated-shiny-text/animated-shiny-text.svelte" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-shiny-text": "shiny-text 8s infinite" } }, "css": { "@keyframes shiny-text": { "0%, 90%, 100%": { "background-position": "calc(-100% - var(--shiny-width)) 0" }, "30%, 60%": { "background-position": "calc(100% + var(--shiny-width)) 0" } } } }, { "name": "aurora-text", "type": "registry:block", "title": "Aurora Text", "description": "A text component with animated aurora gradient effect that smoothly transitions between customizable colors.", "files": [ { "path": "./src/lib/components/magic/aurora-text/aurora-text.svelte", "type": "registry:component", "target": "magic/aurora-text/aurora-text.svelte" }, { "path": "./src/lib/components/magic/aurora-text/index.ts", "type": "registry:file", "target": "magic/aurora-text/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-aurora": "aurora 8s ease-in-out infinite alternate" } }, "css": { "@keyframes aurora": { "0%": { "background-position": "0% 50%", "transform": "rotate(-5deg) scale(0.9)" }, "25%": { "background-position": "50% 100%", "transform": "rotate(5deg) scale(1.1)" }, "50%": { "background-position": "100% 50%", "transform": "rotate(-3deg) scale(0.95)" }, "75%": { "background-position": "50% 0%", "transform": "rotate(3deg) scale(1.05)" }, "100%": { "background-position": "0% 50%", "transform": "rotate(-5deg) scale(0.9)" } } } }, { "name": "backlight", "type": "registry:block", "title": "Backlight", "description": "An SVG filter wrapper that adds a soft, saturated backlight glow around the content it wraps.", "files": [ { "path": "./src/lib/components/magic/backlight/backlight.svelte", "type": "registry:component", "target": "magic/backlight/backlight.svelte" }, { "path": "./src/lib/components/magic/backlight/index.ts", "type": "registry:file", "target": "magic/backlight/index.ts" } ], "registryDependencies": [] }, { "name": "avatar-circles", "type": "registry:block", "title": "Avatar Circles", "description": "A component that displays overlapping avatar circles with optional count indicator for showing team members or contributors.", "files": [ { "path": "./src/lib/components/magic/avatar-circles/avatar-circles.svelte", "type": "registry:component", "target": "magic/avatar-circles/avatar-circles.svelte" }, { "path": "./src/lib/components/magic/avatar-circles/index.ts", "type": "registry:file", "target": "magic/avatar-circles/index.ts" } ], "registryDependencies": [] }, { "name": "dotted-map", "type": "registry:block", "title": "Dotted Map", "description": "A world map component rendered with dots, supporting custom markers with staggered entrance animations.", "files": [ { "path": "./src/lib/components/magic/dotted-map/dotted-map.svelte", "type": "registry:component", "target": "magic/dotted-map/dotted-map.svelte" }, { "path": "./src/lib/components/magic/dotted-map/index.ts", "type": "registry:file", "target": "magic/dotted-map/index.ts" } ], "registryDependencies": [], "dependencies": ["piri"] }, { "name": "marquee", "type": "registry:block", "title": "Marquee", "description": "A smooth scrolling marquee component with support for horizontal and vertical directions, pause on hover, and reverse animation.", "files": [ { "path": "./src/lib/components/magic/marquee/marquee.svelte", "type": "registry:component", "target": "magic/marquee/marquee.svelte" }, { "path": "./src/lib/components/magic/marquee/index.ts", "type": "registry:file", "target": "magic/marquee/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-marquee": "marquee var(--duration) linear infinite", "animate-marquee-vertical": "marquee-vertical var(--duration) linear infinite" } }, "css": { "@keyframes marquee": { "from": { "transform": "translateX(0)" }, "to": { "transform": "translateX(calc(-100% - var(--gap)))" } }, "@keyframes marquee-vertical": { "from": { "transform": "translateY(0)" }, "to": { "transform": "translateY(calc(-100% - var(--gap)))" } } } }, { "name": "meteors", "type": "registry:block", "title": "Meteors", "description": "A meteor shower effect component with customizable number of meteors and animated falling effects.", "files": [ { "path": "./src/lib/components/magic/meteors/meteors.svelte", "type": "registry:component", "target": "magic/meteors/meteors.svelte" }, { "path": "./src/lib/components/magic/meteors/index.ts", "type": "registry:file", "target": "magic/meteors/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-meteor": "meteor 5s linear infinite" } }, "css": { "@keyframes meteor": { "0%": { "transform": "rotate(var(--angle)) translateX(0)", "opacity": "1" }, "70%": { "opacity": "1" }, "100%": { "transform": "rotate(var(--angle)) translateX(-500px)", "opacity": "0" } } } }, { "name": "pixel-image", "type": "registry:block", "title": "Pixel Image", "description": "An image component that reveals itself through a pixelated grid animation with optional grayscale to color transition.", "files": [ { "path": "./src/lib/components/magic/pixel-image/pixel-image.svelte", "type": "registry:component", "target": "magic/pixel-image/pixel-image.svelte" }, { "path": "./src/lib/components/magic/pixel-image/index.ts", "type": "registry:file", "target": "magic/pixel-image/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv", "runed"] }, { "name": "striped-pattern", "type": "registry:block", "title": "Striped Pattern", "description": "An SVG-based striped pattern background component with configurable direction and stripe dimensions.", "files": [ { "path": "./src/lib/components/magic/striped-pattern/striped-pattern.svelte", "type": "registry:component", "target": "magic/striped-pattern/striped-pattern.svelte" }, { "path": "./src/lib/components/magic/striped-pattern/index.ts", "type": "registry:file", "target": "magic/striped-pattern/index.ts" } ], "registryDependencies": [] }, { "name": "typing-animation", "type": "registry:block", "title": "Typing Animation", "description": "A typewriter effect component that types out text with customizable speed, cursor styles, and support for cycling through multiple words.", "files": [ { "path": "./src/lib/components/magic/typing-animation/typing-animation.svelte", "type": "registry:component", "target": "magic/typing-animation/typing-animation.svelte" }, { "path": "./src/lib/components/magic/typing-animation/index.ts", "type": "registry:file", "target": "magic/typing-animation/index.ts" } ], "registryDependencies": [], "dependencies": ["runed", "motion-sv"] }, { "name": "flickering-grid", "type": "registry:block", "title": "Flickering Grid", "description": "An animated flickering grid pattern component that creates a dynamic canvas-based background with randomly flickering squares.", "files": [ { "path": "./src/lib/components/magic/flickering-grid/flickering-grid.svelte", "type": "registry:component", "target": "magic/flickering-grid/flickering-grid.svelte" }, { "path": "./src/lib/components/magic/flickering-grid/index.ts", "type": "registry:file", "target": "magic/flickering-grid/index.ts" } ], "registryDependencies": [] }, { "name": "grid-pattern", "type": "registry:block", "title": "Grid Pattern", "description": "An SVG-based grid pattern background component with support for highlighted squares and customizable grid dimensions.", "files": [ { "path": "./src/lib/components/magic/grid-pattern/grid-pattern.svelte", "type": "registry:component", "target": "magic/grid-pattern/grid-pattern.svelte" }, { "path": "./src/lib/components/magic/grid-pattern/index.ts", "type": "registry:file", "target": "magic/grid-pattern/index.ts" } ], "registryDependencies": [] }, { "name": "glare-hover", "type": "registry:block", "title": "Glare Hover", "description": "A glare hover effect that adds a subtle shine to elements when hovered.", "files": [ { "path": "./src/lib/components/magic/glare-hover/glare-hover.svelte", "type": "registry:component", "target": "magic/glare-hover/glare-hover.svelte" }, { "path": "./src/lib/components/magic/glare-hover/index.ts", "type": "registry:file", "target": "magic/glare-hover/index.ts" } ], "registryDependencies": [] }, { "name": "globe", "type": "registry:block", "title": "Globe", "description": "An autorotating, interactive, and highly performant globe made using WebGL.", "files": [ { "path": "./src/lib/components/magic/globe/globe.svelte", "type": "registry:component", "target": "magic/globe/globe.svelte" }, { "path": "./src/lib/components/magic/globe/index.ts", "type": "registry:file", "target": "magic/globe/index.ts" } ], "registryDependencies": [], "dependencies": ["cobe"] }, { "name": "hero-video-dialog", "type": "registry:block", "title": "Hero Video Dialog", "description": "A video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.", "files": [ { "path": "./src/lib/components/magic/hero-video-dialog/hero-video-dialog.svelte", "type": "registry:component", "target": "magic/hero-video-dialog/hero-video-dialog.svelte" }, { "path": "./src/lib/components/magic/hero-video-dialog/index.ts", "type": "registry:file", "target": "magic/hero-video-dialog/index.ts" } ], "registryDependencies": [], "dependencies": ["@lucide/svelte", "motion-sv"] }, { "name": "hexagon-pattern", "type": "registry:block", "title": "Hexagon Pattern", "description": "An SVG-based hexagon pattern background component with configurable radius, gap, direction, and highlighted cells.", "files": [ { "path": "./src/lib/components/magic/hexagon-pattern/hexagon-pattern.svelte", "type": "registry:component", "target": "magic/hexagon-pattern/hexagon-pattern.svelte" }, { "path": "./src/lib/components/magic/hexagon-pattern/index.ts", "type": "registry:file", "target": "magic/hexagon-pattern/index.ts" } ], "registryDependencies": [] }, { "name": "hyper-text", "type": "registry:block", "title": "Hyper Text", "description": "An animated text component that creates a glitch effect by cycling through random characters before revealing the final text.", "files": [ { "path": "./src/lib/components/magic/hyper-text/hyper-text.svelte", "type": "registry:component", "target": "magic/hyper-text/hyper-text.svelte" }, { "path": "./src/lib/components/magic/hyper-text/index.ts", "type": "registry:file", "target": "magic/hyper-text/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "icon-cloud", "type": "registry:block", "title": "Icon Cloud", "description": "An interactive 3D tag cloud component that displays icons or images in a sphere formation with smooth rotation and drag interactions.", "files": [ { "path": "./src/lib/components/magic/icon-cloud/icon-cloud.svelte", "type": "registry:component", "target": "magic/icon-cloud/icon-cloud.svelte" }, { "path": "./src/lib/components/magic/icon-cloud/index.ts", "type": "registry:file", "target": "magic/icon-cloud/index.ts" } ], "registryDependencies": [], "dependencies": [] }, { "name": "interactive-hover-button", "type": "registry:block", "title": "Interactive Hover Button", "description": "A button with an interactive hover effect featuring an expanding dot and sliding text animation with an arrow.", "files": [ { "path": "./src/lib/components/magic/interactive-hover-button/interactive-hover-button.svelte", "type": "registry:component", "target": "magic/interactive-hover-button/interactive-hover-button.svelte" }, { "path": "./src/lib/components/magic/interactive-hover-button/index.ts", "type": "registry:file", "target": "magic/interactive-hover-button/index.ts" } ], "registryDependencies": [], "dependencies": ["@lucide/svelte"] }, { "name": "light-rays", "type": "registry:block", "title": "Light Rays", "description": "A component that creates animated light rays with customizable count, color, blur, speed, and length.", "files": [ { "path": "./src/lib/components/magic/light-rays/light-rays.svelte", "type": "registry:component", "target": "magic/light-rays/light-rays.svelte" }, { "path": "./src/lib/components/magic/light-rays/index.ts", "type": "registry:file", "target": "magic/light-rays/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "line-shadow-text", "type": "registry:block", "title": "Line Shadow Text", "description": "A text component with an animated diagonal line shadow effect that moves across the text.", "files": [ { "path": "./src/lib/components/magic/line-shadow-text/line-shadow-text.svelte", "type": "registry:component", "target": "magic/line-shadow-text/line-shadow-text.svelte" }, { "path": "./src/lib/components/magic/line-shadow-text/index.ts", "type": "registry:file", "target": "magic/line-shadow-text/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"], "cssVars": { "theme": { "animate-line-shadow": "line-shadow 15s linear infinite" } }, "css": { "@keyframes line-shadow": { "0%": { "background-position": "0 0" }, "100%": { "background-position": "100% -100%" } } } }, { "name": "motion-grid", "type": "registry:block", "title": "Motion Grid", "description": "A frame-based 2D grid animation primitive with active/inactive cell states.", "files": [ { "path": "./src/lib/components/magic/motion-grid/motion-grid.svelte", "type": "registry:component", "target": "magic/motion-grid/motion-grid.svelte" }, { "path": "./src/lib/components/magic/motion-grid/motion-grid-cells.svelte", "type": "registry:component", "target": "magic/motion-grid/motion-grid-cells.svelte" }, { "path": "./src/lib/components/magic/motion-grid/index.ts", "type": "registry:file", "target": "magic/motion-grid/index.ts" }, { "path": "./src/lib/components/magic/motion-grid/types.ts", "type": "registry:file", "target": "magic/motion-grid/types.ts" }, { "path": "./src/lib/components/magic/motion-grid/use-motion-grid-context.svelte.ts", "type": "registry:file", "target": "magic/motion-grid/use-motion-grid-context.svelte.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "morphing-text", "type": "registry:block", "title": "Morphing Text", "description": "A text component that smoothly morphs between multiple text strings with a blur transition effect.", "files": [ { "path": "./src/lib/components/magic/morphing-text/morphing-text.svelte", "type": "registry:component", "target": "magic/morphing-text/morphing-text.svelte" }, { "path": "./src/lib/components/magic/morphing-text/index.ts", "type": "registry:file", "target": "magic/morphing-text/index.ts" } ], "registryDependencies": [] }, { "name": "neon-gradient-card", "type": "registry:block", "title": "Neon Gradient Card", "description": "A card component with animated neon gradient borders and customizable colors, border size, and radius.", "files": [ { "path": "./src/lib/components/magic/neon-gradient-card/neon-gradient-card.svelte", "type": "registry:component", "target": "magic/neon-gradient-card/neon-gradient-card.svelte" }, { "path": "./src/lib/components/magic/neon-gradient-card/index.ts", "type": "registry:file", "target": "magic/neon-gradient-card/index.ts" } ], "registryDependencies": [] }, { "name": "noise-texture", "type": "registry:block", "title": "Noise Texture", "description": "An SVG fractal noise layer using feTurbulence for subtle texture overlays.", "files": [ { "path": "./src/lib/components/magic/noise-texture/noise-texture.svelte", "type": "registry:component", "target": "magic/noise-texture/noise-texture.svelte" }, { "path": "./src/lib/components/magic/noise-texture/index.ts", "type": "registry:file", "target": "magic/noise-texture/index.ts" } ], "registryDependencies": [] }, { "name": "number-ticker", "type": "registry:block", "title": "Number Ticker", "description": "An animated number counter component with spring physics that smoothly animates from a start value to an end value.", "files": [ { "path": "./src/lib/components/magic/number-ticker/number-ticker.svelte", "type": "registry:component", "target": "magic/number-ticker/number-ticker.svelte" }, { "path": "./src/lib/components/magic/number-ticker/index.ts", "type": "registry:file", "target": "magic/number-ticker/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "pulsating-button", "type": "registry:block", "title": "Pulsating Button", "description": "A button component with a pulsating ring effect that expands and fades around the button.", "files": [ { "path": "./src/lib/components/magic/pulsating-button/pulsating-button.svelte", "type": "registry:component", "target": "magic/pulsating-button/pulsating-button.svelte" }, { "path": "./src/lib/components/magic/pulsating-button/index.ts", "type": "registry:file", "target": "magic/pulsating-button/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-pulse-slow": "pulse-slow var(--duration) ease-out infinite", "animate-pulse-ring": "pulse-ring var(--duration) ease-out infinite", "animate-pulse-ripple": "pulse-ripple var(--duration) cubic-bezier(0.16, 1, 0.3, 1) infinite" } }, "css": { "@keyframes pulse-slow": { "0%": { "box-shadow": "0 0 0 0 var(--pulse-color)" }, "100%": { "box-shadow": "0 0 0 var(--distance) transparent" } }, "@keyframes pulse-ring": { "0%, 100%": { "box-shadow": "0 0 0 0 var(--pulse-color, oklch(from var(--bg) l c h / 0.5))" }, "50%": { "box-shadow": "0 0 0 var(--distance) var(--pulse-color, oklch(from var(--bg) l c h / 0.5))" } }, "@keyframes pulse-ripple": { "0%": { "box-shadow": "0 0 0 0 oklch(from var(--pulse-color, var(--bg)) l c h / 1)" }, "100%": { "box-shadow": "0 0 0 var(--distance) oklch(from var(--pulse-color, var(--bg)) l c h / 0)" } } } }, { "name": "rainbow-button", "type": "registry:block", "title": "Rainbow Button", "description": "A button component with animated rainbow gradient borders and background that cycles through multiple colors.", "files": [ { "path": "./src/lib/components/magic/rainbow-button/rainbow-button.svelte", "type": "registry:component", "target": "magic/rainbow-button/rainbow-button.svelte" }, { "path": "./src/lib/components/magic/rainbow-button/index.ts", "type": "registry:file", "target": "magic/rainbow-button/index.ts" } ], "registryDependencies": [], "dependencies": ["bits-ui", "tailwind-variants"], "cssVars": { "theme": { "animate-rainbow": "rainbow var(--speed, 2s) infinite linear" } }, "css": { "@keyframes rainbow": { "0%": { "background-position": "0%" }, "100%": { "background-position": "200%" } } } }, { "name": "ripple", "type": "registry:block", "title": "Ripple", "description": "A component that creates expanding ripple circles with customizable size, opacity, and number of circles.", "files": [ { "path": "./src/lib/components/magic/ripple/ripple.svelte", "type": "registry:component", "target": "magic/ripple/ripple.svelte" }, { "path": "./src/lib/components/magic/ripple/index.ts", "type": "registry:file", "target": "magic/ripple/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-ripple": "ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite" } }, "css": { "@keyframes ripple": { "0%, 100%": { "transform": "translate(-50%, -50%) scale(1)" }, "50%": { "transform": "translate(-50%, -50%) scale(0.9)" } } } }, { "name": "ripple-button", "type": "registry:block", "title": "Ripple Button", "description": "A button component with a ripple effect that appears on click, expanding from the click position.", "files": [ { "path": "./src/lib/components/magic/ripple-button/ripple-button.svelte", "type": "registry:component", "target": "magic/ripple-button/ripple-button.svelte" }, { "path": "./src/lib/components/magic/ripple-button/index.ts", "type": "registry:file", "target": "magic/ripple-button/index.ts" } ], "registryDependencies": [], "dependencies": ["runed"], "cssVars": { "theme": { "animate-rippling": "rippling var(--duration) ease-out" } }, "css": { "@keyframes rippling": { "0%": { "opacity": "1", "transform": "scale(0)" }, "100%": { "transform": "scale(2)", "opacity": "0" } } } }, { "name": "scroll-progress", "type": "registry:block", "title": "Scroll Progress", "description": "A fixed progress bar component that indicates page scroll progress with a gradient color effect.", "files": [ { "path": "./src/lib/components/magic/scroll-progress/scroll-progress.svelte", "type": "registry:component", "target": "magic/scroll-progress/scroll-progress.svelte" }, { "path": "./src/lib/components/magic/scroll-progress/index.ts", "type": "registry:file", "target": "magic/scroll-progress/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "shimmer-button", "type": "registry:block", "title": "Shimmer Button", "description": "A button component with an animated shimmer effect that slides across the button surface.", "files": [ { "path": "./src/lib/components/magic/shimmer-button/shimmer-button.svelte", "type": "registry:component", "target": "magic/shimmer-button/shimmer-button.svelte" }, { "path": "./src/lib/components/magic/shimmer-button/index.ts", "type": "registry:file", "target": "magic/shimmer-button/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate", "animate-spin-around": "spin-around calc(var(--speed) * 2) infinite linear" } }, "css": { "@keyframes shimmer-slide": { "to": { "transform": "translate(calc(100cqw - 100%), 0)" } }, "@keyframes spin-around": { "0%": { "transform": "translateZ(0) rotate(0)" }, "15%, 35%": { "transform": "translateZ(0) rotate(90deg)" }, "65%, 85%": { "transform": "translateZ(0) rotate(270deg)" }, "100%": { "transform": "translateZ(0) rotate(360deg)" } } } }, { "name": "shiny-button", "type": "registry:block", "title": "Shiny Button", "description": "A button component with a shiny gradient mask effect that animates across the text on hover and press.", "files": [ { "path": "./src/lib/components/magic/shiny-button/shiny-button.svelte", "type": "registry:component", "target": "magic/shiny-button/shiny-button.svelte" }, { "path": "./src/lib/components/magic/shiny-button/index.ts", "type": "registry:file", "target": "magic/shiny-button/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "terminal", "type": "registry:block", "title": "Terminal", "description": "A terminal-like UI component with typing animations, sequence control, and intersection observer support.", "files": [ { "path": "./src/lib/components/magic/terminal/terminal.svelte", "type": "registry:component", "target": "magic/terminal/terminal.svelte" }, { "path": "./src/lib/components/magic/terminal/animated-span.svelte", "type": "registry:component", "target": "magic/terminal/animated-span.svelte" }, { "path": "./src/lib/components/magic/terminal/typing-animation.svelte", "type": "registry:component", "target": "magic/terminal/typing-animation.svelte" }, { "path": "./src/lib/components/magic/terminal/index.ts", "type": "registry:file", "target": "magic/terminal/index.ts" } ], "registryDependencies": [], "dependencies": ["runed"], "cssVars": { "theme": { "animate-blink-cursor": "blink-cursor 1.2s step-end infinite" } }, "css": { "@keyframes blink-cursor": { "0%, 49%": { "opacity": "1" }, "50%, 100%": { "opacity": "0" } } } }, { "name": "video-text", "type": "registry:block", "title": "Video Text", "description": "A component that displays video content masked by text, creating a text-shaped video effect with customizable typography.", "files": [ { "path": "./src/lib/components/magic/video-text/video-text.svelte", "type": "registry:component", "target": "magic/video-text/video-text.svelte" }, { "path": "./src/lib/components/magic/video-text/index.ts", "type": "registry:file", "target": "magic/video-text/index.ts" } ], "registryDependencies": [], "dependencies": ["runed"] }, { "name": "warp-background", "type": "registry:block", "title": "Warp Background", "description": "A 3D perspective grid background with animated light beams that create a warping effect.", "files": [ { "path": "./src/lib/components/magic/warp-background/warp-background.svelte", "type": "registry:component", "target": "magic/warp-background/warp-background.svelte" }, { "path": "./src/lib/components/magic/warp-background/index.ts", "type": "registry:file", "target": "magic/warp-background/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "word-rotate", "type": "registry:block", "title": "Word Rotate", "description": "A component that cycles through an array of words with smooth fade and slide animations between transitions.", "files": [ { "path": "./src/lib/components/magic/word-rotate/word-rotate.svelte", "type": "registry:component", "target": "magic/word-rotate/word-rotate.svelte" }, { "path": "./src/lib/components/magic/word-rotate/index.ts", "type": "registry:file", "target": "magic/word-rotate/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "bento-grid", "type": "registry:block", "title": "Bento Grid", "description": "A flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.", "files": [ { "path": "./src/lib/components/magic/bento-grid/bento-grid.svelte", "type": "registry:component", "target": "magic/bento-grid/bento-grid.svelte" }, { "path": "./src/lib/components/magic/bento-grid/bento-card.svelte", "type": "registry:component", "target": "magic/bento-grid/bento-card.svelte" }, { "path": "./src/lib/components/magic/bento-grid/index.ts", "type": "registry:file", "target": "magic/bento-grid/index.ts" } ], "registryDependencies": [], "dependencies": ["@lucide/svelte"] }, { "name": "dither-shader", "type": "registry:block", "title": "Dither Shader", "description": "A canvas-based component that applies dithering effects to images with customizable patterns and color modes.", "files": [ { "path": "./src/lib/components/magic/dither-shader/dither-shader.svelte", "type": "registry:component", "target": "magic/dither-shader/dither-shader.svelte" }, { "path": "./src/lib/components/magic/dither-shader/index.ts", "type": "registry:file", "target": "magic/dither-shader/index.ts" } ], "registryDependencies": [], "dependencies": [] }, { "name": "dock", "type": "registry:block", "title": "Dock", "description": "A macOS-style dock component with smooth magnification animation on hover, inspired by the macOS dock.", "files": [ { "path": "./src/lib/components/magic/dock/dock.svelte", "type": "registry:component", "target": "magic/dock/dock.svelte" }, { "path": "./src/lib/components/magic/dock/dock-icon.svelte", "type": "registry:component", "target": "magic/dock/dock-icon.svelte" }, { "path": "./src/lib/components/magic/dock/index.ts", "type": "registry:file", "target": "magic/dock/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "lens", "type": "registry:block", "title": "Lens", "description": "An interactive component that enables zooming into images, videos and other elements.", "files": [ { "path": "./src/lib/components/magic/lens/lens.svelte", "type": "registry:component", "target": "magic/lens/lens.svelte" }, { "path": "./src/lib/components/magic/lens/index.ts", "type": "registry:file", "target": "magic/lens/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "magic-card", "type": "registry:block", "title": "Magic Card", "description": "A spotlight effect that follows your mouse cursor and highlights borders on hover.", "files": [ { "path": "./src/lib/components/magic/magic-card/magic-card.svelte", "type": "registry:component", "target": "magic/magic-card/magic-card.svelte" }, { "path": "./src/lib/components/magic/magic-card/index.ts", "type": "registry:file", "target": "magic/magic-card/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "orbiting-circles", "type": "registry:block", "title": "Orbiting Circles", "description": "A component that displays icons or elements orbiting in a circular path with customizable radius, duration, and direction.", "files": [ { "path": "./src/lib/components/magic/orbiting-circles/orbiting-circles.svelte", "type": "registry:component", "target": "magic/orbiting-circles/orbiting-circles.svelte" }, { "path": "./src/lib/components/magic/orbiting-circles/index.ts", "type": "registry:file", "target": "magic/orbiting-circles/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-orbit": "orbit calc(var(--duration) * 1s) linear infinite" } }, "css": { "@keyframes orbit": { "0%": { "transform": "rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))" }, "100%": { "transform": "rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))" } } } }, { "name": "pointer", "type": "registry:block", "title": "Pointer", "description": "A component that displays a pointer when hovering over an element", "files": [ { "path": "./src/lib/components/magic/pointer/pointer.svelte", "type": "registry:component", "target": "magic/pointer/pointer.svelte" }, { "path": "./src/lib/components/magic/pointer/index.ts", "type": "registry:file", "target": "magic/pointer/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv", "runed"] }, { "name": "progressive-blur", "type": "registry:block", "title": "Progressive Blur", "description": "A component that creates a progressive blur effect at the top, bottom, or both edges of a container with customizable blur levels and positioning.", "files": [ { "path": "./src/lib/components/magic/progressive-blur/progressive-blur.svelte", "type": "registry:component", "target": "magic/progressive-blur/progressive-blur.svelte" }, { "path": "./src/lib/components/magic/progressive-blur/index.ts", "type": "registry:file", "target": "magic/progressive-blur/index.ts" } ], "registryDependencies": [] }, { "name": "retro-grid", "type": "registry:block", "title": "Retro Grid", "description": "An animated retro-style grid background component with customizable angle, cell size, opacity, and colors.", "files": [ { "path": "./src/lib/components/magic/retro-grid/retro-grid.svelte", "type": "registry:component", "target": "magic/retro-grid/retro-grid.svelte" }, { "path": "./src/lib/components/magic/retro-grid/index.ts", "type": "registry:file", "target": "magic/retro-grid/index.ts" } ], "registryDependencies": [], "cssVars": { "theme": { "animate-grid": "grid 15s linear infinite" } }, "css": { "@keyframes grid": { "0%": { "transform": "translateY(-50%)" }, "100%": { "transform": "translateY(0)" } } } }, { "name": "smooth-cursor", "type": "registry:block", "title": "Smooth Cursor", "description": "A smooth animated cursor component with spring physics that follows mouse movement with rotation and scale effects.", "files": [ { "path": "./src/lib/components/magic/smooth-cursor/smooth-cursor.svelte", "type": "registry:component", "target": "magic/smooth-cursor/smooth-cursor.svelte" }, { "path": "./src/lib/components/magic/smooth-cursor/index.ts", "type": "registry:file", "target": "magic/smooth-cursor/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "sparkles-text", "type": "registry:block", "title": "Sparkles Text", "description": "A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.", "files": [ { "path": "./src/lib/components/magic/sparkles-text/sparkles-text.svelte", "type": "registry:component", "target": "magic/sparkles-text/sparkles-text.svelte" }, { "path": "./src/lib/components/magic/sparkles-text/index.ts", "type": "registry:file", "target": "magic/sparkles-text/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "stagger-text", "type": "registry:block", "title": "Stagger Text", "description": "An interactive text component where characters animate vertically on hover with a staggered delay effect.", "files": [ { "path": "./src/lib/components/magic/stagger-text/stagger-text.svelte", "type": "registry:component", "target": "magic/stagger-text/stagger-text.svelte" }, { "path": "./src/lib/components/magic/stagger-text/index.ts", "type": "registry:file", "target": "magic/stagger-text/index.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv"] }, { "name": "glyph-matrix", "type": "registry:block", "title": "Glyph Matrix", "description": "An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.", "files": [ { "path": "./src/lib/components/magic/glyph-matrix/glyph-matrix.svelte", "type": "registry:component", "target": "magic/glyph-matrix/glyph-matrix.svelte" }, { "path": "./src/lib/components/magic/glyph-matrix/index.ts", "type": "registry:file", "target": "magic/glyph-matrix/index.ts" } ], "registryDependencies": [], "dependencies": ["runed"] }, { "name": "flow", "type": "registry:block", "title": "Flow", "description": "A group of components for building directed flow diagrams with nodes and connectors.", "files": [ { "path": "./src/lib/components/magic/flow/connectors.svelte", "type": "registry:component", "target": "magic/flow/connectors.svelte" }, { "path": "./src/lib/components/magic/flow/flow-anchor.svelte", "type": "registry:component", "target": "magic/flow/flow-anchor.svelte" }, { "path": "./src/lib/components/magic/flow/flow-node-list.svelte", "type": "registry:component", "target": "magic/flow/flow-node-list.svelte" }, { "path": "./src/lib/components/magic/flow/flow-node.svelte", "type": "registry:component", "target": "magic/flow/flow-node.svelte" }, { "path": "./src/lib/components/magic/flow/flow-parallel.svelte", "type": "registry:component", "target": "magic/flow/flow-parallel.svelte" }, { "path": "./src/lib/components/magic/flow/flow-root.svelte", "type": "registry:component", "target": "magic/flow/flow-root.svelte" }, { "path": "./src/lib/components/magic/flow/connectors.ts", "type": "registry:file", "target": "magic/flow/connectors.ts" }, { "path": "./src/lib/components/magic/flow/descendants.svelte.ts", "type": "registry:file", "target": "magic/flow/descendants.svelte.ts" }, { "path": "./src/lib/components/magic/flow/diagram-context.svelte.ts", "type": "registry:file", "target": "magic/flow/diagram-context.svelte.ts" }, { "path": "./src/lib/components/magic/flow/index.ts", "type": "registry:file", "target": "magic/flow/index.ts" }, { "path": "./src/lib/components/magic/flow/node-context.svelte.ts", "type": "registry:file", "target": "magic/flow/node-context.svelte.ts" }, { "path": "./src/lib/components/magic/flow/render-props.ts", "type": "registry:file", "target": "magic/flow/render-props.ts" }, { "path": "./src/lib/components/magic/flow/types.ts", "type": "registry:file", "target": "magic/flow/types.ts" } ], "registryDependencies": [], "dependencies": ["motion-sv", "runed"], "cssVars": { "theme": { "color-kumo-base": "var(--kumo-base)", "color-kumo-fill": "var(--kumo-fill)", "color-kumo-hairline": "var(--kumo-hairline)", "color-kumo-overlay": "var(--kumo-overlay)", "color-kumo-line": "var(--kumo-line)", "color-kumo-inactive": "var(--kumo-inactive)", "color-kumo-subtle": "var(--kumo-subtle)", "text-color-kumo-inactive": "var(--kumo-inactive)", "text-color-kumo-subtle": "var(--kumo-subtle)" }, "light": { "kumo-base": "#fff", "kumo-fill": "oklch(92.2% 0 0)", "kumo-hairline": "oklch(93.5% 0 0)", "kumo-overlay": "oklch(97.5% 0 0)", "kumo-line": "oklch(14.5% 0 0 / 0.1)", "kumo-inactive": "oklch(87% 0 0)", "kumo-subtle": "oklch(55.6% 0 0)" }, "dark": { "kumo-base": "oklch(17% 0 0)", "kumo-fill": "oklch(26.9% 0 0)", "kumo-hairline": "oklch(26.9% 0 0)", "kumo-overlay": "oklch(26.9% 0 0)", "kumo-line": "oklch(32% 0 0)", "kumo-inactive": "oklch(43.9% 0 0)", "kumo-subtle": "oklch(70.8% 0 0)" } } } ] }