registry.json

{
	"$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"]
		}
	]
}