{ "name": "@vue-bits", "authors": ["David Haz"], "bugs": "https://github.com/DavidHDev/vue-bits/issues", "description": "An open source collection of animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.", "homepage": "https://vue-bits.dev", "repository": "https://github.com/DavidHDev/vue-bits", "tags": [ "vue", "javascript", "components", "web", "vuejs", "css-animations", "component-library", "ui-components", "3d", "ui-library", "tailwind", "tailwindcss", "components", "components-library" ], "type": "distributed", "items": [ { "name": "AnimatedContent", "title": "AnimatedContent", "description": "Wrapper that animates any children on scroll or mount with configurable direction, distance, duration and easing.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "AnimatedContent/AnimatedContent.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "BlobCursor", "title": "BlobCursor", "description": "Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "BlobCursor/BlobCursor.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "ClickSpark", "title": "ClickSpark", "description": "Creates particle spark bursts at click position.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ClickSpark/ClickSpark.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "Crosshair", "title": "Crosshair", "description": "Custom crosshair cursor with tracking, and link hover effects.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Crosshair/Crosshair.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "Cubes", "title": "Cubes", "description": "3D rotating cube cluster. Supports auto-rotation or hover interaction.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Cubes/Cubes.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "ElectricBorder", "title": "ElectricBorder", "description": "Jittery electric energy border with animated arcs, glow and adjustable intensity.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ElectricBorder/ElectricBorder.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "FadeContent", "title": "FadeContent", "description": "Simple directional fade / slide entrance wrapper with threshold-based activation.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "FadeContent/FadeContent.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "GlareHover", "title": "GlareHover", "description": "Adds a realistic moving glare highlight on hover over any element.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GlareHover/GlareHover.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "GradualBlur", "title": "GradualBlur", "description": "Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "mathjs", "version": "^14.6.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GradualBlur/GradualBlur.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "GhostCursor", "title": "GhostCursor", "description": "Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GhostCursor/GhostCursor.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "ImageTrail", "title": "ImageTrail", "description": "Cursor-based image trail with several built-in variants.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ImageTrail/ImageTrail.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "LogoLoop", "title": "LogoLoop", "description": "Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "LogoLoop/LogoLoop.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "Magnet", "title": "Magnet", "description": "Elements magnetically ease toward the cursor then settle back with spring physics.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Magnet/Magnet.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "MagnetLines", "title": "MagnetLines", "description": "Animated field lines bend toward the cursor.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "MagnetLines/MagnetLines.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "MetaBalls", "title": "MetaBalls", "description": "Liquid metaball blobs that merge and separate with smooth implicit surface animation.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "MetaBalls/MetaBalls.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "MetallicPaint", "title": "MetallicPaint", "description": "Liquid metallic paint shader which can be applied to SVG elements.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "MetallicPaint/MetallicPaint.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "Noise", "title": "Noise", "description": "Animated film grain / noise overlay adding subtle texture and motion.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Noise/Noise.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "PixelTransition", "title": "PixelTransition", "description": "Pixel dissolve transition for content reveal on hover.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "PixelTransition/PixelTransition.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "Ribbons", "title": "Ribbons", "description": "Flowing responsive ribbons/cursor trail driven by physics and pointer motion.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Ribbons/Ribbons.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "ShapeBlur", "title": "ShapeBlur", "description": "Morphing blurred geometric shape. The effect occurs on hover.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ShapeBlur/ShapeBlur.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "SplashCursor", "title": "SplashCursor", "description": "Liquid splash burst at cursor with curling ripples and waves.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "SplashCursor/SplashCursor.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "StarBorder", "title": "StarBorder", "description": "Animated star / sparkle border orbiting content with twinkle pulses.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "StarBorder/StarBorder.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "StickerPeel", "title": "StickerPeel", "description": "Sticker corner lift + peel interaction using 3D transform and shadow depth.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "StickerPeel/StickerPeel.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "TargetCursor", "title": "TargetCursor", "description": "A cursor follow animation with 4 corners that lock onto targets.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "TargetCursor/TargetCursor.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "LaserFlow", "title": "LaserFlow", "description": "Dynamic laser light that flows onto a surface, customizable effect.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "LaserFlow/LaserFlow.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "CountUp", "title": "CountUp", "description": "Animated number counter supporting formatting and decimals.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "CountUp/CountUp.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Animations"] }, { "name": "ASCIIText", "title": "ASCIIText", "description": "Renders text with an animated ASCII background for a retro feel.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ASCIIText/AsciiText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "BlurText", "title": "BlurText", "description": "Text starts blurred then crisply resolves for a soft-focus reveal effect.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "BlurText/BlurText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "CircularText", "title": "CircularText", "description": "Layouts characters around a circle with optional rotation animation.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "CircularText/CircularText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "CurvedLoop", "title": "CurvedLoop", "description": "Flowing looping text path along a customizable curve with drag interaction.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "CurvedLoop/CurvedLoop.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "DecryptedText", "title": "DecryptedText", "description": "Hacker-style decryption cycling random glyphs until resolving to real text.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "DecryptedText/DecryptedText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "FallingText", "title": "FallingText", "description": "Characters fall with gravity + bounce creating a playful entrance.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "matter-js", "version": "^0.20.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "FallingText/FallingText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "FuzzyText", "title": "FuzzyText", "description": "Vibrating fuzzy text with controllable hover intensity.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "FuzzyText/FuzzyText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "GlitchText", "title": "GlitchText", "description": "RGB split and distortion glitch effect with jitter effects.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GlitchText/GlitchText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "GradientText", "title": "GradientText", "description": "Animated gradient sweep across live text with speed and color control.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GradientText/GradientText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "RotatingText", "title": "RotatingText", "description": "Cycles through multiple phrases with 3D rotate / flip transitions.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "RotatingText/RotatingText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "ScrambleText", "title": "ScrambleText", "description": "Detects cursor position and applies a distortion effect to text.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ScrambleText/ScrambleText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "ScrollFloat", "title": "ScrollFloat", "description": "Text gently floats / parallax shifts on scroll.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ScrollFloat/ScrollFloat.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "ScrollReveal", "title": "ScrollReveal", "description": "Text gently unblurs and reveals on scroll.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ScrollReveal/ScrollReveal.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "ScrollVelocity", "title": "ScrollVelocity", "description": "Text marquee animatio - speed and distortion scale with user's scroll velocity.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ScrollVelocity/ScrollVelocity.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "ShinyText", "title": "ShinyText", "description": "Metallic sheen sweeps across text producing a reflective highlight.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ShinyText/ShinyText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "SplitText", "title": "SplitText", "description": "Splits text into characters / words for staggered entrance animation.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "SplitText/SplitText.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "TextCursor", "title": "TextCursor", "description": "Make any text element follow your cursor, leaving a trail of copies behind it.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "TextCursor/TextCursor.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "TextPressure", "title": "TextPressure", "description": "Characters scale / warp interactively based on pointer pressure zone.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "TextPressure/TextPressure.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "TextType", "title": "TextType", "description": "Typewriter effect with blinking cursor and adjustable typing cadence.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "TextType/TextType.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "TrueFocus", "title": "TrueFocus", "description": "Applies dynamic blur / clarity based over a series of words in order.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "TrueFocus/TrueFocus.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "VariableProximity", "title": "VariableProximity", "description": "Letter styling changes continuously with pointer distance mapping.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "VariableProximity/VariableProximity.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["TextAnimations"] }, { "name": "AnimatedList", "title": "AnimatedList", "description": "List items enter with staggered motion variants for polished reveals.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "AnimatedList/AnimatedList.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "BounceCards", "title": "BounceCards", "description": "Cards bounce that bounce in on mount.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "BounceCards/BounceCards.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "BubbleMenu", "title": "BubbleMenu", "description": "Floating circular expanding menu with staggered item reveal.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "BubbleMenu/BubbleMenu.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "CardNav", "title": "CardNav", "description": "Expandable navigation bar with card panels revealing nested links.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "CardNav/CardNav.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "CardSwap", "title": "CardSwap", "description": "Cards animate position swapping with smooth layout transitions.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "CardSwap/CardSwap.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Carousel", "title": "Carousel", "description": "Responsive carousel with touch gestures, looping and transitions.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Carousel/Carousel.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "ChromaGrid", "title": "ChromaGrid", "description": "A responsive grid of grayscale tiles. Hovering the grid reaveals their colors.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ChromaGrid/ChromaGrid.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "CircularGallery", "title": "CircularGallery", "description": "Circular orbit gallery rotating images.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "CircularGallery/CircularGallery.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Counter", "title": "Counter", "description": "Flexible animated counter supporting increments + easing.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Counter/Counter.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "DecayCard", "title": "DecayCard", "description": "Hover parallax effect that disintegrates the content of a card.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "DecayCard/DecayCard.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Dock", "title": "Dock", "description": "macOS style magnifying dock with proximity scaling of icons.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Dock/Dock.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "DomeGallery", "title": "DomeGallery", "description": "Immersive 3D dome gallery projecting images on a hemispheric surface.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "DomeGallery/DomeGallery.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "ElasticSlider", "title": "ElasticSlider", "description": "Slider handle stretches elastically then snaps with spring physics.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ElasticSlider/ElasticSlider.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "FlowingMenu", "title": "FlowingMenu", "description": "Liquid flowing active indicator glides between menu items.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "FlowingMenu/FlowingMenu.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "FlyingPosters", "title": "FlyingPosters", "description": "3D posters rotate on scroll infinitely.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "FlyingPosters/FlyingPosters.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Folder", "title": "Folder", "description": "Interactive folder opens to reveal nested content smooth motion.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Folder/Folder.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "GlassIcons", "title": "GlassIcons", "description": "Icon set styled with frosted glass blur.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GlassIcons/GlassIcons.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "GlassSurface", "title": "GlassSurface", "description": "Advanced Apple-style glass surface with real-time distortion + lighting.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GlassSurface/GlassSurface.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "GooeyNav", "title": "GooeyNav", "description": "Navigation indicator morphs with gooey blob transitions between items.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GooeyNav/GooeyNav.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "InfiniteMenu", "title": "InfiniteMenu", "description": "Horizontally looping menu effect that scrolls endlessly with seamless wrap.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gl-matrix", "version": "^3.4.3" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "InfiniteMenu/InfiniteMenu.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "InfiniteScroll", "title": "InfiniteScroll", "description": "Infinite scrolling container auto-loads content near viewport end.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "InfiniteScroll/InfiniteScroll.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "MagicBento", "title": "MagicBento", "description": "Interactive bento grid tiles expand + animate with various options.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "MagicBento/MagicBento.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Masonry", "title": "Masonry", "description": "Responsive masonry layout with animated reflow + gaps optimization.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Masonry/Masonry.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "PillNav", "title": "PillNav", "description": "Minimal pill nav with sliding active highlight + smooth easing.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "PillNav/PillNav.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "PixelCard", "title": "PixelCard", "description": "Card content revealed through pixel expansion transition.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "PixelCard/PixelCard.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "ProfileCard", "title": "ProfileCard", "description": "Animated profile card glare with 3D hover effect.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ProfileCard/ProfileCard.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "ScrollStack", "title": "ScrollStack", "description": "Overlapping card stack reveals on scroll with depth layering.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "lenis", "version": "^1.3.8" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ScrollStack/ScrollStack.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "SpotlightCard", "title": "SpotlightCard", "description": "Dynamic spotlight follows cursor casting gradient illumination.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "SpotlightCard/SpotlightCard.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Stack", "title": "Stack", "description": "Layered stack with swipe animations and smooth transitions.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Stack/Stack.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Stepper", "title": "Stepper", "description": "Animated multi-step progress indicator with active state transitions.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Stepper/Stepper.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "TiltedCard", "title": "TiltedCard", "description": "3D perspective tilt card reacting to pointer.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "motion-v", "version": "^1.5.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "TiltedCard/TiltedCard.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "StaggeredMenu", "title": "StaggeredMenu", "description": "Menu with staggered item animations and smooth transitions on open/close.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "StaggeredMenu/StaggeredMenu.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Components"] }, { "name": "Aurora", "title": "Aurora", "description": "Flowing aurora gradient background.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Aurora/Aurora.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Balatro", "title": "Balatro", "description": "The balatro shader, fully customizalbe and interactive.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Balatro/Balatro.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Ballpit", "title": "Ballpit", "description": "Physics ball pit simulation with bouncing colorful spheres.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [ { "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }, { "ecosystem": "js", "name": "three", "version": "^0.178.0" } ], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Ballpit/Ballpit.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Beams", "title": "Beams", "description": "Crossing animated ribbons with customizable properties.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Beams/Beams.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "ColorBends", "title": "ColorBends", "description": "Vibrant color bends with smooth flowing animation.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "ColorBends/ColorBends.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "DarkVeil", "title": "DarkVeil", "description": "Subtle dark background with a smooth animation and postprocessing.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "DarkVeil/DarkVeil.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Dither", "title": "Dither", "description": "Retro dithered noise shader background.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Dither/Dither.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "DotGrid", "title": "DotGrid", "description": "Animated dot grid with cursor interactions.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "DotGrid/DotGrid.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "FaultyTerminal", "title": "FaultyTerminal", "description": "Terminal CRT scanline squares effect with flicker + noise.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "FaultyTerminal/FaultyTerminal.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "FloatingLines", "title": "FloatingLines", "description": "3D floating lines that react to cursor movement.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "FloatingLines/FloatingLines.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Galaxy", "title": "Galaxy", "description": "Parallax realistic starfield with pointer interactions.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Galaxy/Galaxy.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "GradientBlinds", "title": "GradientBlinds", "description": "Layered gradient blinds with spotlight and noise distortion.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GradientBlinds/GradientBlinds.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "GridDistortion", "title": "GridDistortion", "description": "Warped grid mesh distorts smoothly reacting to cursor.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GridDistortion/GridDistortion.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "GridMotion", "title": "GridMotion", "description": "Perspective moving grid lines based on cusror position.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "GridMotion/GridMotion.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Hyperspeed", "title": "Hyperspeed", "description": "Animated lines continously moving to simulate hyperspace travel on click hold.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [ { "ecosystem": "js", "name": "three", "version": "^0.178.0" }, { "ecosystem": "js", "name": "postprocessing", "version": "^6.37.6" } ], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Hyperspeed/Hyperspeed.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] }, { "type": "registry:component", "role": "file", "path": "Hyperspeed/HyperspeedPresets.ts", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Iridescence", "title": "Iridescence", "description": "Slick iridescent shader with shifting waves.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Iridescence/Iridescence.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "LetterGlitch", "title": "LetterGlitch", "description": "Matrix style letter animation.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "LetterGlitch/LetterGlitch.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "LightRays", "title": "LightRays", "description": "Volumetric light rays/beams with customizable direction.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "LightRays/LightRays.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Lightning", "title": "Lightning", "description": "Procedural lightning bolts with branching and glow flicker.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Lightning/Lightning.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "LiquidChrome", "title": "LiquidChrome", "description": "Liquid metallic chrome shader with flowing reflective surface.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "LiquidChrome/LiquidChrome.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Orb", "title": "Orb", "description": "Floating energy orb with customizable hover effect.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Orb/Orb.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Particles", "title": "Particles", "description": "Configurable particle system.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Particles/Particles.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "PixelBlast", "title": "PixelBlast", "description": "Exploding pixel particle bursts with optional liquid postprocessing.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [ { "ecosystem": "js", "name": "postprocessing", "version": "^6.37.6" }, { "ecosystem": "js", "name": "three", "version": "^0.178.0" } ], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "PixelBlast/PixelBlast.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Plasma", "title": "Plasma", "description": "Organic plasma gradients swirl + morph with smooth turbulence.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Plasma/Plasma.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Prism", "title": "Prism", "description": "Rotating prism with configurable intensity, size, and colors.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Prism/Prism.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "PrismaticBurst", "title": "PrismaticBurst", "description": "Burst of light rays with controllable color, distortion, amount.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "PrismaticBurst/PrismaticBurst.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "RippleGrid", "title": "RippleGrid", "description": "A grid that continously animates with a ripple effect.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "RippleGrid/RippleGrid.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Silk", "title": "Silk", "description": "Smooth waves background with soft lighting.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Silk/Silk.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Squares", "title": "Squares", "description": "Animated squares with scaling + direction customization.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Squares/Squares.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Threads", "title": "Threads", "description": "Animated pattern of lines forming a fabric-like motion.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "ogl", "version": "^1.0.11" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Threads/Threads.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "Waves", "title": "Waves", "description": "Layered lines that form smooth wave patterns with animation.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "Waves/Waves.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "LiquidEther", "title": "LiquidEther", "description": "Interactive liquid shader with flowing distortion and customizable colors.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "LiquidEther/LiquidEther.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] }, { "name": "LightPillar", "title": "LightPillar", "description": "Vertical pillar of light with glow effects.", "type": "registry:component", "add": "when-added", "registryDependencies": [], "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }], "devDependencies": [], "files": [ { "type": "registry:component", "role": "file", "path": "LightPillar/LightPillar.vue", "registryDependencies": [], "dependencies": [], "devDependencies": [] } ], "categories": ["Backgrounds"] } ] }