diff --git a/public/r/registry.json b/public/r/registry.json
index 9eeede5..a783f34 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -1 +1,2396 @@
-{"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":[]},{"type":"registry:component","role":"file","path":"MetallicPaint/parseImage.ts","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"]}]}
\ No newline at end of file
+{
+  "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"]
+    }
+  ]
+}
diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 84bce7f..6e42a68 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -1,6 +1,6 @@
 // Highlighted sidebar items
 export const NEW = ['Antigravity', 'Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow', 'Grid Scan'];
-export const UPDATED = [];
+export const UPDATED = ['Metallic Paint'];
 
 // Used for main sidebar navigation
 export const CATEGORIES = [
diff --git a/src/constants/code/Animations/metallicPaintCode.ts b/src/constants/code/Animations/metallicPaintCode.ts
index 87e7b12..3f1fb59 100644
--- a/src/constants/code/Animations/metallicPaintCode.ts
+++ b/src/constants/code/Animations/metallicPaintCode.ts
@@ -1,45 +1,47 @@
 import code from '@content/Animations/MetallicPaint/MetallicPaint.vue?raw';
-import utility from '@content/Animations/MetallicPaint/parseImage.ts?raw';
 import { createCodeObject } from '@/types/code';
 
 export const metallicPaint = createCodeObject(code, 'Animations/MetallicPaint', {
-  usage: `<template>
-  <MetallicPaint
-    :image-data="imageData"
-    :params="{
-      patternScale: 2,
-      refraction: 0.015,
-      edge: 1,
-      patternBlur: 0.005,
-      liquid: 0.07,
-      speed: 0.3
-    }"
-  />
-</template>
+  usage: `<script setup>
+// Effect inspired by Paper's Liquid Metal effect
 
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-  import MetallicPaint from "./MetallicPaint.vue";
+import MetallicPaint from "./MetallicPaint.vue";
 
-  // copy and import the parseImage utility from the correct path
-  import { parseImage } from './parseImage';
+// Replace with your own SVG path
+// NOTE: Your SVG should have padding around the shape to prevent cutoff
+// It should have a black fill color to allow the metallic effect to show through
+import logo from "./logo.svg";
+</script>
 
-  const imageData = ref<ImageData | null>(null);
+<template>
+  <div style="width: 100%; height: 400px;">
+    <MetallicPaint
+      :image-src="logo"
+      
+      :seed="42"
+      :scale="4"
+      :pattern-sharpness="1"
+      :noise-scale="0.5"
+      
+      :speed="0.3"
+      :liquid="0.75"
+      :mouse-animation="false"
+      
+      :brightness="2"
+      :contrast="0.5"
+      :refraction="0.01"
+      :blur="0.015"
+      :chromatic-spread="2"
+      :fresnel="1"
+      :angle="0"
+      :wave-amplitude="1"
+      :distortion="1"
+      :contour="0.2"
 
-  onMounted(async () => {
-    try {
-      // Example: Fetch an SVG image and parse it
-      // The SVG should have a transparent background and black fill color for the best effect
-
-      const response = await fetch('/path/to/your/logo.svg');
-      const blob = await response.blob();
-      const file = new File([blob], 'logo.svg', { type: blob.type });
-      const { imageData: processedImageData } = await parseImage(file);
-      imageData.value = processedImageData;
-    } catch (err) {
-      console.error('Error loading image:', err);
-    }
-  });
-</script>`,
-  utility
+      light-color="#ffffff"
+      dark-color="#000000"
+      tint-color="#27FF64"
+    />
+  </div>
+</template>`
 });
diff --git a/src/content/Animations/MetallicPaint/MetallicPaint.vue b/src/content/Animations/MetallicPaint/MetallicPaint.vue
index 32e85ee..b24f322 100644
--- a/src/content/Animations/MetallicPaint/MetallicPaint.vue
+++ b/src/content/Animations/MetallicPaint/MetallicPaint.vue
@@ -1,394 +1,566 @@
-<template>
-  <canvas ref="canvasRef" class="block w-full h-full object-contain" />
-</template>
-
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
-
-interface ShaderParams {
-  patternScale: number;
-  refraction: number;
-  edge: number;
-  patternBlur: number;
-  liquid: number;
-  speed: number;
-}
-
-interface Props {
-  imageData: ImageData;
-  params?: ShaderParams;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  params: () => ({
-    patternScale: 2,
-    refraction: 0.015,
-    edge: 1,
-    patternBlur: 0.005,
-    liquid: 0.07,
-    speed: 0.3
-  })
-});
-
-const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
-const gl = ref<WebGL2RenderingContext | null>(null);
-const uniforms = ref<Record<string, WebGLUniformLocation>>({});
-const totalAnimationTime = ref(0);
-const lastRenderTime = ref(0);
-const animationId = ref<number>();
-
-const vertexShaderSource = `#version 300 es
-precision mediump float;
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
+const vertexShader = `#version 300 es
+precision highp float;
 in vec2 a_position;
-out vec2 vUv;
+out vec2 vP;
+void main(){vP=a_position*.5+.5;gl_Position=vec4(a_position,0.,1.);}`;
 
-void main() {
-    vUv = .5 * (a_position + 1.);
-    gl_Position = vec4(a_position, 0.0, 1.0);
+const fragmentShader = `#version 300 es
+precision highp float;
+in vec2 vP;
+out vec4 oC;
+uniform sampler2D u_tex;
+uniform float u_time,u_ratio,u_imgRatio,u_seed,u_scale,u_refract,u_blur,u_liquid;
+uniform float u_bright,u_contrast,u_angle,u_fresnel,u_sharp,u_wave,u_noise,u_chroma;
+uniform float u_distort,u_contour;
+uniform vec3 u_lightColor,u_darkColor,u_tint;
+
+vec3 sC,sM;
+
+vec3 pW(vec3 v){
+  vec3 i=floor(v),f=fract(v),s=sign(fract(v*.5)-.5),h=fract(sM*i+i.yzx),c=f*(f-1.);
+  return s*c*((h*16.-4.)*c-1.);
+}
+
+vec3 aF(vec3 b,vec3 c){return pW(b+c.zxy-pW(b.zxy+c.yzx)+pW(b.yzx+c.xyz));}
+vec3 lM(vec3 s,vec3 p){return(p+aF(s,p))*.5;}
+
+vec2 fA(){
+  vec2 c=vP-.5;
+  c.x*=u_ratio>u_imgRatio?u_ratio/u_imgRatio:1.;
+  c.y*=u_ratio>u_imgRatio?1.:u_imgRatio/u_ratio;
+  return vec2(c.x+.5,.5-c.y);
+}
+
+vec2 rot(vec2 p,float r){float c=cos(r),s=sin(r);return vec2(p.x*c+p.y*s,p.y*c-p.x*s);}
+
+float bM(vec2 c,float t){
+  vec2 l=smoothstep(vec2(0.),vec2(t),c),u=smoothstep(vec2(0.),vec2(t),1.-c);
+  return l.x*l.y*u.x*u.y;
+}
+
+float mG(float hi,float lo,float t,float sh,float cv){
+  sh*=(2.-u_sharp);
+  float ci=smoothstep(.15,.85,cv),r=lo;
+  float e1=.08/u_scale;
+  r=mix(r,hi,smoothstep(0.,sh*1.5,t));
+  r=mix(r,lo,smoothstep(e1-sh,e1+sh,t));
+  float e2=e1+.05/u_scale*(1.-ci*.35);
+  r=mix(r,hi,smoothstep(e2-sh,e2+sh,t));
+  float e3=e2+.025/u_scale*(1.-ci*.45);
+  r=mix(r,lo,smoothstep(e3-sh,e3+sh,t));
+  float e4=e1+.1/u_scale;
+  r=mix(r,hi,smoothstep(e4-sh,e4+sh,t));
+  float rm=1.-e4,gT=clamp((t-e4)/rm,0.,1.);
+  r=mix(r,mix(hi,lo,smoothstep(0.,1.,gT)),smoothstep(e4-sh*.5,e4+sh*.5,t));
+  return r;
+}
+
+void main(){
+  sC=fract(vec3(.7548,.5698,.4154)*(u_seed+17.31))+.5;
+  sM=fract(sC.zxy-sC.yzx*1.618);
+  vec2 sc=vec2(vP.x*u_ratio,1.-vP.y);
+  float angleRad=u_angle*3.14159/180.;
+  sc=rot(sc-.5,angleRad)+.5;
+  sc=clamp(sc,0.,1.);
+  float sl=sc.x-sc.y,an=u_time*.001;
+  vec2 iC=fA();
+  vec4 texSample=texture(u_tex,iC);
+  float dp=texSample.r;
+  float shapeMask=texSample.a;
+  vec3 hi=u_lightColor*u_bright;
+  vec3 lo=u_darkColor*(2.-u_bright);
+  lo.b+=smoothstep(.6,1.4,sc.x+sc.y)*.08;
+  vec2 fC=sc-.5;
+  float rd=length(fC+vec2(0.,sl*.15));
+  vec2 ag=rot(fC,(.22-sl*.18)*3.14159);
+  float cv=1.-pow(rd*1.65,1.15);
+  cv*=pow(sc.y,.35);
+  float vs=shapeMask;
+  vs*=bM(iC,.01);
+  float fr=pow(1.-cv,u_fresnel)*.3;
+  vs=min(vs+fr*vs,1.);
+  float mT=an*.0625;
+  vec3 wO=vec3(-1.05,1.35,1.55);
+  vec3 wA=aF(vec3(31.,73.,56.),mT+wO)*.22*u_wave;
+  vec3 wB=aF(vec3(24.,64.,42.),mT-wO.yzx)*.22*u_wave;
+  vec2 nC=sc*45.*u_noise;
+  nC+=aF(sC.zxy,an*.17*sC.yzx-sc.yxy*.35).xy*18.*u_wave;
+  vec3 tC=vec3(.00041,.00053,.00076)*mT+wB*nC.x+wA*nC.y;
+  tC=lM(sC,tC);
+  tC=lM(sC+1.618,tC);
+  float tb=sin(tC.x*3.14159)*.5+.5;
+  tb=tb*2.-1.;
+  float noiseVal=pW(vec3(sc*8.+an,an*.5)).x;
+  float edgeFactor=smoothstep(0.,.5,dp)*smoothstep(1.,.5,dp);
+  float lD=dp+(1.-dp)*u_liquid*tb;
+  lD+=noiseVal*u_distort*.15*edgeFactor;
+  float rB=clamp(1.-cv,0.,1.);
+  float fl=ag.x+sl;
+  fl+=noiseVal*sl*u_distort*edgeFactor;
+  fl*=mix(1.,1.-dp*.5,u_contour);
+  fl-=dp*u_contour*.8;
+  float eI=smoothstep(0.,1.,lD)*smoothstep(1.,0.,lD);
+  fl-=tb*sl*1.8*eI;
+  float cA=cv*clamp(pow(sc.y,.12),.25,1.);
+  fl*=.12+(1.05-lD)*cA;
+  fl*=smoothstep(1.,.65,lD);
+  float vA1=smoothstep(.08,.18,sc.y)*smoothstep(.38,.18,sc.y);
+  float vA2=smoothstep(.08,.18,1.-sc.y)*smoothstep(.38,.18,1.-sc.y);
+  fl+=vA1*.16+vA2*.025;
+  fl*=.45+pow(sc.y,2.)*.55;
+  fl*=u_scale;
+  fl-=an;
+  float rO=rB+cv*tb*.025;
+  float vM1=smoothstep(-.12,.18,sc.y)*smoothstep(.48,.08,sc.y);
+  float cM1=smoothstep(.35,.55,cv)*smoothstep(.95,.35,cv);
+  rO+=vM1*cM1*4.5;
+  rO-=sl;
+  float bO=rB*1.25;
+  float vM2=smoothstep(-.02,.35,sc.y)*smoothstep(.75,.08,sc.y);
+  float cM2=smoothstep(.35,.55,cv)*smoothstep(.75,.35,cv);
+  bO+=vM2*cM2*.9;
+  bO-=lD*.18;
+  rO*=u_refract*u_chroma;
+  bO*=u_refract*u_chroma;
+  float sf=u_blur;
+  float rP=fract(fl+rO);
+  float rC=mG(hi.r,lo.r,rP,sf+.018+u_refract*cv*.025,cv);
+  float gP=fract(fl);
+  float gC=mG(hi.g,lo.g,gP,sf+.008/max(.01,1.-sl),cv);
+  float bP=fract(fl-bO);
+  float bC=mG(hi.b,lo.b,bP,sf+.008,cv);
+  vec3 col=vec3(rC,gC,bC);
+  col=(col-.5)*u_contrast+.5;
+  col=clamp(col,0.,1.);
+  col=mix(col,1.-min(vec3(1.),(1.-col)/max(u_tint,vec3(.001))),length(u_tint-1.)*.5);
+  col=clamp(col,0.,1.);
+  oC=vec4(col*vs,vs);
 }`;
 
-const liquidFragSource = `#version 300 es
-precision mediump float;
-
-in vec2 vUv;
-out vec4 fragColor;
-
-uniform sampler2D u_image_texture;
-uniform float u_time;
-uniform float u_ratio;
-uniform float u_img_ratio;
-uniform float u_patternScale;
-uniform float u_refraction;
-uniform float u_edge;
-uniform float u_patternBlur;
-uniform float u_liquid;
-
-#define TWO_PI 6.28318530718
-#define PI 3.14159265358979323846
-
-vec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; }
-vec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; }
-vec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); }
-float snoise(vec2 v) {
-    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
-    vec2 i = floor(v + dot(v, C.yy));
-    vec2 x0 = v - i + dot(i, C.xx);
-    vec2 i1;
-    i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.);
-    vec4 x12 = x0.xyxy + C.xxzz;
-    x12.xy -= i1;
-    i = mod289(i);
-    vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));
-    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.);
-    m = m*m;
-    m = m*m;
-    vec3 x = 2. * fract(p * C.www) - 1.;
-    vec3 h = abs(x) - 0.5;
-    vec3 ox = floor(x + 0.5);
-    vec3 a0 = x - ox;
-    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
-    vec3 g;
-    g.x = a0.x * x0.x + h.x * x0.y;
-    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-    return 130. * dot(m, g);
+interface MetallicPaintProps {
+  imageSrc: string;
+  seed?: number;
+  scale?: number;
+  refraction?: number;
+  blur?: number;
+  liquid?: number;
+  speed?: number;
+  brightness?: number;
+  contrast?: number;
+  angle?: number;
+  fresnel?: number;
+  lightColor?: string;
+  darkColor?: string;
+  patternSharpness?: number;
+  waveAmplitude?: number;
+  noiseScale?: number;
+  chromaticSpread?: number;
+  mouseAnimation?: boolean;
+  distortion?: number;
+  contour?: number;
+  tintColor?: string;
 }
 
-vec2 get_img_uv() {
-    vec2 img_uv = vUv;
-    img_uv -= .5;
-    if (u_ratio > u_img_ratio) {
-        img_uv.x = img_uv.x * u_ratio / u_img_ratio;
-    } else {
-        img_uv.y = img_uv.y * u_img_ratio / u_ratio;
+function processImage(img: HTMLImageElement): ImageData {
+  const MAX_SIZE = 1000;
+  const MIN_SIZE = 500;
+  let width = img.naturalWidth || img.width;
+  let height = img.naturalHeight || img.height;
+
+  if (width > MAX_SIZE || height > MAX_SIZE || width < MIN_SIZE || height < MIN_SIZE) {
+    const scale =
+      width > height
+        ? width > MAX_SIZE
+          ? MAX_SIZE / width
+          : width < MIN_SIZE
+            ? MIN_SIZE / width
+            : 1
+        : height > MAX_SIZE
+          ? MAX_SIZE / height
+          : height < MIN_SIZE
+            ? MIN_SIZE / height
+            : 1;
+    width = Math.round(width * scale);
+    height = Math.round(height * scale);
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d')!;
+  ctx.drawImage(img, 0, 0, width, height);
+
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const data = imageData.data;
+  const size = width * height;
+  const alphaValues = new Float32Array(size);
+  const shapeMask = new Uint8Array(size);
+  const boundaryMask = new Uint8Array(size);
+
+  for (let i = 0; i < size; i++) {
+    const idx = i * 4;
+    const r = data[idx],
+      g = data[idx + 1],
+      b = data[idx + 2],
+      a = data[idx + 3];
+    const isBackground = (r > 250 && g > 250 && b > 250 && a === 255) || a < 5;
+    alphaValues[i] = isBackground ? 0 : a / 255;
+    shapeMask[i] = alphaValues[i] > 0.1 ? 1 : 0;
+  }
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const idx = y * width + x;
+      if (!shapeMask[idx]) continue;
+      if (
+        x === 0 ||
+        x === width - 1 ||
+        y === 0 ||
+        y === height - 1 ||
+        !shapeMask[idx - 1] ||
+        !shapeMask[idx + 1] ||
+        !shapeMask[idx - width] ||
+        !shapeMask[idx + width]
+      ) {
+        boundaryMask[idx] = 1;
+      }
     }
-    float scale_factor = 1.;
-    img_uv *= scale_factor;
-    img_uv += .5;
-    img_uv.y = 1. - img_uv.y;
-    return img_uv;
-}
-vec2 rotate(vec2 uv, float th) {
-    return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
-}
-float get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float b) {
-    float ch = c2;
-    float border = 0.;
-    float blur = u_patternBlur + extra_blur;
-    ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));
-    border = w[0];
-    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
-    b = smoothstep(.2, .8, b);
-    border = w[0] + .4 * (1. - b) * w[1];
-    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
-    border = w[0] + .5 * (1. - b) * w[1];
-    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
-    border = w[0] + w[1];
-    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
-    float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
-    float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
-    ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));
-    return ch;
-}
-float get_img_frame_alpha(vec2 uv, float img_frame_width) {
-    float img_frame_alpha = smoothstep(0., img_frame_width, uv.x) * smoothstep(1., 1. - img_frame_width, uv.x);
-    img_frame_alpha *= smoothstep(0., img_frame_width, uv.y) * smoothstep(1., 1. - img_frame_width, uv.y);
-    return img_frame_alpha;
-}
-void main() {
-    vec2 uv = vUv;
-    uv.y = 1. - uv.y;
-    uv.x *= u_ratio;
-    float diagonal = uv.x - uv.y;
-    float t = .001 * u_time;
-    vec2 img_uv = get_img_uv();
-    vec4 img = texture(u_image_texture, img_uv);
-    vec3 color = vec3(0.);
-    float opacity = 1.;
-    vec3 color1 = vec3(.98, 0.98, 1.);
-    vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, uv.x + uv.y));
-    float edge = img.r;
-    vec2 grad_uv = uv;
-    grad_uv -= .5;
-    float dist = length(grad_uv + vec2(0., .2 * diagonal));
-    grad_uv = rotate(grad_uv, (.25 - .2 * diagonal) * PI);
-    float bulge = pow(1.8 * dist, 1.2);
-    bulge = 1. - bulge;
-    bulge *= pow(uv.y, .3);
-    float cycle_width = u_patternScale;
-    float thin_strip_1_ratio = .12 / cycle_width * (1. - .4 * bulge);
-    float thin_strip_2_ratio = .07 / cycle_width * (1. + .4 * bulge);
-    float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);
-    float thin_strip_1_width = cycle_width * thin_strip_1_ratio;
-    float thin_strip_2_width = cycle_width * thin_strip_2_ratio;
-    opacity = 1. - smoothstep(.9 - .5 * u_edge, 1. - .5 * u_edge, edge);
-    opacity *= get_img_frame_alpha(img_uv, 0.01);
-    float noise = snoise(uv - t);
-    edge += (1. - edge) * u_liquid * noise;
-    float refr = 0.;
-    refr += (1. - bulge);
-    refr = clamp(refr, 0., 1.);
-    float dir = grad_uv.x;
-    dir += diagonal;
-    dir -= 2. * noise * diagonal * (smoothstep(0., 1., edge) * smoothstep(1., 0., edge));
-    bulge *= clamp(pow(uv.y, .1), .3, 1.);
-    dir *= (.1 + (1.1 - edge) * bulge);
-    dir *= smoothstep(1., .7, edge);
-    dir += .18 * (smoothstep(.1, .2, uv.y) * smoothstep(.4, .2, uv.y));
-    dir += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));
-    dir *= (.5 + .5 * pow(uv.y, 2.));
-    dir *= cycle_width;
-    dir -= t;
-    float refr_r = refr;
-    refr_r += .03 * bulge * noise;
-    float refr_b = 1.3 * refr;
-    refr_r += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(1., .4, bulge));
-    refr_r -= diagonal;
-    refr_b += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(.8, .4, bulge));
-    refr_b -= .2 * edge;
-    refr_r *= u_refraction;
-    refr_b *= u_refraction;
-    vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
-    w[1] -= .02 * smoothstep(.0, 1., edge + bulge);
-    float stripe_r = mod(dir + refr_r, 1.);
-    float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_refraction * bulge, bulge);
-    float stripe_g = mod(dir, 1.);
-    float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - diagonal), bulge);
-    float stripe_b = mod(dir - refr_b, 1.);
-    float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, bulge);
-    color = vec3(r, g, b);
-    color *= opacity;
-    fragColor = vec4(color, opacity);
-}
-`;
-
-function updateUniforms() {
-  if (!gl.value || !uniforms.value) return;
-  gl.value.uniform1f(uniforms.value.u_edge, props.params.edge);
-  gl.value.uniform1f(uniforms.value.u_patternBlur, props.params.patternBlur);
-  gl.value.uniform1f(uniforms.value.u_time, 0);
-  gl.value.uniform1f(uniforms.value.u_patternScale, props.params.patternScale);
-  gl.value.uniform1f(uniforms.value.u_refraction, props.params.refraction);
-  gl.value.uniform1f(uniforms.value.u_liquid, props.params.liquid);
-}
-
-function createShader(gl: WebGL2RenderingContext, sourceCode: string, type: number) {
-  const shader = gl.createShader(type);
-  if (!shader) {
-    return null;
   }
 
-  gl.shaderSource(shader, sourceCode);
-  gl.compileShader(shader);
+  const u = new Float32Array(size);
+  const ITERATIONS = 200;
+  const C = 0.01;
+  const omega = 1.85;
 
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
-    gl.deleteShader(shader);
-    return null;
+  for (let iter = 0; iter < ITERATIONS; iter++) {
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const idx = y * width + x;
+        if (!shapeMask[idx] || boundaryMask[idx]) continue;
+        const sum =
+          (shapeMask[idx + 1] ? u[idx + 1] : 0) +
+          (shapeMask[idx - 1] ? u[idx - 1] : 0) +
+          (shapeMask[idx + width] ? u[idx + width] : 0) +
+          (shapeMask[idx - width] ? u[idx - width] : 0);
+        const newVal = (C + sum) / 4;
+        u[idx] = omega * newVal + (1 - omega) * u[idx];
+      }
+    }
   }
 
-  return shader;
+  let maxVal = 0;
+  for (let i = 0; i < size; i++) if (u[i] > maxVal) maxVal = u[i];
+  if (maxVal === 0) maxVal = 1;
+
+  const outData = ctx.createImageData(width, height);
+  for (let i = 0; i < size; i++) {
+    const px = i * 4;
+    const depth = u[i] / maxVal;
+    const gray = Math.round(255 * (1 - depth * depth));
+    outData.data[px] = outData.data[px + 1] = outData.data[px + 2] = gray;
+    outData.data[px + 3] = Math.round(alphaValues[i] * 255);
+  }
+
+  return outData;
 }
 
-function getUniforms(program: WebGLProgram, gl: WebGL2RenderingContext) {
-  const uniformsObj: Record<string, WebGLUniformLocation> = {};
-  const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
-  for (let i = 0; i < uniformCount; i++) {
-    const uniformName = gl.getActiveUniform(program, i)?.name;
-    if (!uniformName) continue;
-    uniformsObj[uniformName] = gl.getUniformLocation(program, uniformName) as WebGLUniformLocation;
-  }
-  return uniformsObj;
+function hexToRgb(hex: string): [number, number, number] {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255]
+    : [1, 1, 1];
 }
 
-function initShader() {
-  const canvas = canvasRef.value;
-  const glContext = canvas?.getContext('webgl2', {
-    antialias: true,
-    alpha: true
-  });
-  if (!canvas || !glContext) {
-    return;
-  }
-
-  const vertexShader = createShader(glContext, vertexShaderSource, glContext.VERTEX_SHADER);
-  const fragmentShader = createShader(glContext, liquidFragSource, glContext.FRAGMENT_SHADER);
-  const program = glContext.createProgram();
-  if (!program || !vertexShader || !fragmentShader) {
-    return;
-  }
-
-  glContext.attachShader(program, vertexShader);
-  glContext.attachShader(program, fragmentShader);
-  glContext.linkProgram(program);
-
-  if (!glContext.getProgramParameter(program, glContext.LINK_STATUS)) {
-    console.error('Unable to initialize the shader program: ' + glContext.getProgramInfoLog(program));
-    return null;
-  }
-
-  const uniformsObj = getUniforms(program, glContext);
-  uniforms.value = uniformsObj;
-
-  const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
-  const vertexBuffer = glContext.createBuffer();
-  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer);
-  glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW);
-
-  glContext.useProgram(program);
-
-  const positionLocation = glContext.getAttribLocation(program, 'a_position');
-  glContext.enableVertexAttribArray(positionLocation);
-
-  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer);
-  glContext.vertexAttribPointer(positionLocation, 2, glContext.FLOAT, false, 0, 0);
-
-  gl.value = glContext;
-}
-
-function resizeCanvas() {
-  if (!canvasRef.value || !gl.value || !uniforms.value || !props.imageData) return;
-  const imgRatio = props.imageData.width / props.imageData.height;
-  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio);
-
-  const side = 1000;
-  canvasRef.value.width = side * devicePixelRatio;
-  canvasRef.value.height = side * devicePixelRatio;
-  gl.value.viewport(0, 0, canvasRef.value.height, canvasRef.value.height);
-  gl.value.uniform1f(uniforms.value.u_ratio, 1);
-  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio);
-}
-
-function setupTexture() {
-  if (!gl.value || !uniforms.value) return;
-
-  const existingTexture = gl.value.getParameter(gl.value.TEXTURE_BINDING_2D);
-  if (existingTexture) {
-    gl.value.deleteTexture(existingTexture);
-  }
-
-  const imageTexture = gl.value.createTexture();
-  gl.value.activeTexture(gl.value.TEXTURE0);
-  gl.value.bindTexture(gl.value.TEXTURE_2D, imageTexture);
-
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MIN_FILTER, gl.value.LINEAR);
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MAG_FILTER, gl.value.LINEAR);
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_S, gl.value.CLAMP_TO_EDGE);
-  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_T, gl.value.CLAMP_TO_EDGE);
-
-  gl.value.pixelStorei(gl.value.UNPACK_ALIGNMENT, 1);
-
-  try {
-    gl.value.texImage2D(
-      gl.value.TEXTURE_2D,
-      0,
-      gl.value.RGBA,
-      props.imageData?.width,
-      props.imageData?.height,
-      0,
-      gl.value.RGBA,
-      gl.value.UNSIGNED_BYTE,
-      props.imageData?.data
-    );
-
-    gl.value.uniform1i(uniforms.value.u_image_texture, 0);
-  } catch (e) {
-    console.error('Error uploading texture:', e);
-  }
-}
-
-function render(currentTime: number) {
-  if (!gl.value || !uniforms.value) return;
-
-  const deltaTime = currentTime - lastRenderTime.value;
-  lastRenderTime.value = currentTime;
-
-  totalAnimationTime.value += deltaTime * props.params.speed;
-  gl.value.uniform1f(uniforms.value.u_time, totalAnimationTime.value);
-  gl.value.drawArrays(gl.value.TRIANGLE_STRIP, 0, 4);
-  animationId.value = requestAnimationFrame(render);
-}
-
-function startAnimation() {
-  if (animationId.value) {
-    cancelAnimationFrame(animationId.value);
-  }
-  lastRenderTime.value = performance.now();
-  animationId.value = requestAnimationFrame(render);
-}
-
-onMounted(async () => {
-  await nextTick();
-  initShader();
-  updateUniforms();
-  resizeCanvas();
-  setupTexture();
-  startAnimation();
-
-  window.addEventListener('resize', resizeCanvas);
+const props = withDefaults(defineProps<MetallicPaintProps>(), {
+  seed: 42,
+  scale: 4,
+  refraction: 0.01,
+  blur: 0.015,
+  liquid: 0.75,
+  speed: 0.3,
+  brightness: 2,
+  contrast: 0.5,
+  angle: 0,
+  fresnel: 1,
+  lightColor: '#ffffff',
+  darkColor: '#000000',
+  patternSharpness: 1,
+  waveAmplitude: 1,
+  noiseScale: 0.5,
+  chromaticSpread: 2,
+  mouseAnimation: false,
+  distortion: 1,
+  contour: 0.2,
+  tintColor: '#feb3ff'
 });
 
-onUnmounted(() => {
-  if (animationId.value) {
-    cancelAnimationFrame(animationId.value);
-  }
-  window.removeEventListener('resize', resizeCanvas);
-});
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const glRef = ref<WebGL2RenderingContext | null>(null);
+const programRef = ref<WebGLProgram | null>(null);
+const uniformsRef = ref<Record<string, WebGLUniformLocation | null>>({});
+const textureRef = ref<WebGLTexture | null>(null);
+const animTimeRef = ref(0);
+const lastTimeRef = ref(0);
+const rafRef = ref<number | null>(null);
+const imgDataRef = ref<ImageData | null>(null);
+const speedRef = ref(props.speed);
+const mouseRef = ref({ x: 0.5, y: 0.5, targetX: 0.5, targetY: 0.5 });
+const mouseAnimRef = ref(props.mouseAnimation);
+
+const ready = ref<boolean>(false);
+const textureReady = ref<boolean>(false);
 
 watch(
-  () => props.params,
-  () => {
-    updateUniforms();
-  },
-  { deep: true }
+  () => props.speed,
+  speed => (speedRef.value = speed)
 );
 
 watch(
-  () => props.imageData,
+  () => props.mouseAnimation,
+  mouseAnimation => (mouseAnimRef.value = mouseAnimation)
+);
+
+const initGL = (): boolean => {
+  const canvas = canvasRef.value;
+  if (!canvas) return false;
+
+  const gl = canvas.getContext('webgl2', { antialias: true, alpha: true });
+  if (!gl) return false;
+
+  const compile = (src: string, type: number): WebGLShader | null => {
+    const s = gl.createShader(type);
+    if (!s) return null;
+    gl.shaderSource(s, src);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+      console.error(gl.getShaderInfoLog(s));
+      return null;
+    }
+    return s;
+  };
+
+  const vs = compile(vertexShader, gl.VERTEX_SHADER);
+  const fs = compile(fragmentShader, gl.FRAGMENT_SHADER);
+  if (!vs || !fs) return false;
+
+  const prog = gl.createProgram();
+  if (!prog) return false;
+  gl.attachShader(prog, vs);
+  gl.attachShader(prog, fs);
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    console.error(gl.getProgramInfoLog(prog));
+    return false;
+  }
+
+  const uniforms: Record<string, WebGLUniformLocation | null> = {};
+  const count = gl.getProgramParameter(prog, gl.ACTIVE_UNIFORMS);
+  for (let i = 0; i < count; i++) {
+    const info = gl.getActiveUniform(prog, i);
+    if (info) {
+      uniforms[info.name] = gl.getUniformLocation(prog, info.name);
+    }
+  }
+
+  const verts = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+  const buf = gl.createBuffer();
+  if (!buf) return false;
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
+
+  gl.useProgram(prog);
+  const pos = gl.getAttribLocation(prog, 'a_position');
+  gl.enableVertexAttribArray(pos);
+  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+
+  glRef.value = gl;
+  programRef.value = prog;
+  uniformsRef.value = uniforms;
+
+  return true;
+};
+
+watch(initGL, () => {
+  if (!initGL()) return;
+
+  const canvas = canvasRef.value;
+  const gl = glRef.value;
+  if (!canvas || !gl) return;
+
+  const side = 1000 * devicePixelRatio;
+  canvas.width = side;
+  canvas.height = side;
+  gl.viewport(0, 0, side, side);
+
+  ready.value = true;
+
+  return () => {
+    if (rafRef.value) cancelAnimationFrame(rafRef.value);
+    if (textureRef.value && glRef.value) {
+      glRef.value.deleteTexture(textureRef.value);
+    }
+  };
+});
+
+const uploadTexture = (imgData: ImageData): void => {
+  const gl = glRef.value;
+  const uniforms = uniformsRef.value;
+  if (!gl || !imgData) return;
+
+  if (textureRef.value) gl.deleteTexture(textureRef.value);
+
+  const tex = gl.createTexture();
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, imgData.width, imgData.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, imgData.data);
+  gl.uniform1i(uniforms.u_tex, 0);
+
+  const ratio = imgData.width / imgData.height;
+  gl.uniform1f(uniforms.u_imgRatio, ratio);
+  gl.uniform1f(uniforms.u_ratio, 1);
+
+  textureRef.value = tex;
+  imgDataRef.value = imgData;
+};
+
+watch(
+  () => [ready.value, props.imageSrc, uploadTexture],
   () => {
-    setupTexture();
-    resizeCanvas();
-  },
-  { deep: true }
+    if (!ready.value || !props.imageSrc) return;
+
+    textureReady.value = false;
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const imgData = processImage(img);
+      uploadTexture(imgData);
+      textureReady.value = true;
+    };
+    img.src = props.imageSrc;
+  }
+);
+
+watch(
+  () => [
+    ready.value,
+    props.seed,
+    props.scale,
+    props.refraction,
+    props.blur,
+    props.liquid,
+    props.brightness,
+    props.contrast,
+    props.angle,
+    props.fresnel,
+    props.lightColor,
+    props.darkColor,
+    props.patternSharpness,
+    props.waveAmplitude,
+    props.noiseScale,
+    props.chromaticSpread,
+    props.distortion,
+    props.contour,
+    props.tintColor
+  ],
+  () => {
+    const gl = glRef.value;
+    const u = uniformsRef.value;
+    if (!gl || !ready.value) return;
+
+    gl.uniform1f(u.u_seed, props.seed);
+    gl.uniform1f(u.u_scale, props.scale);
+    gl.uniform1f(u.u_refract, props.refraction);
+    gl.uniform1f(u.u_blur, props.blur);
+    gl.uniform1f(u.u_liquid, props.liquid);
+    gl.uniform1f(u.u_bright, props.brightness);
+    gl.uniform1f(u.u_contrast, props.contrast);
+    gl.uniform1f(u.u_angle, props.angle);
+    gl.uniform1f(u.u_fresnel, props.fresnel);
+
+    const light = hexToRgb(props.lightColor);
+    const dark = hexToRgb(props.darkColor);
+    const tint = hexToRgb(props.tintColor);
+    gl.uniform3f(u.u_lightColor, light[0], light[1], light[2]);
+    gl.uniform3f(u.u_darkColor, dark[0], dark[1], dark[2]);
+    gl.uniform1f(u.u_sharp, props.patternSharpness);
+    gl.uniform1f(u.u_wave, props.waveAmplitude);
+    gl.uniform1f(u.u_noise, props.noiseScale);
+    gl.uniform1f(u.u_chroma, props.chromaticSpread);
+    gl.uniform1f(u.u_distort, props.distortion);
+    gl.uniform1f(u.u_contour, props.contour);
+    gl.uniform3f(u.u_tint, tint[0], tint[1], tint[2]);
+  }
+);
+
+let cleanup: (() => void) | null = null;
+const setup = () => {
+  if (!ready.value || !textureReady.value) return;
+
+  const gl = glRef.value;
+  const u = uniformsRef.value;
+  const canvas = canvasRef.value;
+  const mouse = mouseRef.value;
+  if (!gl || !canvas) return;
+
+  const handleMouseMove = (e: MouseEvent) => {
+    const rect = canvas.getBoundingClientRect();
+    mouse.targetX = (e.clientX - rect.left) / rect.width;
+    mouse.targetY = (e.clientY - rect.top) / rect.height;
+  };
+
+  canvas.addEventListener('mousemove', handleMouseMove);
+
+  const render = (time: number) => {
+    const delta = time - lastTimeRef.value;
+    lastTimeRef.value = time;
+
+    if (mouseAnimRef.value) {
+      mouse.x += (mouse.targetX - mouse.x) * 0.08;
+      mouse.y += (mouse.targetY - mouse.y) * 0.08;
+      animTimeRef.value = mouse.x * 3000 + mouse.y * 1500;
+    } else {
+      animTimeRef.value += delta * speedRef.value;
+    }
+
+    gl.uniform1f(u.u_time, animTimeRef.value);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    rafRef.value = requestAnimationFrame(render);
+  };
+
+  lastTimeRef.value = performance.now();
+  rafRef.value = requestAnimationFrame(render);
+
+  cleanup = () => {
+    if (rafRef.value) cancelAnimationFrame(rafRef.value);
+    canvas.removeEventListener('mousemove', handleMouseMove);
+  };
+};
+
+onMounted(() => {
+  setup();
+});
+
+onBeforeUnmount(() => {
+  cleanup?.();
+});
+
+watch(
+  () => [ready.value, textureReady.value],
+  () => {
+    cleanup?.();
+    setup();
+  }
 );
 </script>
+
+<template>
+  <canvas ref="canvasRef" className="block h-full w-full object-contain" />
+</template>
diff --git a/src/content/Animations/MetallicPaint/parseImage.ts b/src/content/Animations/MetallicPaint/parseImage.ts
deleted file mode 100644
index 7ecf330..0000000
--- a/src/content/Animations/MetallicPaint/parseImage.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-export function parseImage(file: File): Promise<{ imageData: ImageData; pngBlob: Blob }> {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-
-  return new Promise((resolve, reject) => {
-    if (!file || !ctx) {
-      reject(new Error('Invalid file or context'));
-      return;
-    }
-
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = function () {
-      if (file.type === 'image/svg+xml') {
-        img.width = 1000;
-        img.height = 1000;
-      }
-
-      const MAX_SIZE = 1000;
-      const MIN_SIZE = 500;
-      let width = img.naturalWidth;
-      let height = img.naturalHeight;
-
-      if (width > MAX_SIZE || height > MAX_SIZE || width < MIN_SIZE || height < MIN_SIZE) {
-        if (width > height) {
-          if (width > MAX_SIZE) {
-            height = Math.round((height * MAX_SIZE) / width);
-            width = MAX_SIZE;
-          } else if (width < MIN_SIZE) {
-            height = Math.round((height * MIN_SIZE) / width);
-            width = MIN_SIZE;
-          }
-        } else {
-          if (height > MAX_SIZE) {
-            width = Math.round((width * MAX_SIZE) / height);
-            height = MAX_SIZE;
-          } else if (height < MIN_SIZE) {
-            width = Math.round((width * MIN_SIZE) / height);
-            height = MIN_SIZE;
-          }
-        }
-      }
-
-      canvas.width = width;
-      canvas.height = height;
-
-      const shapeCanvas = document.createElement('canvas');
-      shapeCanvas.width = width;
-      shapeCanvas.height = height;
-      const shapeCtx = shapeCanvas.getContext('2d')!;
-      shapeCtx.drawImage(img, 0, 0, width, height);
-
-      const shapeImageData = shapeCtx.getImageData(0, 0, width, height);
-      const data = shapeImageData.data;
-      const shapeMask = new Array(width * height).fill(false);
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const idx4 = (y * width + x) * 4;
-          const r = data[idx4];
-          const g = data[idx4 + 1];
-          const b = data[idx4 + 2];
-          const a = data[idx4 + 3];
-          shapeMask[y * width + x] = !((r === 255 && g === 255 && b === 255 && a === 255) || a === 0);
-        }
-      }
-
-      function inside(x: number, y: number) {
-        if (x < 0 || x >= width || y < 0 || y >= height) return false;
-        return shapeMask[y * width + x];
-      }
-
-      const boundaryMask = new Array(width * height).fill(false);
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const idx = y * width + x;
-          if (!shapeMask[idx]) continue;
-          let isBoundary = false;
-          for (let ny = y - 1; ny <= y + 1 && !isBoundary; ny++) {
-            for (let nx = x - 1; nx <= x + 1 && !isBoundary; nx++) {
-              if (!inside(nx, ny)) {
-                isBoundary = true;
-              }
-            }
-          }
-          if (isBoundary) {
-            boundaryMask[idx] = true;
-          }
-        }
-      }
-
-      const interiorMask = new Array(width * height).fill(false);
-      for (let y = 1; y < height - 1; y++) {
-        for (let x = 1; x < width - 1; x++) {
-          const idx = y * width + x;
-          if (
-            shapeMask[idx] &&
-            shapeMask[idx - 1] &&
-            shapeMask[idx + 1] &&
-            shapeMask[idx - width] &&
-            shapeMask[idx + width]
-          ) {
-            interiorMask[idx] = true;
-          }
-        }
-      }
-
-      const u = new Float32Array(width * height).fill(0);
-      const newU = new Float32Array(width * height).fill(0);
-      const C = 0.01;
-      const ITERATIONS = 300;
-
-      function getU(x: number, y: number, arr: Float32Array) {
-        if (x < 0 || x >= width || y < 0 || y >= height) return 0;
-        if (!shapeMask[y * width + x]) return 0;
-        return arr[y * width + x];
-      }
-
-      for (let iter = 0; iter < ITERATIONS; iter++) {
-        for (let y = 0; y < height; y++) {
-          for (let x = 0; x < width; x++) {
-            const idx = y * width + x;
-            if (!shapeMask[idx] || boundaryMask[idx]) {
-              newU[idx] = 0;
-              continue;
-            }
-            const sumN = getU(x + 1, y, u) + getU(x - 1, y, u) + getU(x, y + 1, u) + getU(x, y - 1, u);
-            newU[idx] = (C + sumN) / 4;
-          }
-        }
-        u.set(newU);
-      }
-
-      let maxVal = 0;
-      for (let i = 0; i < width * height; i++) {
-        if (u[i] > maxVal) maxVal = u[i];
-      }
-      const alpha = 2.0;
-      const outImg = ctx.createImageData(width, height);
-
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const idx = y * width + x;
-          const px = idx * 4;
-          if (!shapeMask[idx]) {
-            outImg.data[px] = 255;
-            outImg.data[px + 1] = 255;
-            outImg.data[px + 2] = 255;
-            outImg.data[px + 3] = 255;
-          } else {
-            const raw = u[idx] / maxVal;
-            const remapped = Math.pow(raw, alpha);
-            const gray = 255 * (1 - remapped);
-            outImg.data[px] = gray;
-            outImg.data[px + 1] = gray;
-            outImg.data[px + 2] = gray;
-            outImg.data[px + 3] = 255;
-          }
-        }
-      }
-      ctx.putImageData(outImg, 0, 0);
-
-      canvas.toBlob(blob => {
-        if (!blob) {
-          reject(new Error('Failed to create PNG blob'));
-          return;
-        }
-        resolve({
-          imageData: outImg,
-          pngBlob: blob
-        });
-      }, 'image/png');
-    };
-
-    img.onerror = () => reject(new Error('Failed to load image'));
-    img.src = URL.createObjectURL(file);
-  });
-}
diff --git a/src/demo/Animations/MetallicPaintDemo.vue b/src/demo/Animations/MetallicPaintDemo.vue
index f838fc0..4451e87 100644
--- a/src/demo/Animations/MetallicPaintDemo.vue
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -1,34 +1,64 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[500px] overflow-hidden">
+      <div class="demo-container h-[400px] overflow-hidden">
         <MetallicPaint
-          v-if="imageData"
           :key="rerenderKey"
-          :image-data="imageData"
-          :params="{
-            edge,
-            patternBlur,
-            patternScale,
-            refraction,
-            speed,
-            liquid
-          }"
+          :image-src="logo"
+          :seed="seed"
+          :scale="scale"
+          :refraction="refraction"
+          :blur="blur"
+          :liquid="liquid"
+          :speed="speed"
+          :brightness="brightness"
+          :contrast="contrast"
+          :angle="angle"
+          :fresnel="fresnel"
+          :light-color="lightColor"
+          :dark-color="darkColor"
+          :pattern-sharpness="patternSharpness"
+          :wave-amplitude="waveAmplitude"
+          :noise-scale="noiseScale"
+          :chromatic-spread="chromaticSpread"
+          :mouse-animation="mouseAnimation"
+          :distortion="distortion"
+          :contour="contour"
+          :tint-color="tintColor"
         />
       </div>
 
       <Customize>
-        <PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" />
+        <div class="flex flex-wrap gap-4">
+          <div class="flex-1 min-w-full md:min-w-[200px] lg:min-w-[180px]">
+            <PreviewColor title="Tint Color" v-model="tintColor" class="mb-2" />
+            <PreviewColor title="Dark Color" v-model="darkColor" class="mb-2" />
+            <PreviewColor title="Light Color" v-model="lightColor" class="mb-2" />
+            <PreviewSlider title="Seed" v-model="seed" :min="0" :max="200" :step="0.01" />
+            <PreviewSlider title="Scale" v-model="scale" :min="0.5" :max="5" :step="0.1" />
+            <PreviewSlider title="Refraction" v-model="refraction" :min="0" :max="0.1" :step="0.001" />
+            <PreviewSlider title="Blur" v-model="blur" :min="0" :max="0.1" :step="0.001" />
+          </div>
 
-        <PreviewSlider title="Pattern Scale" v-model="patternScale" :min="1" :max="5" :step="0.1" />
+          <div class="flex-1 min-w-full md:min-w-[200px] lg:min-w-[180px]">
+            <PreviewSlider title="Speed" v-model="speed" :min="0" :max="1" :step="0.01" />
+            <PreviewSlider title="Brightness" v-model="brightness" :min="0.5" :max="2" :step="0.05" />
+            <PreviewSlider title="Contrast" v-model="contrast" :min="0.5" :max="2" :step="0.05" />
+            <PreviewSlider title="Angle" v-model="angle" :min="-180" :max="180" :step="1" />
+            <PreviewSlider title="Fresnel" v-model="fresnel" :min="0" :max="3" :step="0.1" />
+            <PreviewSlider title="Pattern Sharpness" v-model="patternSharpness" :min="0.1" :max="2" :step="0.1" />
+            <PreviewSlider title="Wave Amplitude" v-model="waveAmplitude" :min="0" :max="3" :step="0.1" />
+          </div>
 
-        <PreviewSlider title="Pattern Blur" v-model="patternBlur" :min="0" :max="0.1" :step="0.001" />
-
-        <PreviewSlider title="Refraction" v-model="refraction" :min="0" :max="0.1" :step="0.01" />
-
-        <PreviewSlider title="Liquid" v-model="liquid" :min="0" :max="1" :step="0.01" />
-
-        <PreviewSlider title="Speed" v-model="speed" :min="0" :max="1" :step="0.01" />
+          <div class="flex-1 min-w-full md:min-w-[200px] lg:min-w-[180px]">
+            <PreviewSlider title="Liquid" v-model="liquid" :min="0" :max="1" :step="0.01" />
+            <PreviewSlider title="Noise Scale" v-model="noiseScale" :min="0" :max="3" :step="0.1" />
+            <PreviewSlider title="Chromatic Spread" v-model="chromaticSpread" :min="0" :max="3" :step="0.1" />
+            <PreviewSlider title="Distortion" v-model="distortion" :min="0" :max="1" :step="0.05" />
+            <PreviewSlider title="Contour" v-model="contour" :min="0" :max="1" :step="0.05" />
+            <PreviewSwitch title="Mouse Animation" v-model="mouseAnimation" />
+          </div>
+        </div>
       </Customize>
 
       <PropTable :data="propData" />
@@ -45,55 +75,169 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
+import logo from '@/assets/logos/vue-bits-logo-small-dark.svg';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import { useForceRerender } from '@/composables/useForceRerender';
+import { metallicPaint } from '@/constants/code/Animations/metallicPaintCode';
+import { ref } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Customize from '../../components/common/Customize.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import MetallicPaint from '../../content/Animations/MetallicPaint/MetallicPaint.vue';
-import { metallicPaint } from '@/constants/code/Animations/metallicPaintCode';
-import { parseImage } from '../../content/Animations/MetallicPaint/parseImage';
-import { useForceRerender } from '@/composables/useForceRerender';
-import logo from '@/assets/logos/vue-bits-logo-small-dark.svg';
 
-const imageData = ref<ImageData | null>(null);
-const edge = ref(0);
-const patternScale = ref(2);
-const refraction = ref(0.015);
-const patternBlur = ref(0.005);
-const liquid = ref(0.07);
-const speed = ref(0.3);
+const seed = ref<number>(42);
+const scale = ref<number>(2);
+const refraction = ref<number>(0.01);
+const blur = ref<number>(0.015);
+const liquid = ref<number>(0.75);
+const speed = ref<number>(0.3);
+const brightness = ref<number>(2);
+const contrast = ref<number>(0.5);
+const angle = ref<number>(0);
+const fresnel = ref<number>(1);
+const patternSharpness = ref<number>(1);
+const waveAmplitude = ref<number>(1);
+const noiseScale = ref<number>(0.5);
+const chromaticSpread = ref<number>(2);
+const distortion = ref<number>(1);
+const contour = ref<number>(0.2);
+const mouseAnimation = ref<boolean>(false);
+const lightColor = ref<string>('#ffffff');
+const darkColor = ref<string>('#000000');
+const tintColor = ref<string>('#27FF64');
 
 const { rerenderKey } = useForceRerender();
 
 const propData = [
   {
-    name: 'imageData',
-    type: 'ImageData',
+    name: 'imageSrc',
+    type: 'string',
     default: 'none (required)',
-    description:
-      'The processed image data generated from the parseImage utility. This image data is used by the shader to create the liquid paper effect.'
+    description: 'URL or path to the image used for the metallic paint effect. The image is processed internally.'
   },
   {
-    name: 'params',
-    type: 'ShaderParams',
-    default: '',
-    description:
-      'An object to configure the shader effect. Properties include: patternScale, refraction, edge, patternBlur, liquid, speed'
+    name: 'seed',
+    type: 'number',
+    default: '42',
+    description: 'Random seed for pattern generation. Different values create different pattern variations.'
+  },
+  {
+    name: 'scale',
+    type: 'number',
+    default: '2',
+    description: 'Scale of the metallic pattern. Higher values create more repetitions.'
+  },
+  {
+    name: 'refraction',
+    type: 'number',
+    default: '0.015',
+    description: 'Amount of chromatic aberration (color separation). Creates the rainbow edge effect.'
+  },
+  {
+    name: 'blur',
+    type: 'number',
+    default: '0.005',
+    description: 'Blur amount for the pattern transitions. Higher values create softer gradients.'
+  },
+  {
+    name: 'liquid',
+    type: 'number',
+    default: '0.07',
+    description: 'Amount of liquid/wavy animation applied to the pattern.'
+  },
+  {
+    name: 'speed',
+    type: 'number',
+    default: '0.3',
+    description: 'Animation speed multiplier. Set to 0 to disable animation.'
+  },
+  {
+    name: 'brightness',
+    type: 'number',
+    default: '1',
+    description: 'Overall brightness of the metallic effect. Values above 1 increase brightness.'
+  },
+  {
+    name: 'contrast',
+    type: 'number',
+    default: '1',
+    description: 'Color contrast of the effect. Higher values create more distinct light/dark areas.'
+  },
+  {
+    name: 'angle',
+    type: 'number',
+    default: '0',
+    description: 'Rotation angle of the pattern in degrees.'
+  },
+  {
+    name: 'fresnel',
+    type: 'number',
+    default: '1',
+    description: 'Fresnel effect intensity. Controls edge highlighting based on viewing angle.'
+  },
+  {
+    name: 'lightColor',
+    type: 'string',
+    default: '#ffffff',
+    description: 'Hex color for the bright/highlight areas of the metallic effect.'
+  },
+  {
+    name: 'darkColor',
+    type: 'string',
+    default: '#111111',
+    description: 'Hex color for the dark/shadow areas of the metallic effect.'
+  },
+  {
+    name: 'patternSharpness',
+    type: 'number',
+    default: '1',
+    description: 'Controls the sharpness of metallic band transitions. Higher = sharper edges.'
+  },
+  {
+    name: 'waveAmplitude',
+    type: 'number',
+    default: '1',
+    description: 'Intensity of the wave distortion effect.'
+  },
+  {
+    name: 'noiseScale',
+    type: 'number',
+    default: '1',
+    description: 'Scale of the noise pattern. Higher = more detailed noise.'
+  },
+  {
+    name: 'chromaticSpread',
+    type: 'number',
+    default: '1',
+    description: 'Multiplier for chromatic aberration spread between RGB channels.'
+  },
+  {
+    name: 'mouseAnimation',
+    type: 'boolean',
+    default: 'false',
+    description: 'When true, mouse position controls wave animation instead of auto-loop.'
+  },
+  {
+    name: 'distortion',
+    type: 'number',
+    default: '0',
+    description: 'Amount of noise-based distortion applied to the pattern flow (0-1).'
+  },
+  {
+    name: 'contour',
+    type: 'number',
+    default: '0',
+    description: 'Intensity of edge contour effect that warps the pattern along shape boundaries (0-1).'
+  },
+  {
+    name: 'tintColor',
+    type: 'string',
+    default: '#ffffff',
+    description: 'Hex color for color burn tint effect. White = no tint.'
   }
 ];
-
-onMounted(async () => {
-  try {
-    const response = await fetch(logo);
-    const blob = await response.blob();
-    const file = new File([blob], 'default.png', { type: blob.type });
-    const { imageData: processedImageData } = await parseImage(file);
-    imageData.value = processedImageData;
-  } catch (err) {
-    console.error('Error loading default image:', err);
-  }
-});
 </script>