Copy disabled (too large)
Download .txt
Showing preview only (17,622K chars total). Download the full file to get everything.
Repository: DavidHDev/react-bits
Branch: main
Commit: 273184207197
Files: 1808
Total size: 25.8 MB
Directory structure:
gitextract_zr0nlso3/
├── .assetsignore
├── .context/
│ └── new-component.md
├── .eslintrc.cjs
├── .github/
│ ├── FUNDING.yml
│ └── ISSUE_TEMPLATE/
│ ├── 1-bug-report.yml
│ └── 2-feature-request.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── index.html
├── jsrepo.config.ts
├── package.json
├── public/
│ ├── README.md
│ ├── assets/
│ │ ├── 3d/
│ │ │ ├── bar.glb
│ │ │ ├── cube.glb
│ │ │ └── lens.glb
│ │ └── video/
│ │ ├── animatedcontent.webm
│ │ ├── animatedlist.webm
│ │ ├── antigravity.webm
│ │ ├── asciitext.webm
│ │ ├── aurora.webm
│ │ ├── balatro.webm
│ │ ├── ballpit.webm
│ │ ├── beams.webm
│ │ ├── blobcursor.webm
│ │ ├── blurtext.webm
│ │ ├── borderglow.webm
│ │ ├── bouncecards.webm
│ │ ├── bubblemenu.webm
│ │ ├── cardnav.webm
│ │ ├── cardswap.webm
│ │ ├── carousel.webm
│ │ ├── chromagrid.webm
│ │ ├── circulargallery.webm
│ │ ├── circulartext.webm
│ │ ├── clickspark.webm
│ │ ├── colorbends.webm
│ │ ├── counter.webm
│ │ ├── countup.webm
│ │ ├── crosshair.webm
│ │ ├── cubes.webm
│ │ ├── curvedloop.webm
│ │ ├── darkveil.webm
│ │ ├── decaycard.webm
│ │ ├── decryptedtext.webm
│ │ ├── dither.webm
│ │ ├── dock.webm
│ │ ├── domegallery.webm
│ │ ├── dotgrid.webm
│ │ ├── elasticslider.webm
│ │ ├── electricborder.webm
│ │ ├── evileye.webm
│ │ ├── fadecontent.webm
│ │ ├── fallingtext.webm
│ │ ├── faultyterminal.webm
│ │ ├── floatinglines.webm
│ │ ├── flowingmenu.webm
│ │ ├── fluidglass.webm
│ │ ├── flyingposters.webm
│ │ ├── folder.webm
│ │ ├── fuzzytext.webm
│ │ ├── galaxy.webm
│ │ ├── ghostcursor.webm
│ │ ├── glarehover.webm
│ │ ├── glassicons.webm
│ │ ├── glasssurface.webm
│ │ ├── glitchtext.webm
│ │ ├── gooeynav.webm
│ │ ├── gradientblinds.webm
│ │ ├── gradienttext.webm
│ │ ├── gradualblur.webm
│ │ ├── grainient.webm
│ │ ├── griddistortion.webm
│ │ ├── gridmotion.webm
│ │ ├── gridscan.webm
│ │ ├── hyperspeed.webm
│ │ ├── imagetrail.webm
│ │ ├── infinitemenu.webm
│ │ ├── infinitescroll.webm
│ │ ├── iridescence.webm
│ │ ├── lanyard.webm
│ │ ├── laserflow.webm
│ │ ├── letterglitch.webm
│ │ ├── lightning.webm
│ │ ├── lightpillar.webm
│ │ ├── lightrays.webm
│ │ ├── linewaves.webm
│ │ ├── liquidchrome.webm
│ │ ├── liquidether.webm
│ │ ├── logoloop.webm
│ │ ├── magicbento.webm
│ │ ├── magicrings.webm
│ │ ├── magnet.webm
│ │ ├── magnetlines.webm
│ │ ├── masonry.webm
│ │ ├── metaballs.webm
│ │ ├── metallicpaint.webm
│ │ ├── modelviewer.webm
│ │ ├── noise.webm
│ │ ├── orb.webm
│ │ ├── orbitimages.webm
│ │ ├── particles.webm
│ │ ├── pillnav.webm
│ │ ├── pixelblast.webm
│ │ ├── pixelcard.webm
│ │ ├── pixelsnow.webm
│ │ ├── pixeltrail.webm
│ │ ├── pixeltransition.webm
│ │ ├── plasma.webm
│ │ ├── prism.webm
│ │ ├── prismaticburst.webm
│ │ ├── profilecard.webm
│ │ ├── radar.webm
│ │ ├── reflectivecard.webm
│ │ ├── ribbons.webm
│ │ ├── ripplegrid.webm
│ │ ├── rotatingtext.webm
│ │ ├── scrambledtext.webm
│ │ ├── scrollfloat.webm
│ │ ├── scrollreveal.webm
│ │ ├── scrollstack.webm
│ │ ├── scrollvelocity.webm
│ │ ├── shapeblur.webm
│ │ ├── shinytext.webm
│ │ ├── shuffle.webm
│ │ ├── silk.webm
│ │ ├── softaurora.webm
│ │ ├── splashcursor.webm
│ │ ├── splittext.webm
│ │ ├── spotlightcard.webm
│ │ ├── squares.webm
│ │ ├── stack.webm
│ │ ├── staggeredmenu.webm
│ │ ├── starborder.webm
│ │ ├── stepper.webm
│ │ ├── stickerpeel.webm
│ │ ├── targetcursor.webm
│ │ ├── textcursor.webm
│ │ ├── textpressure.webm
│ │ ├── textrotate.webm
│ │ ├── texttype.webm
│ │ ├── threads.webm
│ │ ├── tiltedcard.webm
│ │ ├── truefocus.webm
│ │ ├── variableproximity.webm
│ │ └── waves.webm
│ ├── llms.txt
│ ├── r/
│ │ ├── ASCIIText-JS-CSS.json
│ │ ├── ASCIIText-JS-TW.json
│ │ ├── ASCIIText-TS-CSS.json
│ │ ├── ASCIIText-TS-TW.json
│ │ ├── AnimatedContent-JS-CSS.json
│ │ ├── AnimatedContent-JS-TW.json
│ │ ├── AnimatedContent-TS-CSS.json
│ │ ├── AnimatedContent-TS-TW.json
│ │ ├── AnimatedList-JS-CSS.json
│ │ ├── AnimatedList-JS-TW.json
│ │ ├── AnimatedList-TS-CSS.json
│ │ ├── AnimatedList-TS-TW.json
│ │ ├── Antigravity-JS-CSS.json
│ │ ├── Antigravity-JS-TW.json
│ │ ├── Antigravity-TS-CSS.json
│ │ ├── Antigravity-TS-TW.json
│ │ ├── Aurora-JS-CSS.json
│ │ ├── Aurora-JS-TW.json
│ │ ├── Aurora-TS-CSS.json
│ │ ├── Aurora-TS-TW.json
│ │ ├── Balatro-JS-CSS.json
│ │ ├── Balatro-JS-TW.json
│ │ ├── Balatro-TS-CSS.json
│ │ ├── Balatro-TS-TW.json
│ │ ├── Ballpit-JS-CSS.json
│ │ ├── Ballpit-JS-TW.json
│ │ ├── Ballpit-TS-CSS.json
│ │ ├── Ballpit-TS-TW.json
│ │ ├── Beams-JS-CSS.json
│ │ ├── Beams-JS-TW.json
│ │ ├── Beams-TS-CSS.json
│ │ ├── Beams-TS-TW.json
│ │ ├── BlobCursor-JS-CSS.json
│ │ ├── BlobCursor-JS-TW.json
│ │ ├── BlobCursor-TS-CSS.json
│ │ ├── BlobCursor-TS-TW.json
│ │ ├── BlurText-JS-CSS.json
│ │ ├── BlurText-JS-TW.json
│ │ ├── BlurText-TS-CSS.json
│ │ ├── BlurText-TS-TW.json
│ │ ├── BorderGlow-JS-CSS.json
│ │ ├── BorderGlow-JS-TW.json
│ │ ├── BorderGlow-TS-CSS.json
│ │ ├── BorderGlow-TS-TW.json
│ │ ├── BounceCards-JS-CSS.json
│ │ ├── BounceCards-JS-TW.json
│ │ ├── BounceCards-TS-CSS.json
│ │ ├── BounceCards-TS-TW.json
│ │ ├── BubbleMenu-JS-CSS.json
│ │ ├── BubbleMenu-JS-TW.json
│ │ ├── BubbleMenu-TS-CSS.json
│ │ ├── BubbleMenu-TS-TW.json
│ │ ├── CardNav-JS-CSS.json
│ │ ├── CardNav-JS-TW.json
│ │ ├── CardNav-TS-CSS.json
│ │ ├── CardNav-TS-TW.json
│ │ ├── CardSwap-JS-CSS.json
│ │ ├── CardSwap-JS-TW.json
│ │ ├── CardSwap-TS-CSS.json
│ │ ├── CardSwap-TS-TW.json
│ │ ├── Carousel-JS-CSS.json
│ │ ├── Carousel-JS-TW.json
│ │ ├── Carousel-TS-CSS.json
│ │ ├── Carousel-TS-TW.json
│ │ ├── ChromaGrid-JS-CSS.json
│ │ ├── ChromaGrid-JS-TW.json
│ │ ├── ChromaGrid-TS-CSS.json
│ │ ├── ChromaGrid-TS-TW.json
│ │ ├── CircularGallery-JS-CSS.json
│ │ ├── CircularGallery-JS-TW.json
│ │ ├── CircularGallery-TS-CSS.json
│ │ ├── CircularGallery-TS-TW.json
│ │ ├── CircularText-JS-CSS.json
│ │ ├── CircularText-JS-TW.json
│ │ ├── CircularText-TS-CSS.json
│ │ ├── CircularText-TS-TW.json
│ │ ├── ClickSpark-JS-CSS.json
│ │ ├── ClickSpark-JS-TW.json
│ │ ├── ClickSpark-TS-CSS.json
│ │ ├── ClickSpark-TS-TW.json
│ │ ├── ColorBends-JS-CSS.json
│ │ ├── ColorBends-JS-TW.json
│ │ ├── ColorBends-TS-CSS.json
│ │ ├── ColorBends-TS-TW.json
│ │ ├── CountUp-JS-CSS.json
│ │ ├── CountUp-JS-TW.json
│ │ ├── CountUp-TS-CSS.json
│ │ ├── CountUp-TS-TW.json
│ │ ├── Counter-JS-CSS.json
│ │ ├── Counter-JS-TW.json
│ │ ├── Counter-TS-CSS.json
│ │ ├── Counter-TS-TW.json
│ │ ├── Crosshair-JS-CSS.json
│ │ ├── Crosshair-JS-TW.json
│ │ ├── Crosshair-TS-CSS.json
│ │ ├── Crosshair-TS-TW.json
│ │ ├── Cubes-JS-CSS.json
│ │ ├── Cubes-JS-TW.json
│ │ ├── Cubes-TS-CSS.json
│ │ ├── Cubes-TS-TW.json
│ │ ├── CurvedLoop-JS-CSS.json
│ │ ├── CurvedLoop-JS-TW.json
│ │ ├── CurvedLoop-TS-CSS.json
│ │ ├── CurvedLoop-TS-TW.json
│ │ ├── DarkVeil-JS-CSS.json
│ │ ├── DarkVeil-JS-TW.json
│ │ ├── DarkVeil-TS-CSS.json
│ │ ├── DarkVeil-TS-TW.json
│ │ ├── DecayCard-JS-CSS.json
│ │ ├── DecayCard-JS-TW.json
│ │ ├── DecayCard-TS-CSS.json
│ │ ├── DecayCard-TS-TW.json
│ │ ├── DecryptedText-JS-CSS.json
│ │ ├── DecryptedText-JS-TW.json
│ │ ├── DecryptedText-TS-CSS.json
│ │ ├── DecryptedText-TS-TW.json
│ │ ├── Dither-JS-CSS.json
│ │ ├── Dither-JS-TW.json
│ │ ├── Dither-TS-CSS.json
│ │ ├── Dither-TS-TW.json
│ │ ├── Dock-JS-CSS.json
│ │ ├── Dock-JS-TW.json
│ │ ├── Dock-TS-CSS.json
│ │ ├── Dock-TS-TW.json
│ │ ├── DomeGallery-JS-CSS.json
│ │ ├── DomeGallery-JS-TW.json
│ │ ├── DomeGallery-TS-CSS.json
│ │ ├── DomeGallery-TS-TW.json
│ │ ├── DotGrid-JS-CSS.json
│ │ ├── DotGrid-JS-TW.json
│ │ ├── DotGrid-TS-CSS.json
│ │ ├── DotGrid-TS-TW.json
│ │ ├── ElasticSlider-JS-CSS.json
│ │ ├── ElasticSlider-JS-TW.json
│ │ ├── ElasticSlider-TS-CSS.json
│ │ ├── ElasticSlider-TS-TW.json
│ │ ├── ElectricBorder-JS-CSS.json
│ │ ├── ElectricBorder-JS-TW.json
│ │ ├── ElectricBorder-TS-CSS.json
│ │ ├── ElectricBorder-TS-TW.json
│ │ ├── EvilEye-JS-CSS.json
│ │ ├── EvilEye-JS-TW.json
│ │ ├── EvilEye-TS-CSS.json
│ │ ├── EvilEye-TS-TW.json
│ │ ├── FadeContent-JS-CSS.json
│ │ ├── FadeContent-JS-TW.json
│ │ ├── FadeContent-TS-CSS.json
│ │ ├── FadeContent-TS-TW.json
│ │ ├── FallingText-JS-CSS.json
│ │ ├── FallingText-JS-TW.json
│ │ ├── FallingText-TS-CSS.json
│ │ ├── FallingText-TS-TW.json
│ │ ├── FaultyTerminal-JS-CSS.json
│ │ ├── FaultyTerminal-JS-TW.json
│ │ ├── FaultyTerminal-TS-CSS.json
│ │ ├── FaultyTerminal-TS-TW.json
│ │ ├── FloatingLines-JS-CSS.json
│ │ ├── FloatingLines-JS-TW.json
│ │ ├── FloatingLines-TS-CSS.json
│ │ ├── FloatingLines-TS-TW.json
│ │ ├── FlowingMenu-JS-CSS.json
│ │ ├── FlowingMenu-JS-TW.json
│ │ ├── FlowingMenu-TS-CSS.json
│ │ ├── FlowingMenu-TS-TW.json
│ │ ├── FluidGlass-JS-CSS.json
│ │ ├── FluidGlass-JS-TW.json
│ │ ├── FluidGlass-TS-CSS.json
│ │ ├── FluidGlass-TS-TW.json
│ │ ├── FlyingPosters-JS-CSS.json
│ │ ├── FlyingPosters-JS-TW.json
│ │ ├── FlyingPosters-TS-CSS.json
│ │ ├── FlyingPosters-TS-TW.json
│ │ ├── Folder-JS-CSS.json
│ │ ├── Folder-JS-TW.json
│ │ ├── Folder-TS-CSS.json
│ │ ├── Folder-TS-TW.json
│ │ ├── FuzzyText-JS-CSS.json
│ │ ├── FuzzyText-JS-TW.json
│ │ ├── FuzzyText-TS-CSS.json
│ │ ├── FuzzyText-TS-TW.json
│ │ ├── Galaxy-JS-CSS.json
│ │ ├── Galaxy-JS-TW.json
│ │ ├── Galaxy-TS-CSS.json
│ │ ├── Galaxy-TS-TW.json
│ │ ├── GhostCursor-JS-CSS.json
│ │ ├── GhostCursor-JS-TW.json
│ │ ├── GhostCursor-TS-CSS.json
│ │ ├── GhostCursor-TS-TW.json
│ │ ├── GlareHover-JS-CSS.json
│ │ ├── GlareHover-JS-TW.json
│ │ ├── GlareHover-TS-CSS.json
│ │ ├── GlareHover-TS-TW.json
│ │ ├── GlassIcons-JS-CSS.json
│ │ ├── GlassIcons-JS-TW.json
│ │ ├── GlassIcons-TS-CSS.json
│ │ ├── GlassIcons-TS-TW.json
│ │ ├── GlassSurface-JS-CSS.json
│ │ ├── GlassSurface-JS-TW.json
│ │ ├── GlassSurface-TS-CSS.json
│ │ ├── GlassSurface-TS-TW.json
│ │ ├── GlitchText-JS-CSS.json
│ │ ├── GlitchText-JS-TW.json
│ │ ├── GlitchText-TS-CSS.json
│ │ ├── GlitchText-TS-TW.json
│ │ ├── GooeyNav-JS-CSS.json
│ │ ├── GooeyNav-JS-TW.json
│ │ ├── GooeyNav-TS-CSS.json
│ │ ├── GooeyNav-TS-TW.json
│ │ ├── GradientBlinds-JS-CSS.json
│ │ ├── GradientBlinds-JS-TW.json
│ │ ├── GradientBlinds-TS-CSS.json
│ │ ├── GradientBlinds-TS-TW.json
│ │ ├── GradientText-JS-CSS.json
│ │ ├── GradientText-JS-TW.json
│ │ ├── GradientText-TS-CSS.json
│ │ ├── GradientText-TS-TW.json
│ │ ├── GradualBlur-JS-CSS.json
│ │ ├── GradualBlur-JS-TW.json
│ │ ├── GradualBlur-TS-CSS.json
│ │ ├── GradualBlur-TS-TW.json
│ │ ├── Grainient-JS-CSS.json
│ │ ├── Grainient-JS-TW.json
│ │ ├── Grainient-TS-CSS.json
│ │ ├── Grainient-TS-TW.json
│ │ ├── GridDistortion-JS-CSS.json
│ │ ├── GridDistortion-JS-TW.json
│ │ ├── GridDistortion-TS-CSS.json
│ │ ├── GridDistortion-TS-TW.json
│ │ ├── GridMotion-JS-CSS.json
│ │ ├── GridMotion-JS-TW.json
│ │ ├── GridMotion-TS-CSS.json
│ │ ├── GridMotion-TS-TW.json
│ │ ├── GridScan-JS-CSS.json
│ │ ├── GridScan-JS-TW.json
│ │ ├── GridScan-TS-CSS.json
│ │ ├── GridScan-TS-TW.json
│ │ ├── Hyperspeed-JS-CSS.json
│ │ ├── Hyperspeed-JS-TW.json
│ │ ├── Hyperspeed-TS-CSS.json
│ │ ├── Hyperspeed-TS-TW.json
│ │ ├── ImageTrail-JS-CSS.json
│ │ ├── ImageTrail-JS-TW.json
│ │ ├── ImageTrail-TS-CSS.json
│ │ ├── ImageTrail-TS-TW.json
│ │ ├── InfiniteMenu-JS-CSS.json
│ │ ├── InfiniteMenu-JS-TW.json
│ │ ├── InfiniteMenu-TS-CSS.json
│ │ ├── InfiniteMenu-TS-TW.json
│ │ ├── Iridescence-JS-CSS.json
│ │ ├── Iridescence-JS-TW.json
│ │ ├── Iridescence-TS-CSS.json
│ │ ├── Iridescence-TS-TW.json
│ │ ├── Lanyard-JS-CSS.json
│ │ ├── Lanyard-JS-TW.json
│ │ ├── Lanyard-TS-CSS.json
│ │ ├── Lanyard-TS-TW.json
│ │ ├── LaserFlow-JS-CSS.json
│ │ ├── LaserFlow-JS-TW.json
│ │ ├── LaserFlow-TS-CSS.json
│ │ ├── LaserFlow-TS-TW.json
│ │ ├── LetterGlitch-JS-CSS.json
│ │ ├── LetterGlitch-JS-TW.json
│ │ ├── LetterGlitch-TS-CSS.json
│ │ ├── LetterGlitch-TS-TW.json
│ │ ├── LightPillar-JS-CSS.json
│ │ ├── LightPillar-JS-TW.json
│ │ ├── LightPillar-TS-CSS.json
│ │ ├── LightPillar-TS-TW.json
│ │ ├── LightRays-JS-CSS.json
│ │ ├── LightRays-JS-TW.json
│ │ ├── LightRays-TS-CSS.json
│ │ ├── LightRays-TS-TW.json
│ │ ├── Lightning-JS-CSS.json
│ │ ├── Lightning-JS-TW.json
│ │ ├── Lightning-TS-CSS.json
│ │ ├── Lightning-TS-TW.json
│ │ ├── LineWaves-JS-CSS.json
│ │ ├── LineWaves-JS-TW.json
│ │ ├── LineWaves-TS-CSS.json
│ │ ├── LineWaves-TS-TW.json
│ │ ├── LiquidChrome-JS-CSS.json
│ │ ├── LiquidChrome-JS-TW.json
│ │ ├── LiquidChrome-TS-CSS.json
│ │ ├── LiquidChrome-TS-TW.json
│ │ ├── LiquidEther-JS-CSS.json
│ │ ├── LiquidEther-JS-TW.json
│ │ ├── LiquidEther-TS-CSS.json
│ │ ├── LiquidEther-TS-TW.json
│ │ ├── LogoLoop-JS-CSS.json
│ │ ├── LogoLoop-JS-TW.json
│ │ ├── LogoLoop-TS-CSS.json
│ │ ├── LogoLoop-TS-TW.json
│ │ ├── MagicBento-JS-CSS.json
│ │ ├── MagicBento-JS-TW.json
│ │ ├── MagicBento-TS-CSS.json
│ │ ├── MagicBento-TS-TW.json
│ │ ├── MagicRings-JS-CSS.json
│ │ ├── MagicRings-JS-TW.json
│ │ ├── MagicRings-TS-CSS.json
│ │ ├── MagicRings-TS-TW.json
│ │ ├── Magnet-JS-CSS.json
│ │ ├── Magnet-JS-TW.json
│ │ ├── Magnet-TS-CSS.json
│ │ ├── Magnet-TS-TW.json
│ │ ├── MagnetLines-JS-CSS.json
│ │ ├── MagnetLines-JS-TW.json
│ │ ├── MagnetLines-TS-CSS.json
│ │ ├── MagnetLines-TS-TW.json
│ │ ├── Masonry-JS-CSS.json
│ │ ├── Masonry-JS-TW.json
│ │ ├── Masonry-TS-CSS.json
│ │ ├── Masonry-TS-TW.json
│ │ ├── MetaBalls-JS-CSS.json
│ │ ├── MetaBalls-JS-TW.json
│ │ ├── MetaBalls-TS-CSS.json
│ │ ├── MetaBalls-TS-TW.json
│ │ ├── MetallicPaint-JS-CSS.json
│ │ ├── MetallicPaint-JS-TW.json
│ │ ├── MetallicPaint-TS-CSS.json
│ │ ├── MetallicPaint-TS-TW.json
│ │ ├── ModelViewer-JS-CSS.json
│ │ ├── ModelViewer-JS-TW.json
│ │ ├── ModelViewer-TS-CSS.json
│ │ ├── ModelViewer-TS-TW.json
│ │ ├── Noise-JS-CSS.json
│ │ ├── Noise-JS-TW.json
│ │ ├── Noise-TS-CSS.json
│ │ ├── Noise-TS-TW.json
│ │ ├── Orb-JS-CSS.json
│ │ ├── Orb-JS-TW.json
│ │ ├── Orb-TS-CSS.json
│ │ ├── Orb-TS-TW.json
│ │ ├── OrbitImages-JS-CSS.json
│ │ ├── OrbitImages-JS-TW.json
│ │ ├── OrbitImages-TS-CSS.json
│ │ ├── OrbitImages-TS-TW.json
│ │ ├── Particles-JS-CSS.json
│ │ ├── Particles-JS-TW.json
│ │ ├── Particles-TS-CSS.json
│ │ ├── Particles-TS-TW.json
│ │ ├── PillNav-JS-CSS.json
│ │ ├── PillNav-JS-TW.json
│ │ ├── PillNav-TS-CSS.json
│ │ ├── PillNav-TS-TW.json
│ │ ├── PixelBlast-JS-CSS.json
│ │ ├── PixelBlast-JS-TW.json
│ │ ├── PixelBlast-TS-CSS.json
│ │ ├── PixelBlast-TS-TW.json
│ │ ├── PixelCard-JS-CSS.json
│ │ ├── PixelCard-JS-TW.json
│ │ ├── PixelCard-TS-CSS.json
│ │ ├── PixelCard-TS-TW.json
│ │ ├── PixelSnow-JS-CSS.json
│ │ ├── PixelSnow-JS-TW.json
│ │ ├── PixelSnow-TS-CSS.json
│ │ ├── PixelSnow-TS-TW.json
│ │ ├── PixelTrail-JS-CSS.json
│ │ ├── PixelTrail-JS-TW.json
│ │ ├── PixelTrail-TS-CSS.json
│ │ ├── PixelTrail-TS-TW.json
│ │ ├── PixelTransition-JS-CSS.json
│ │ ├── PixelTransition-JS-TW.json
│ │ ├── PixelTransition-TS-CSS.json
│ │ ├── PixelTransition-TS-TW.json
│ │ ├── Plasma-JS-CSS.json
│ │ ├── Plasma-JS-TW.json
│ │ ├── Plasma-TS-CSS.json
│ │ ├── Plasma-TS-TW.json
│ │ ├── Prism-JS-CSS.json
│ │ ├── Prism-JS-TW.json
│ │ ├── Prism-TS-CSS.json
│ │ ├── Prism-TS-TW.json
│ │ ├── PrismaticBurst-JS-CSS.json
│ │ ├── PrismaticBurst-JS-TW.json
│ │ ├── PrismaticBurst-TS-CSS.json
│ │ ├── PrismaticBurst-TS-TW.json
│ │ ├── ProfileCard-JS-CSS.json
│ │ ├── ProfileCard-JS-TW.json
│ │ ├── ProfileCard-TS-CSS.json
│ │ ├── ProfileCard-TS-TW.json
│ │ ├── Radar-JS-CSS.json
│ │ ├── Radar-JS-TW.json
│ │ ├── Radar-TS-CSS.json
│ │ ├── Radar-TS-TW.json
│ │ ├── ReflectiveCard-JS-CSS.json
│ │ ├── ReflectiveCard-JS-TW.json
│ │ ├── ReflectiveCard-TS-CSS.json
│ │ ├── ReflectiveCard-TS-TW.json
│ │ ├── Ribbons-JS-CSS.json
│ │ ├── Ribbons-JS-TW.json
│ │ ├── Ribbons-TS-CSS.json
│ │ ├── Ribbons-TS-TW.json
│ │ ├── RippleGrid-JS-CSS.json
│ │ ├── RippleGrid-JS-TW.json
│ │ ├── RippleGrid-TS-CSS.json
│ │ ├── RippleGrid-TS-TW.json
│ │ ├── RotatingText-JS-CSS.json
│ │ ├── RotatingText-JS-TW.json
│ │ ├── RotatingText-TS-CSS.json
│ │ ├── RotatingText-TS-TW.json
│ │ ├── ScrambledText-JS-CSS.json
│ │ ├── ScrambledText-JS-TW.json
│ │ ├── ScrambledText-TS-CSS.json
│ │ ├── ScrambledText-TS-TW.json
│ │ ├── ScrollFloat-JS-CSS.json
│ │ ├── ScrollFloat-JS-TW.json
│ │ ├── ScrollFloat-TS-CSS.json
│ │ ├── ScrollFloat-TS-TW.json
│ │ ├── ScrollReveal-JS-CSS.json
│ │ ├── ScrollReveal-JS-TW.json
│ │ ├── ScrollReveal-TS-CSS.json
│ │ ├── ScrollReveal-TS-TW.json
│ │ ├── ScrollStack-JS-CSS.json
│ │ ├── ScrollStack-JS-TW.json
│ │ ├── ScrollStack-TS-CSS.json
│ │ ├── ScrollStack-TS-TW.json
│ │ ├── ScrollVelocity-JS-CSS.json
│ │ ├── ScrollVelocity-JS-TW.json
│ │ ├── ScrollVelocity-TS-CSS.json
│ │ ├── ScrollVelocity-TS-TW.json
│ │ ├── ShapeBlur-JS-CSS.json
│ │ ├── ShapeBlur-JS-TW.json
│ │ ├── ShapeBlur-TS-CSS.json
│ │ ├── ShapeBlur-TS-TW.json
│ │ ├── ShapeGrid-JS-CSS.json
│ │ ├── ShapeGrid-JS-TW.json
│ │ ├── ShapeGrid-TS-CSS.json
│ │ ├── ShapeGrid-TS-TW.json
│ │ ├── ShinyText-JS-CSS.json
│ │ ├── ShinyText-JS-TW.json
│ │ ├── ShinyText-TS-CSS.json
│ │ ├── ShinyText-TS-TW.json
│ │ ├── Shuffle-JS-CSS.json
│ │ ├── Shuffle-JS-TW.json
│ │ ├── Shuffle-TS-CSS.json
│ │ ├── Shuffle-TS-TW.json
│ │ ├── Silk-JS-CSS.json
│ │ ├── Silk-JS-TW.json
│ │ ├── Silk-TS-CSS.json
│ │ ├── Silk-TS-TW.json
│ │ ├── SoftAurora-JS-CSS.json
│ │ ├── SoftAurora-JS-TW.json
│ │ ├── SoftAurora-TS-CSS.json
│ │ ├── SoftAurora-TS-TW.json
│ │ ├── SplashCursor-JS-CSS.json
│ │ ├── SplashCursor-JS-TW.json
│ │ ├── SplashCursor-TS-CSS.json
│ │ ├── SplashCursor-TS-TW.json
│ │ ├── SplitText-JS-CSS.json
│ │ ├── SplitText-JS-TW.json
│ │ ├── SplitText-TS-CSS.json
│ │ ├── SplitText-TS-TW.json
│ │ ├── SpotlightCard-JS-CSS.json
│ │ ├── SpotlightCard-JS-TW.json
│ │ ├── SpotlightCard-TS-CSS.json
│ │ ├── SpotlightCard-TS-TW.json
│ │ ├── Stack-JS-CSS.json
│ │ ├── Stack-JS-TW.json
│ │ ├── Stack-TS-CSS.json
│ │ ├── Stack-TS-TW.json
│ │ ├── StaggeredMenu-JS-CSS.json
│ │ ├── StaggeredMenu-JS-TW.json
│ │ ├── StaggeredMenu-TS-CSS.json
│ │ ├── StaggeredMenu-TS-TW.json
│ │ ├── StarBorder-JS-CSS.json
│ │ ├── StarBorder-JS-TW.json
│ │ ├── StarBorder-TS-CSS.json
│ │ ├── StarBorder-TS-TW.json
│ │ ├── Stepper-JS-CSS.json
│ │ ├── Stepper-JS-TW.json
│ │ ├── Stepper-TS-CSS.json
│ │ ├── Stepper-TS-TW.json
│ │ ├── StickerPeel-JS-CSS.json
│ │ ├── StickerPeel-JS-TW.json
│ │ ├── StickerPeel-TS-CSS.json
│ │ ├── StickerPeel-TS-TW.json
│ │ ├── TargetCursor-JS-CSS.json
│ │ ├── TargetCursor-JS-TW.json
│ │ ├── TargetCursor-TS-CSS.json
│ │ ├── TargetCursor-TS-TW.json
│ │ ├── TextCursor-JS-CSS.json
│ │ ├── TextCursor-JS-TW.json
│ │ ├── TextCursor-TS-CSS.json
│ │ ├── TextCursor-TS-TW.json
│ │ ├── TextPressure-JS-CSS.json
│ │ ├── TextPressure-JS-TW.json
│ │ ├── TextPressure-TS-CSS.json
│ │ ├── TextPressure-TS-TW.json
│ │ ├── TextType-JS-CSS.json
│ │ ├── TextType-JS-TW.json
│ │ ├── TextType-TS-CSS.json
│ │ ├── TextType-TS-TW.json
│ │ ├── Threads-JS-CSS.json
│ │ ├── Threads-JS-TW.json
│ │ ├── Threads-TS-CSS.json
│ │ ├── Threads-TS-TW.json
│ │ ├── TiltedCard-JS-CSS.json
│ │ ├── TiltedCard-JS-TW.json
│ │ ├── TiltedCard-TS-CSS.json
│ │ ├── TiltedCard-TS-TW.json
│ │ ├── TrueFocus-JS-CSS.json
│ │ ├── TrueFocus-JS-TW.json
│ │ ├── TrueFocus-TS-CSS.json
│ │ ├── TrueFocus-TS-TW.json
│ │ ├── VariableProximity-JS-CSS.json
│ │ ├── VariableProximity-JS-TW.json
│ │ ├── VariableProximity-TS-CSS.json
│ │ ├── VariableProximity-TS-TW.json
│ │ ├── Waves-JS-CSS.json
│ │ ├── Waves-JS-TW.json
│ │ ├── Waves-TS-CSS.json
│ │ ├── Waves-TS-TW.json
│ │ └── registry.json
│ ├── robots.txt
│ ├── site.webmanifest
│ └── sitemap.xml
├── scripts/
│ ├── generateComponent.js
│ ├── generateLlmsText.js
│ └── generateSitemap.js
├── src/
│ ├── App.jsx
│ ├── assets/
│ │ └── lanyard/
│ │ └── card.glb
│ ├── components/
│ │ ├── code/
│ │ │ ├── CliInstallation.jsx
│ │ │ ├── CodeExample.jsx
│ │ │ ├── CodeHighlighter.jsx
│ │ │ ├── CodeOptions.jsx
│ │ │ ├── Dependencies.jsx
│ │ │ └── IconSelect.jsx
│ │ ├── common/
│ │ │ ├── Announcement.jsx
│ │ │ ├── AnnouncementBar/
│ │ │ │ ├── AnnouncementBar.css
│ │ │ │ ├── AnnouncementBar.jsx
│ │ │ │ └── index.js
│ │ │ ├── AnnouncementModal/
│ │ │ │ ├── AnnouncementModal.css
│ │ │ │ └── AnnouncementModal.jsx
│ │ │ ├── BackToTopButton.jsx
│ │ │ ├── ComponentList.jsx
│ │ │ ├── ContributionSection.jsx
│ │ │ ├── GitHub/
│ │ │ │ └── ContributionSection.jsx
│ │ │ ├── Misc/
│ │ │ │ ├── Announcement.jsx
│ │ │ │ ├── BackToTopButton.jsx
│ │ │ │ ├── SearchDialog.jsx
│ │ │ │ └── SkeletonLoader.jsx
│ │ │ ├── Preview/
│ │ │ │ ├── BackgroundContent.jsx
│ │ │ │ ├── Customize.jsx
│ │ │ │ ├── OpenInStudioButton.jsx
│ │ │ │ ├── PreviewColorPicker.jsx
│ │ │ │ ├── PreviewInput.jsx
│ │ │ │ ├── PreviewSelect.jsx
│ │ │ │ ├── PreviewSlider.jsx
│ │ │ │ ├── PreviewSliderVertical.jsx
│ │ │ │ ├── PreviewSwitch.jsx
│ │ │ │ ├── PropTable.jsx
│ │ │ │ ├── RefreshButton.jsx
│ │ │ │ └── ResetPropsButton.jsx
│ │ │ ├── ProCard.jsx
│ │ │ ├── SVGComponents.jsx
│ │ │ ├── SearchDialog.jsx
│ │ │ ├── SimpleMarquee.jsx
│ │ │ ├── SkeletonLoader.jsx
│ │ │ ├── SponsorsCard.jsx
│ │ │ ├── SponsorsCircle.jsx
│ │ │ ├── TabsFooter.jsx
│ │ │ └── TabsLayout.jsx
│ │ ├── context/
│ │ │ ├── ActiveRouteContext/
│ │ │ │ └── ActiveRouteContext.jsx
│ │ │ ├── ComponentPropsContext.jsx
│ │ │ ├── InstallationContext/
│ │ │ │ └── InstallationContext.jsx
│ │ │ ├── OptionsContext/
│ │ │ │ ├── OptionsContext.jsx
│ │ │ │ └── useOptions.js
│ │ │ ├── SearchContext/
│ │ │ │ ├── SearchContext.jsx
│ │ │ │ └── useSearch.js
│ │ │ └── TransitionContext/
│ │ │ └── TransitionContext.jsx
│ │ ├── landing/
│ │ │ ├── DisplayHeader/
│ │ │ │ ├── DisplayHeader.css
│ │ │ │ └── DisplayHeader.jsx
│ │ │ ├── FeatureCards/
│ │ │ │ ├── FeatureCards.css
│ │ │ │ └── FeatureCards.jsx
│ │ │ ├── Footer/
│ │ │ │ ├── Footer.css
│ │ │ │ └── Footer.jsx
│ │ │ ├── Hero/
│ │ │ │ └── Hero.jsx
│ │ │ ├── PlasmaWave/
│ │ │ │ └── PlasmaWaveV2.jsx
│ │ │ ├── Sponsors/
│ │ │ │ ├── Sponsors.css
│ │ │ │ └── Sponsors.jsx
│ │ │ ├── StartBuilding/
│ │ │ │ ├── StartBuilding.css
│ │ │ │ └── StartBuilding.jsx
│ │ │ ├── Testimonials/
│ │ │ │ ├── Testimonials.css
│ │ │ │ └── Testimonials.jsx
│ │ │ └── ToolsShowcase/
│ │ │ ├── ToolsShowcase.css
│ │ │ └── ToolsShowcase.jsx
│ │ ├── layout/
│ │ │ ├── Providers.jsx
│ │ │ └── SidebarLayout.jsx
│ │ ├── navs/
│ │ │ ├── Header.jsx
│ │ │ └── Sidebar.jsx
│ │ └── setup/
│ │ ├── color-mode.jsx
│ │ ├── provider.jsx
│ │ ├── toaster.jsx
│ │ └── tooltip.jsx
│ ├── constants/
│ │ ├── Categories.js
│ │ ├── Components.js
│ │ ├── Information.js
│ │ ├── Showcase.js
│ │ ├── Site.js
│ │ ├── Sponsors.js
│ │ ├── Tools.js
│ │ ├── code/
│ │ │ ├── Animations/
│ │ │ │ ├── animatedContentCode.js
│ │ │ │ ├── antigravityCode.js
│ │ │ │ ├── blobCursorCode.js
│ │ │ │ ├── clickSparkCode.js
│ │ │ │ ├── crosshairCode.js
│ │ │ │ ├── cubesCode.js
│ │ │ │ ├── electricBorderCode.js
│ │ │ │ ├── fadeContentCode.js
│ │ │ │ ├── ghostCursorCode.js
│ │ │ │ ├── glareHoverCode.js
│ │ │ │ ├── gradualblurCode.js
│ │ │ │ ├── imageTrailCode.js
│ │ │ │ ├── laserFlowCode.js
│ │ │ │ ├── logoLoopCode.js
│ │ │ │ ├── magicRingsCode.js
│ │ │ │ ├── magnetCode.js
│ │ │ │ ├── magnetLinesCode.js
│ │ │ │ ├── metaBallsCode.js
│ │ │ │ ├── metallicPaintCode.js
│ │ │ │ ├── noiseCode.js
│ │ │ │ ├── orbitImagesCode.js
│ │ │ │ ├── pixelTrailCode.js
│ │ │ │ ├── pixelTransitionCode.js
│ │ │ │ ├── ribbonsCode.js
│ │ │ │ ├── shapeBlurCode.js
│ │ │ │ ├── splashCursorCode.js
│ │ │ │ ├── starBorderCode.js
│ │ │ │ ├── stickerPeelCode.js
│ │ │ │ └── targetCursorCode.js
│ │ │ ├── Backgrounds/
│ │ │ │ ├── auroraCode.js
│ │ │ │ ├── balatroCode.js
│ │ │ │ ├── ballpitCode.js
│ │ │ │ ├── beamsCode.js
│ │ │ │ ├── colorBendsCode.js
│ │ │ │ ├── darkVeilCode.js
│ │ │ │ ├── ditherCode.js
│ │ │ │ ├── dotGridCode.js
│ │ │ │ ├── evilEyeCode.js
│ │ │ │ ├── faultyTerminalCode.js
│ │ │ │ ├── floatingLinesCode.js
│ │ │ │ ├── galaxyCode.js
│ │ │ │ ├── gradientBlindsCode.js
│ │ │ │ ├── grainientCode.js
│ │ │ │ ├── gridDistortionCode.js
│ │ │ │ ├── gridMotionCode.js
│ │ │ │ ├── gridScanCode.js
│ │ │ │ ├── hyperspeedCode.js
│ │ │ │ ├── iridescenceCode.js
│ │ │ │ ├── letterGlitchCode.js
│ │ │ │ ├── lightPillarCode.js
│ │ │ │ ├── lightRaysCode.js
│ │ │ │ ├── lightningCode.js
│ │ │ │ ├── lineWavesCode.js
│ │ │ │ ├── liquidChromeCode.js
│ │ │ │ ├── liquidEtherCode.js
│ │ │ │ ├── orbCode.js
│ │ │ │ ├── particlesCode.js
│ │ │ │ ├── pixelBlastCode.js
│ │ │ │ ├── pixelSnowCode.js
│ │ │ │ ├── plasmaCode.js
│ │ │ │ ├── prismCode.js
│ │ │ │ ├── prismaticBurstCode.js
│ │ │ │ ├── radarCode.js
│ │ │ │ ├── rippleGridCode.js
│ │ │ │ ├── shapeGridCode.js
│ │ │ │ ├── silkCode.js
│ │ │ │ ├── softAuroraCode.js
│ │ │ │ ├── threadsCode.js
│ │ │ │ └── wavesCode.js
│ │ │ ├── Components/
│ │ │ │ ├── animatedListCode.js
│ │ │ │ ├── borderGlowCode.js
│ │ │ │ ├── bounceCardsCode.js
│ │ │ │ ├── bubbleMenuCode.js
│ │ │ │ ├── cardNavCode.js
│ │ │ │ ├── cardSwapCode.js
│ │ │ │ ├── carouselCode.js
│ │ │ │ ├── chromaGridCode.js
│ │ │ │ ├── circularGalleryCode.js
│ │ │ │ ├── counterCode.js
│ │ │ │ ├── decayCardCode.js
│ │ │ │ ├── dockCode.js
│ │ │ │ ├── domeGalleryCode.js
│ │ │ │ ├── elasticSliderCode.js
│ │ │ │ ├── flowingMenuCode.js
│ │ │ │ ├── fluidGlassCode.js
│ │ │ │ ├── flyingPostersCode.js
│ │ │ │ ├── folderCode.js
│ │ │ │ ├── glassIconsCode.js
│ │ │ │ ├── glassSurfaceCode.js
│ │ │ │ ├── gooeyNavCode.js
│ │ │ │ ├── infiniteMenuCode.js
│ │ │ │ ├── lanyardCode.js
│ │ │ │ ├── magicBentoCode.js
│ │ │ │ ├── masonryCode.js
│ │ │ │ ├── modelViewerCode.js
│ │ │ │ ├── pillNavCode.js
│ │ │ │ ├── pixelCardCode.js
│ │ │ │ ├── profileCardCode.js
│ │ │ │ ├── reflectiveCardCode.js
│ │ │ │ ├── scrollStackCode.js
│ │ │ │ ├── spotlightCardCode.js
│ │ │ │ ├── stackCode.js
│ │ │ │ ├── staggeredMenuCode.js
│ │ │ │ ├── stepperCode.js
│ │ │ │ └── tiltedCardCode.js
│ │ │ └── TextAnimations/
│ │ │ ├── asciiTextCode.js
│ │ │ ├── blurTextCode.js
│ │ │ ├── circularTextCode.js
│ │ │ ├── countUpCode.js
│ │ │ ├── curvedLoopCode.js
│ │ │ ├── decryptedTextCode.js
│ │ │ ├── fallingTextCode.js
│ │ │ ├── fuzzyTextCode.js
│ │ │ ├── glitchTextCode.js
│ │ │ ├── gradientTextCode.js
│ │ │ ├── rotatingTextCode.js
│ │ │ ├── scrambledTextCode.js
│ │ │ ├── scrollFloatCode.js
│ │ │ ├── scrollRevealCode.js
│ │ │ ├── scrollVelocityCode.js
│ │ │ ├── shinyTextCode.js
│ │ │ ├── shuffleCode.js
│ │ │ ├── splitTextCode.js
│ │ │ ├── textCursorCode.js
│ │ │ ├── textPressureCode.js
│ │ │ ├── textTypeCode.js
│ │ │ ├── trueFocusCode.js
│ │ │ └── variableProximityCode.js
│ │ └── colors.js
│ ├── content/
│ │ ├── Animations/
│ │ │ ├── AnimatedContent/
│ │ │ │ └── AnimatedContent.jsx
│ │ │ ├── Antigravity/
│ │ │ │ └── Antigravity.jsx
│ │ │ ├── BlobCursor/
│ │ │ │ ├── BlobCursor.css
│ │ │ │ └── BlobCursor.jsx
│ │ │ ├── ClickSpark/
│ │ │ │ └── ClickSpark.jsx
│ │ │ ├── Crosshair/
│ │ │ │ └── Crosshair.jsx
│ │ │ ├── Cubes/
│ │ │ │ ├── Cubes.css
│ │ │ │ └── Cubes.jsx
│ │ │ ├── ElectricBorder/
│ │ │ │ ├── ElectricBorder.css
│ │ │ │ └── ElectricBorder.jsx
│ │ │ ├── FadeContent/
│ │ │ │ └── FadeContent.jsx
│ │ │ ├── GhostCursor/
│ │ │ │ ├── GhostCursor.css
│ │ │ │ └── GhostCursor.jsx
│ │ │ ├── GlareHover/
│ │ │ │ ├── GlareHover.css
│ │ │ │ └── GlareHover.jsx
│ │ │ ├── GradualBlur/
│ │ │ │ ├── GradualBlur.css
│ │ │ │ └── GradualBlur.jsx
│ │ │ ├── ImageTrail/
│ │ │ │ ├── ImageTrail.css
│ │ │ │ └── ImageTrail.jsx
│ │ │ ├── LaserFlow/
│ │ │ │ ├── LaserFlow.css
│ │ │ │ └── LaserFlow.jsx
│ │ │ ├── LogoLoop/
│ │ │ │ ├── LogoLoop.css
│ │ │ │ └── LogoLoop.jsx
│ │ │ ├── MagicRings/
│ │ │ │ ├── MagicRings.css
│ │ │ │ └── MagicRings.jsx
│ │ │ ├── Magnet/
│ │ │ │ └── Magnet.jsx
│ │ │ ├── MagnetLines/
│ │ │ │ ├── MagnetLines.css
│ │ │ │ └── MagnetLines.jsx
│ │ │ ├── MetaBalls/
│ │ │ │ ├── MetaBalls.css
│ │ │ │ └── MetaBalls.jsx
│ │ │ ├── MetallicPaint/
│ │ │ │ ├── MetallicPaint.css
│ │ │ │ └── MetallicPaint.jsx
│ │ │ ├── Noise/
│ │ │ │ ├── Noise.css
│ │ │ │ └── Noise.jsx
│ │ │ ├── OrbitImages/
│ │ │ │ ├── OrbitImages.css
│ │ │ │ └── OrbitImages.jsx
│ │ │ ├── PixelTrail/
│ │ │ │ ├── PixelTrail.css
│ │ │ │ └── PixelTrail.jsx
│ │ │ ├── PixelTransition/
│ │ │ │ ├── PixelTransition.css
│ │ │ │ └── PixelTransition.jsx
│ │ │ ├── Ribbons/
│ │ │ │ ├── Ribbons.css
│ │ │ │ └── Ribbons.jsx
│ │ │ ├── ShapeBlur/
│ │ │ │ └── ShapeBlur.jsx
│ │ │ ├── SplashCursor/
│ │ │ │ └── SplashCursor.jsx
│ │ │ ├── StarBorder/
│ │ │ │ ├── StarBorder.css
│ │ │ │ └── StarBorder.jsx
│ │ │ ├── StickerPeel/
│ │ │ │ ├── StickerPeel.css
│ │ │ │ └── StickerPeel.jsx
│ │ │ └── TargetCursor/
│ │ │ ├── TargetCursor.css
│ │ │ └── TargetCursor.jsx
│ │ ├── Backgrounds/
│ │ │ ├── Aurora/
│ │ │ │ ├── Aurora.css
│ │ │ │ └── Aurora.jsx
│ │ │ ├── Balatro/
│ │ │ │ ├── Balatro.css
│ │ │ │ └── Balatro.jsx
│ │ │ ├── Ballpit/
│ │ │ │ └── Ballpit.jsx
│ │ │ ├── Beams/
│ │ │ │ ├── Beams.css
│ │ │ │ └── Beams.jsx
│ │ │ ├── ColorBends/
│ │ │ │ ├── ColorBends.css
│ │ │ │ └── ColorBends.jsx
│ │ │ ├── DarkVeil/
│ │ │ │ ├── DarkVeil.css
│ │ │ │ └── DarkVeil.jsx
│ │ │ ├── Dither/
│ │ │ │ ├── Dither.css
│ │ │ │ └── Dither.jsx
│ │ │ ├── DotGrid/
│ │ │ │ ├── DotGrid.css
│ │ │ │ └── DotGrid.jsx
│ │ │ ├── EvilEye/
│ │ │ │ ├── EvilEye.css
│ │ │ │ └── EvilEye.jsx
│ │ │ ├── FaultyTerminal/
│ │ │ │ ├── FaultyTerminal.css
│ │ │ │ └── FaultyTerminal.jsx
│ │ │ ├── FloatingLines/
│ │ │ │ ├── FloatingLines.css
│ │ │ │ └── FloatingLines.jsx
│ │ │ ├── Galaxy/
│ │ │ │ ├── Galaxy.css
│ │ │ │ └── Galaxy.jsx
│ │ │ ├── GradientBlinds/
│ │ │ │ ├── GradientBlinds.css
│ │ │ │ └── GradientBlinds.jsx
│ │ │ ├── Grainient/
│ │ │ │ ├── Grainient.css
│ │ │ │ └── Grainient.jsx
│ │ │ ├── GridDistortion/
│ │ │ │ ├── GridDistortion.css
│ │ │ │ └── GridDistortion.jsx
│ │ │ ├── GridMotion/
│ │ │ │ ├── GridMotion.css
│ │ │ │ └── GridMotion.jsx
│ │ │ ├── GridScan/
│ │ │ │ ├── GridScan.css
│ │ │ │ └── GridScan.jsx
│ │ │ ├── Hyperspeed/
│ │ │ │ ├── HyperSpeedPresets.js
│ │ │ │ ├── Hyperspeed.css
│ │ │ │ └── Hyperspeed.jsx
│ │ │ ├── Iridescence/
│ │ │ │ ├── Iridescence.css
│ │ │ │ └── Iridescence.jsx
│ │ │ ├── LetterGlitch/
│ │ │ │ └── LetterGlitch.jsx
│ │ │ ├── LightPillar/
│ │ │ │ ├── LightPillar.css
│ │ │ │ └── LightPillar.jsx
│ │ │ ├── LightRays/
│ │ │ │ ├── LightRays.css
│ │ │ │ └── LightRays.jsx
│ │ │ ├── Lightning/
│ │ │ │ ├── Lightning.css
│ │ │ │ └── Lightning.jsx
│ │ │ ├── LineWaves/
│ │ │ │ ├── LineWaves.css
│ │ │ │ └── LineWaves.jsx
│ │ │ ├── LiquidChrome/
│ │ │ │ ├── LiquidChrome.css
│ │ │ │ └── LiquidChrome.jsx
│ │ │ ├── LiquidEther/
│ │ │ │ ├── LiquidEther.css
│ │ │ │ └── LiquidEther.jsx
│ │ │ ├── Orb/
│ │ │ │ ├── Orb.css
│ │ │ │ └── Orb.jsx
│ │ │ ├── Particles/
│ │ │ │ ├── Particles.css
│ │ │ │ └── Particles.jsx
│ │ │ ├── PixelBlast/
│ │ │ │ ├── PixelBlast.css
│ │ │ │ └── PixelBlast.jsx
│ │ │ ├── PixelSnow/
│ │ │ │ ├── PixelSnow.css
│ │ │ │ └── PixelSnow.jsx
│ │ │ ├── Plasma/
│ │ │ │ ├── Plasma.css
│ │ │ │ └── Plasma.jsx
│ │ │ ├── Prism/
│ │ │ │ ├── Prism.css
│ │ │ │ └── Prism.jsx
│ │ │ ├── PrismaticBurst/
│ │ │ │ ├── PrismaticBurst.css
│ │ │ │ └── PrismaticBurst.jsx
│ │ │ ├── Radar/
│ │ │ │ ├── Radar.css
│ │ │ │ └── Radar.jsx
│ │ │ ├── RippleGrid/
│ │ │ │ ├── RippleGrid.css
│ │ │ │ └── RippleGrid.jsx
│ │ │ ├── ShapeGrid/
│ │ │ │ ├── ShapeGrid.css
│ │ │ │ └── ShapeGrid.jsx
│ │ │ ├── Silk/
│ │ │ │ └── Silk.jsx
│ │ │ ├── SoftAurora/
│ │ │ │ ├── SoftAurora.css
│ │ │ │ └── SoftAurora.jsx
│ │ │ ├── Threads/
│ │ │ │ ├── Threads.css
│ │ │ │ └── Threads.jsx
│ │ │ └── Waves/
│ │ │ ├── Waves.css
│ │ │ └── Waves.jsx
│ │ ├── Components/
│ │ │ ├── AnimatedList/
│ │ │ │ ├── AnimatedList.css
│ │ │ │ └── AnimatedList.jsx
│ │ │ ├── BorderGlow/
│ │ │ │ ├── BorderGlow.css
│ │ │ │ └── BorderGlow.jsx
│ │ │ ├── BounceCards/
│ │ │ │ ├── BounceCards.css
│ │ │ │ └── BounceCards.jsx
│ │ │ ├── BubbleMenu/
│ │ │ │ ├── BubbleMenu.css
│ │ │ │ └── BubbleMenu.jsx
│ │ │ ├── CardNav/
│ │ │ │ ├── CardNav.css
│ │ │ │ └── CardNav.jsx
│ │ │ ├── CardSwap/
│ │ │ │ ├── CardSwap.css
│ │ │ │ └── CardSwap.jsx
│ │ │ ├── Carousel/
│ │ │ │ ├── Carousel.css
│ │ │ │ └── Carousel.jsx
│ │ │ ├── ChromaGrid/
│ │ │ │ ├── ChromaGrid.css
│ │ │ │ └── ChromaGrid.jsx
│ │ │ ├── CircularGallery/
│ │ │ │ ├── CircularGallery.css
│ │ │ │ └── CircularGallery.jsx
│ │ │ ├── Counter/
│ │ │ │ ├── Counter.css
│ │ │ │ └── Counter.jsx
│ │ │ ├── DecayCard/
│ │ │ │ ├── DecayCard.css
│ │ │ │ └── DecayCard.jsx
│ │ │ ├── Dock/
│ │ │ │ ├── Dock.css
│ │ │ │ └── Dock.jsx
│ │ │ ├── DomeGallery/
│ │ │ │ ├── DomeGallery.css
│ │ │ │ └── DomeGallery.jsx
│ │ │ ├── ElasticSlider/
│ │ │ │ ├── ElasticSlider.css
│ │ │ │ └── ElasticSlider.jsx
│ │ │ ├── FlowingMenu/
│ │ │ │ ├── FlowingMenu.css
│ │ │ │ └── FlowingMenu.jsx
│ │ │ ├── FluidGlass/
│ │ │ │ └── FluidGlass.jsx
│ │ │ ├── FlyingPosters/
│ │ │ │ ├── FlyingPosters.css
│ │ │ │ └── FlyingPosters.jsx
│ │ │ ├── Folder/
│ │ │ │ ├── Folder.css
│ │ │ │ └── Folder.jsx
│ │ │ ├── GlassIcons/
│ │ │ │ ├── GlassIcons.css
│ │ │ │ └── GlassIcons.jsx
│ │ │ ├── GlassSurface/
│ │ │ │ ├── GlassSurface.css
│ │ │ │ └── GlassSurface.jsx
│ │ │ ├── GooeyNav/
│ │ │ │ ├── GooeyNav.css
│ │ │ │ └── GooeyNav.jsx
│ │ │ ├── InfiniteMenu/
│ │ │ │ ├── InfiniteMenu.css
│ │ │ │ └── InfiniteMenu.jsx
│ │ │ ├── Lanyard/
│ │ │ │ ├── Lanyard.css
│ │ │ │ ├── Lanyard.jsx
│ │ │ │ └── card.glb
│ │ │ ├── MagicBento/
│ │ │ │ ├── MagicBento.css
│ │ │ │ └── MagicBento.jsx
│ │ │ ├── Masonry/
│ │ │ │ ├── Masonry.css
│ │ │ │ └── Masonry.jsx
│ │ │ ├── ModelViewer/
│ │ │ │ └── ModelViewer.jsx
│ │ │ ├── PillNav/
│ │ │ │ ├── PillNav.css
│ │ │ │ └── PillNav.jsx
│ │ │ ├── PixelCard/
│ │ │ │ ├── PixelCard.css
│ │ │ │ └── PixelCard.jsx
│ │ │ ├── ProfileCard/
│ │ │ │ ├── ProfileCard.css
│ │ │ │ └── ProfileCard.jsx
│ │ │ ├── ReflectiveCard/
│ │ │ │ ├── ReflectiveCard.css
│ │ │ │ └── ReflectiveCard.jsx
│ │ │ ├── ScrollStack/
│ │ │ │ ├── ScrollStack.css
│ │ │ │ └── ScrollStack.jsx
│ │ │ ├── SpotlightCard/
│ │ │ │ ├── SpotlightCard.css
│ │ │ │ └── SpotlightCard.jsx
│ │ │ ├── Stack/
│ │ │ │ ├── Stack.css
│ │ │ │ └── Stack.jsx
│ │ │ ├── StaggeredMenu/
│ │ │ │ ├── StaggeredMenu.css
│ │ │ │ └── StaggeredMenu.jsx
│ │ │ ├── Stepper/
│ │ │ │ ├── Stepper.css
│ │ │ │ └── Stepper.jsx
│ │ │ └── TiltedCard/
│ │ │ ├── TiltedCard.css
│ │ │ └── TiltedCard.jsx
│ │ └── TextAnimations/
│ │ ├── ASCIIText/
│ │ │ └── ASCIIText.jsx
│ │ ├── BlurText/
│ │ │ └── BlurText.jsx
│ │ ├── CircularText/
│ │ │ ├── CircularText.css
│ │ │ └── CircularText.jsx
│ │ ├── CountUp/
│ │ │ └── CountUp.jsx
│ │ ├── CurvedLoop/
│ │ │ ├── CurvedLoop.css
│ │ │ └── CurvedLoop.jsx
│ │ ├── DecryptedText/
│ │ │ └── DecryptedText.jsx
│ │ ├── FallingText/
│ │ │ ├── FallingText.css
│ │ │ └── FallingText.jsx
│ │ ├── FuzzyText/
│ │ │ └── FuzzyText.jsx
│ │ ├── GlitchText/
│ │ │ ├── GlitchText.css
│ │ │ └── GlitchText.jsx
│ │ ├── GradientText/
│ │ │ ├── GradientText.css
│ │ │ └── GradientText.jsx
│ │ ├── RotatingText/
│ │ │ ├── RotatingText.css
│ │ │ └── RotatingText.jsx
│ │ ├── ScrambledText/
│ │ │ ├── ScrambledText.css
│ │ │ └── ScrambledText.jsx
│ │ ├── ScrollFloat/
│ │ │ ├── ScrollFloat.css
│ │ │ └── ScrollFloat.jsx
│ │ ├── ScrollReveal/
│ │ │ ├── ScrollReveal.css
│ │ │ └── ScrollReveal.jsx
│ │ ├── ScrollVelocity/
│ │ │ ├── ScrollVelocity.css
│ │ │ └── ScrollVelocity.jsx
│ │ ├── ShinyText/
│ │ │ ├── ShinyText.css
│ │ │ └── ShinyText.jsx
│ │ ├── Shuffle/
│ │ │ ├── Shuffle.css
│ │ │ └── Shuffle.jsx
│ │ ├── SplitText/
│ │ │ └── SplitText.jsx
│ │ ├── TextCursor/
│ │ │ ├── TextCursor.css
│ │ │ └── TextCursor.jsx
│ │ ├── TextPressure/
│ │ │ └── TextPressure.jsx
│ │ ├── TextType/
│ │ │ ├── TextType.css
│ │ │ └── TextType.jsx
│ │ ├── TrueFocus/
│ │ │ ├── TrueFocus.css
│ │ │ └── TrueFocus.jsx
│ │ └── VariableProximity/
│ │ ├── VariableProximity.css
│ │ └── VariableProximity.jsx
│ ├── css/
│ │ ├── category.css
│ │ ├── docs.css
│ │ ├── landing.css
│ │ ├── misc.css
│ │ ├── showcase.css
│ │ ├── sidebar.css
│ │ ├── skeleton.css
│ │ ├── transitions.css
│ │ └── variables.css
│ ├── demo/
│ │ ├── Animations/
│ │ │ ├── AnimatedContentDemo.jsx
│ │ │ ├── AntigravityDemo.jsx
│ │ │ ├── BlobCursorDemo.jsx
│ │ │ ├── ClickSparkDemo.jsx
│ │ │ ├── CrosshairDemo.jsx
│ │ │ ├── CubesDemo.jsx
│ │ │ ├── ElectricBorderDemo.jsx
│ │ │ ├── FadeContentDemo.jsx
│ │ │ ├── GhostCursorDemo.jsx
│ │ │ ├── GlareHoverDemo.jsx
│ │ │ ├── GradualBlurDemo.jsx
│ │ │ ├── ImageTrailDemo.jsx
│ │ │ ├── LaserFlowDemo.jsx
│ │ │ ├── LogoLoopDemo.jsx
│ │ │ ├── MagicRingsDemo.jsx
│ │ │ ├── MagnetDemo.jsx
│ │ │ ├── MagnetLinesDemo.jsx
│ │ │ ├── MetaBallsDemo.jsx
│ │ │ ├── MetallicPaintDemo.jsx
│ │ │ ├── NoiseDemo.jsx
│ │ │ ├── OrbitImagesDemo.jsx
│ │ │ ├── PixelTrailDemo.jsx
│ │ │ ├── PixelTransitionDemo.jsx
│ │ │ ├── RibbonsDemo.jsx
│ │ │ ├── ShapeBlurDemo.jsx
│ │ │ ├── SplashCursorDemo.jsx
│ │ │ ├── StarBorderDemo.jsx
│ │ │ ├── StickerPeelDemo.jsx
│ │ │ └── TargetCursorDemo.jsx
│ │ ├── Backgrounds/
│ │ │ ├── AuroraDemo.jsx
│ │ │ ├── BalatroDemo.jsx
│ │ │ ├── BallpitDemo.jsx
│ │ │ ├── BeamsDemo.jsx
│ │ │ ├── ColorBendsDemo.jsx
│ │ │ ├── DarkVeilDemo.jsx
│ │ │ ├── DitherDemo.jsx
│ │ │ ├── DotGridDemo.jsx
│ │ │ ├── EvilEyeDemo.jsx
│ │ │ ├── FaultyTerminalDemo.jsx
│ │ │ ├── FloatingLinesDemo.jsx
│ │ │ ├── GalaxyDemo.jsx
│ │ │ ├── GradientBlindsDemo.jsx
│ │ │ ├── GrainientDemo.jsx
│ │ │ ├── GridDistortionDemo.jsx
│ │ │ ├── GridMotionDemo.jsx
│ │ │ ├── GridScanDemo.jsx
│ │ │ ├── HyperspeedDemo.jsx
│ │ │ ├── IridescenceDemo.jsx
│ │ │ ├── LetterGlitchDemo.jsx
│ │ │ ├── LightPillarDemo.jsx
│ │ │ ├── LightRaysDemo.jsx
│ │ │ ├── LightningDemo.jsx
│ │ │ ├── LineWavesDemo.jsx
│ │ │ ├── LiquidChromeDemo.jsx
│ │ │ ├── LiquidEtherDemo.jsx
│ │ │ ├── OrbDemo.jsx
│ │ │ ├── ParticlesDemo.jsx
│ │ │ ├── PixelBlastDemo.jsx
│ │ │ ├── PixelSnowDemo.jsx
│ │ │ ├── PlasmaDemo.jsx
│ │ │ ├── PrismDemo.jsx
│ │ │ ├── PrismaticBurstDemo.jsx
│ │ │ ├── RadarDemo.jsx
│ │ │ ├── RippleGridDemo.jsx
│ │ │ ├── ShapeGridDemo.jsx
│ │ │ ├── SilkDemo.jsx
│ │ │ ├── SoftAuroraDemo.jsx
│ │ │ ├── ThreadsDemo.jsx
│ │ │ └── WavesDemo.jsx
│ │ ├── Components/
│ │ │ ├── AnimatedListDemo.jsx
│ │ │ ├── BorderGlowDemo.jsx
│ │ │ ├── BounceCardsDemo.jsx
│ │ │ ├── BubbleMenuDemo.jsx
│ │ │ ├── CardNavDemo.jsx
│ │ │ ├── CardSwapDemo.jsx
│ │ │ ├── CarouselDemo.jsx
│ │ │ ├── ChromaGridDemo.jsx
│ │ │ ├── CircularGalleryDemo.jsx
│ │ │ ├── CounterDemo.jsx
│ │ │ ├── DecayCardDemo.jsx
│ │ │ ├── DockDemo.jsx
│ │ │ ├── DomeGalleryDemo.jsx
│ │ │ ├── ElasticSliderDemo.jsx
│ │ │ ├── FlowingMenuDemo.jsx
│ │ │ ├── FluidGlassDemo.jsx
│ │ │ ├── FlyingPostersDemo.jsx
│ │ │ ├── FolderDemo.jsx
│ │ │ ├── GlassIconsDemo.jsx
│ │ │ ├── GlassSurfaceDemo.jsx
│ │ │ ├── GooeyNavDemo.jsx
│ │ │ ├── InfiniteMenuDemo.jsx
│ │ │ ├── LanyardDemo.jsx
│ │ │ ├── MagicBentoDemo.jsx
│ │ │ ├── MasonryDemo.jsx
│ │ │ ├── ModelViewerDemo.jsx
│ │ │ ├── PillNavDemo.jsx
│ │ │ ├── PixelCardDemo.jsx
│ │ │ ├── ProfileCardDemo.jsx
│ │ │ ├── ReflectiveCardDemo.jsx
│ │ │ ├── ScrollStackDemo.jsx
│ │ │ ├── SpotlightCardDemo.jsx
│ │ │ ├── StackDemo.jsx
│ │ │ ├── StaggeredMenuDemo.jsx
│ │ │ ├── StepperDemo.jsx
│ │ │ └── TiltedCardDemo.jsx
│ │ └── TextAnimations/
│ │ ├── ASCIITextDemo.jsx
│ │ ├── BlurTextDemo.jsx
│ │ ├── CircularTextDemo.jsx
│ │ ├── CountUpDemo.jsx
│ │ ├── CurvedLoopDemo.jsx
│ │ ├── DecryptedTextDemo.jsx
│ │ ├── FallingTextDemo.jsx
│ │ ├── FuzzyTextDemo.jsx
│ │ ├── GlitchTextDemo.jsx
│ │ ├── GradientTextDemo.jsx
│ │ ├── RotatingTextDemo.jsx
│ │ ├── ScrambledTextDemo.jsx
│ │ ├── ScrollFloatDemo.jsx
│ │ ├── ScrollRevealDemo.jsx
│ │ ├── ScrollVelocityDemo.jsx
│ │ ├── ShinyTextDemo.jsx
│ │ ├── ShuffleDemo.jsx
│ │ ├── SplitTextDemo.jsx
│ │ ├── TextCursorDemo.jsx
│ │ ├── TextPressureDemo.jsx
│ │ ├── TextTypeDemo.jsx
│ │ ├── TrueFocusDemo.jsx
│ │ └── VariableProximityDemo.jsx
│ ├── docs/
│ │ ├── CodeBlock.jsx
│ │ ├── DocsButtonBar.jsx
│ │ ├── Installation.jsx
│ │ ├── Introduction.jsx
│ │ ├── McpServer.jsx
│ │ └── MethodSelector.jsx
│ ├── global.d.ts
│ ├── hooks/
│ │ ├── useActiveRoute.js
│ │ ├── useComponentProps.js
│ │ ├── useComponentPropsContext.js
│ │ ├── useForceRerender.js
│ │ ├── useInstallation.js
│ │ ├── useScrollToTop.js
│ │ ├── useStars.js
│ │ └── useTransition.js
│ ├── main.jsx
│ ├── pages/
│ │ ├── CategoryPage.jsx
│ │ ├── FavoritesPage.jsx
│ │ ├── IndexPage.jsx
│ │ ├── LandingPage.jsx
│ │ ├── ShowcasePage.jsx
│ │ ├── SponsorsPage.jsx
│ │ └── ToolsPage.jsx
│ ├── styles.css
│ ├── tailwind/
│ │ ├── Animations/
│ │ │ ├── AnimatedContent/
│ │ │ │ └── AnimatedContent.jsx
│ │ │ ├── Antigravity/
│ │ │ │ └── Antigravity.jsx
│ │ │ ├── BlobCursor/
│ │ │ │ └── BlobCursor.jsx
│ │ │ ├── ClickSpark/
│ │ │ │ └── ClickSpark.jsx
│ │ │ ├── Crosshair/
│ │ │ │ └── Crosshair.jsx
│ │ │ ├── Cubes/
│ │ │ │ └── Cubes.jsx
│ │ │ ├── ElectricBorder/
│ │ │ │ └── ElectricBorder.jsx
│ │ │ ├── FadeContent/
│ │ │ │ └── FadeContent.jsx
│ │ │ ├── GhostCursor/
│ │ │ │ └── GhostCursor.jsx
│ │ │ ├── GlareHover/
│ │ │ │ └── GlareHover.jsx
│ │ │ ├── GradualBlur/
│ │ │ │ └── GradualBlur.jsx
│ │ │ ├── ImageTrail/
│ │ │ │ └── ImageTrail.jsx
│ │ │ ├── LaserFlow/
│ │ │ │ └── LaserFlow.jsx
│ │ │ ├── LogoLoop/
│ │ │ │ └── LogoLoop.jsx
│ │ │ ├── MagicRings/
│ │ │ │ └── MagicRings.jsx
│ │ │ ├── Magnet/
│ │ │ │ └── Magnet.jsx
│ │ │ ├── MagnetLines/
│ │ │ │ └── MagnetLines.jsx
│ │ │ ├── MetaBalls/
│ │ │ │ └── MetaBalls.jsx
│ │ │ ├── MetallicPaint/
│ │ │ │ └── MetallicPaint.jsx
│ │ │ ├── Noise/
│ │ │ │ └── Noise.jsx
│ │ │ ├── OrbitImages/
│ │ │ │ └── OrbitImages.jsx
│ │ │ ├── PixelTrail/
│ │ │ │ └── PixelTrail.jsx
│ │ │ ├── PixelTransition/
│ │ │ │ └── PixelTransition.jsx
│ │ │ ├── Ribbons/
│ │ │ │ └── Ribbons.jsx
│ │ │ ├── ShapeBlur/
│ │ │ │ └── ShapeBlur.jsx
│ │ │ ├── SplashCursor/
│ │ │ │ └── SplashCursor.jsx
│ │ │ ├── StarBorder/
│ │ │ │ └── StarBorder.jsx
│ │ │ ├── StickerPeel/
│ │ │ │ └── StickerPeel.jsx
│ │ │ └── TargetCursor/
│ │ │ └── TargetCursor.jsx
│ │ ├── Backgrounds/
│ │ │ ├── Aurora/
│ │ │ │ └── Aurora.jsx
│ │ │ ├── Balatro/
│ │ │ │ └── Balatro.jsx
│ │ │ ├── Ballpit/
│ │ │ │ └── Ballpit.jsx
│ │ │ ├── Beams/
│ │ │ │ └── Beams.jsx
│ │ │ ├── ColorBends/
│ │ │ │ └── ColorBends.jsx
│ │ │ ├── DarkVeil/
│ │ │ │ └── DarkVeil.jsx
│ │ │ ├── Dither/
│ │ │ │ └── Dither.jsx
│ │ │ ├── DotGrid/
│ │ │ │ └── DotGrid.jsx
│ │ │ ├── EvilEye/
│ │ │ │ └── EvilEye.jsx
│ │ │ ├── FaultyTerminal/
│ │ │ │ └── FaultyTerminal.jsx
│ │ │ ├── FloatingLines/
│ │ │ │ └── FloatingLines.jsx
│ │ │ ├── Galaxy/
│ │ │ │ └── Galaxy.jsx
│ │ │ ├── GradientBlinds/
│ │ │ │ └── GradientBlinds.jsx
│ │ │ ├── Grainient/
│ │ │ │ └── Grainient.jsx
│ │ │ ├── GridDistortion/
│ │ │ │ └── GridDistortion.jsx
│ │ │ ├── GridMotion/
│ │ │ │ └── GridMotion.jsx
│ │ │ ├── GridScan/
│ │ │ │ └── GridScan.jsx
│ │ │ ├── Hyperspeed/
│ │ │ │ ├── HyperSpeedPresets.js
│ │ │ │ └── Hyperspeed.jsx
│ │ │ ├── Iridescence/
│ │ │ │ └── Iridescence.jsx
│ │ │ ├── LetterGlitch/
│ │ │ │ └── LetterGlitch.jsx
│ │ │ ├── LightPillar/
│ │ │ │ └── LightPillar.jsx
│ │ │ ├── LightRays/
│ │ │ │ └── LightRays.jsx
│ │ │ ├── Lightning/
│ │ │ │ └── Lightning.jsx
│ │ │ ├── LineWaves/
│ │ │ │ └── LineWaves.jsx
│ │ │ ├── LiquidChrome/
│ │ │ │ └── LiquidChrome.jsx
│ │ │ ├── LiquidEther/
│ │ │ │ └── LiquidEther.jsx
│ │ │ ├── Orb/
│ │ │ │ └── Orb.jsx
│ │ │ ├── Particles/
│ │ │ │ └── Particles.jsx
│ │ │ ├── PixelBlast/
│ │ │ │ └── PixelBlast.jsx
│ │ │ ├── PixelSnow/
│ │ │ │ └── PixelSnow.jsx
│ │ │ ├── Plasma/
│ │ │ │ └── Plasma.jsx
│ │ │ ├── Prism/
│ │ │ │ └── Prism.jsx
│ │ │ ├── PrismaticBurst/
│ │ │ │ └── PrismaticBurst.jsx
│ │ │ ├── Radar/
│ │ │ │ └── Radar.jsx
│ │ │ ├── RippleGrid/
│ │ │ │ └── RippleGrid.jsx
│ │ │ ├── ShapeGrid/
│ │ │ │ └── ShapeGrid.jsx
│ │ │ ├── Silk/
│ │ │ │ └── Silk.jsx
│ │ │ ├── SoftAurora/
│ │ │ │ └── SoftAurora.jsx
│ │ │ ├── Threads/
│ │ │ │ └── Threads.jsx
│ │ │ └── Waves/
│ │ │ └── Waves.jsx
│ │ ├── Components/
│ │ │ ├── AnimatedList/
│ │ │ │ └── AnimatedList.jsx
│ │ │ ├── BorderGlow/
│ │ │ │ └── BorderGlow.jsx
│ │ │ ├── BounceCards/
│ │ │ │ └── BounceCards.jsx
│ │ │ ├── BubbleMenu/
│ │ │ │ └── BubbleMenu.jsx
│ │ │ ├── CardNav/
│ │ │ │ └── CardNav.jsx
│ │ │ ├── CardSwap/
│ │ │ │ └── CardSwap.jsx
│ │ │ ├── Carousel/
│ │ │ │ └── Carousel.jsx
│ │ │ ├── ChromaGrid/
│ │ │ │ └── ChromaGrid.jsx
│ │ │ ├── CircularGallery/
│ │ │ │ └── CircularGallery.jsx
│ │ │ ├── Counter/
│ │ │ │ └── Counter.jsx
│ │ │ ├── DecayCard/
│ │ │ │ └── DecayCard.jsx
│ │ │ ├── Dock/
│ │ │ │ └── Dock.jsx
│ │ │ ├── DomeGallery/
│ │ │ │ └── DomeGallery.jsx
│ │ │ ├── ElasticSlider/
│ │ │ │ └── ElasticSlider.jsx
│ │ │ ├── FlowingMenu/
│ │ │ │ └── FlowingMenu.jsx
│ │ │ ├── FluidGlass/
│ │ │ │ └── FluidGlass.jsx
│ │ │ ├── FlyingPosters/
│ │ │ │ └── FlyingPosters.jsx
│ │ │ ├── Folder/
│ │ │ │ └── Folder.jsx
│ │ │ ├── GlassIcons/
│ │ │ │ └── GlassIcons.jsx
│ │ │ ├── GlassSurface/
│ │ │ │ └── GlassSurface.jsx
│ │ │ ├── GooeyNav/
│ │ │ │ └── GooeyNav.jsx
│ │ │ ├── InfiniteMenu/
│ │ │ │ └── InfiniteMenu.jsx
│ │ │ ├── Lanyard/
│ │ │ │ ├── Lanyard.jsx
│ │ │ │ └── card.glb
│ │ │ ├── MagicBento/
│ │ │ │ └── MagicBento.jsx
│ │ │ ├── Masonry/
│ │ │ │ └── Masonry.jsx
│ │ │ ├── ModelViewer/
│ │ │ │ └── ModelViewer.jsx
│ │ │ ├── PillNav/
│ │ │ │ └── PillNav.jsx
│ │ │ ├── PixelCard/
│ │ │ │ └── PixelCard.jsx
│ │ │ ├── ProfileCard/
│ │ │ │ └── ProfileCard.jsx
│ │ │ ├── ReflectiveCard/
│ │ │ │ └── ReflectiveCard.jsx
│ │ │ ├── ScrollStack/
│ │ │ │ └── ScrollStack.jsx
│ │ │ ├── SpotlightCard/
│ │ │ │ └── SpotlightCard.jsx
│ │ │ ├── Stack/
│ │ │ │ └── Stack.jsx
│ │ │ ├── StaggeredMenu/
│ │ │ │ └── StaggeredMenu.jsx
│ │ │ ├── Stepper/
│ │ │ │ └── Stepper.jsx
│ │ │ └── TiltedCard/
│ │ │ └── TiltedCard.jsx
│ │ └── TextAnimations/
│ │ ├── ASCIIText/
│ │ │ └── ASCIIText.jsx
│ │ ├── BlurText/
│ │ │ └── BlurText.jsx
│ │ ├── CircularText/
│ │ │ └── CircularText.jsx
│ │ ├── CountUp/
│ │ │ └── CountUp.jsx
│ │ ├── CurvedLoop/
│ │ │ └── CurvedLoop.jsx
│ │ ├── DecryptedText/
│ │ │ └── DecryptedText.jsx
│ │ ├── FallingText/
│ │ │ └── FallingText.jsx
│ │ ├── FuzzyText/
│ │ │ └── FuzzyText.jsx
│ │ ├── GlitchText/
│ │ │ └── GlitchText.jsx
│ │ ├── GradientText/
│ │ │ └── GradientText.jsx
│ │ ├── RotatingText/
│ │ │ └── RotatingText.jsx
│ │ ├── ScrambledText/
│ │ │ └── ScrambledText.jsx
│ │ ├── ScrollFloat/
│ │ │ └── ScrollFloat.jsx
│ │ ├── ScrollReveal/
│ │ │ └── ScrollReveal.jsx
│ │ ├── ScrollVelocity/
│ │ │ └── ScrollVelocity.jsx
│ │ ├── ShinyText/
│ │ │ └── ShinyText.jsx
│ │ ├── Shuffle/
│ │ │ └── Shuffle.jsx
│ │ ├── SplitText/
│ │ │ └── SplitText.jsx
│ │ ├── TextCursor/
│ │ │ └── TextCursor.jsx
│ │ ├── TextPressure/
│ │ │ └── TextPressure.jsx
│ │ ├── TextType/
│ │ │ └── TextType.jsx
│ │ ├── TrueFocus/
│ │ │ └── TrueFocus.jsx
│ │ └── VariableProximity/
│ │ └── VariableProximity.jsx
│ ├── tools/
│ │ ├── background-studio/
│ │ │ ├── BackgroundStudio.jsx
│ │ │ ├── Controls.jsx
│ │ │ ├── backgrounds/
│ │ │ │ └── index.js
│ │ │ ├── hooks/
│ │ │ │ └── useBackgroundState.js
│ │ │ └── utils/
│ │ │ └── exportCode.js
│ │ ├── shape-magic/
│ │ │ ├── Canvas.jsx
│ │ │ ├── Controls.jsx
│ │ │ ├── ShapeMagic.jsx
│ │ │ ├── computeBridges.js
│ │ │ ├── svgRenderers.js
│ │ │ └── types.js
│ │ ├── texture-lab/
│ │ │ ├── Canvas.jsx
│ │ │ ├── Controls.jsx
│ │ │ ├── TextureLab.jsx
│ │ │ ├── renderer.js
│ │ │ ├── shaders.js
│ │ │ ├── types.js
│ │ │ └── utils.js
│ │ └── tools.css
│ ├── ts-default/
│ │ ├── Animations/
│ │ │ ├── AnimatedContent/
│ │ │ │ └── AnimatedContent.tsx
│ │ │ ├── Antigravity/
│ │ │ │ └── Antigravity.tsx
│ │ │ ├── BlobCursor/
│ │ │ │ ├── BlobCursor.css
│ │ │ │ └── BlobCursor.tsx
│ │ │ ├── ClickSpark/
│ │ │ │ └── ClickSpark.tsx
│ │ │ ├── Crosshair/
│ │ │ │ └── Crosshair.tsx
│ │ │ ├── Cubes/
│ │ │ │ ├── Cubes.css
│ │ │ │ └── Cubes.tsx
│ │ │ ├── ElectricBorder/
│ │ │ │ ├── ElectricBorder.css
│ │ │ │ └── ElectricBorder.tsx
│ │ │ ├── FadeContent/
│ │ │ │ └── FadeContent.tsx
│ │ │ ├── GhostCursor/
│ │ │ │ ├── GhostCursor.css
│ │ │ │ └── GhostCursor.tsx
│ │ │ ├── GlareHover/
│ │ │ │ ├── GlareHover.css
│ │ │ │ └── GlareHover.tsx
│ │ │ ├── GradualBlur/
│ │ │ │ ├── GradualBlur.css
│ │ │ │ └── GradualBlur.tsx
│ │ │ ├── ImageTrail/
│ │ │ │ ├── ImageTrail.css
│ │ │ │ └── ImageTrail.tsx
│ │ │ ├── LaserFlow/
│ │ │ │ ├── LaserFlow.css
│ │ │ │ └── LaserFlow.tsx
│ │ │ ├── LogoLoop/
│ │ │ │ ├── LogoLoop.css
│ │ │ │ └── LogoLoop.tsx
│ │ │ ├── MagicRings/
│ │ │ │ ├── MagicRings.css
│ │ │ │ └── MagicRings.tsx
│ │ │ ├── Magnet/
│ │ │ │ └── Magnet.tsx
│ │ │ ├── MagnetLines/
│ │ │ │ ├── MagnetLines.css
│ │ │ │ └── MagnetLines.tsx
│ │ │ ├── MetaBalls/
│ │ │ │ ├── MetaBalls.css
│ │ │ │ └── MetaBalls.tsx
│ │ │ ├── MetallicPaint/
│ │ │ │ ├── MetallicPaint.css
│ │ │ │ └── MetallicPaint.tsx
│ │ │ ├── Noise/
│ │ │ │ ├── Noise.css
│ │ │ │ └── Noise.tsx
│ │ │ ├── OrbitImages/
│ │ │ │ ├── OrbitImages.css
│ │ │ │ └── OrbitImages.tsx
│ │ │ ├── PixelTrail/
│ │ │ │ ├── PixelTrail.css
│ │ │ │ └── PixelTrail.tsx
│ │ │ ├── PixelTransition/
│ │ │ │ ├── PixelTransition.css
│ │ │ │ └── PixelTransition.tsx
│ │ │ ├── Ribbons/
│ │ │ │ ├── Ribbons.css
│ │ │ │ └── Ribbons.tsx
│ │ │ ├── ShapeBlur/
│ │ │ │ └── ShapeBlur.tsx
│ │ │ ├── SplashCursor/
│ │ │ │ └── SplashCursor.tsx
│ │ │ ├── StarBorder/
│ │ │ │ ├── StarBorder.css
│ │ │ │ └── StarBorder.tsx
│ │ │ ├── StickerPeel/
│ │ │ │ ├── StickerPeel.css
│ │ │ │ └── StickerPeel.tsx
│ │ │ └── TargetCursor/
│ │ │ ├── TargetCursor.css
│ │ │ └── TargetCursor.tsx
│ │ ├── Backgrounds/
│ │ │ ├── Aurora/
│ │ │ │ ├── Aurora.css
│ │ │ │ └── Aurora.tsx
│ │ │ ├── Balatro/
│ │ │ │ ├── Balatro.css
│ │ │ │ └── Balatro.tsx
│ │ │ ├── Ballpit/
│ │ │ │ └── Ballpit.tsx
│ │ │ ├── Beams/
│ │ │ │ ├── Beams.css
│ │ │ │ └── Beams.tsx
│ │ │ ├── ColorBends/
│ │ │ │ ├── ColorBends.css
│ │ │ │ └── ColorBends.tsx
│ │ │ ├── DarkVeil/
│ │ │ │ ├── DarkVeil.css
│ │ │ │ └── DarkVeil.tsx
│ │ │ ├── Dither/
│ │ │ │ ├── Dither.css
│ │ │ │ └── Dither.tsx
│ │ │ ├── DotGrid/
│ │ │ │ ├── DotGrid.css
│ │ │ │ └── DotGrid.tsx
│ │ │ ├── EvilEye/
│ │ │ │ ├── EvilEye.css
│ │ │ │ └── EvilEye.tsx
│ │ │ ├── FaultyTerminal/
│ │ │ │ ├── FaultyTerminal.css
│ │ │ │ └── FaultyTerminal.tsx
│ │ │ ├── FloatingLines/
│ │ │ │ ├── FloatingLines.css
│ │ │ │ └── FloatingLines.tsx
│ │ │ ├── Galaxy/
│ │ │ │ ├── Galaxy.css
│ │ │ │ └── Galaxy.tsx
│ │ │ ├── GradientBlinds/
│ │ │ │ ├── GradientBlinds.css
│ │ │ │ └── GradientBlinds.tsx
│ │ │ ├── Grainient/
│ │ │ │ ├── Grainient.css
│ │ │ │ └── Grainient.tsx
│ │ │ ├── GridDistortion/
│ │ │ │ ├── GridDistortion.css
│ │ │ │ └── GridDistortion.tsx
│ │ │ ├── GridMotion/
│ │ │ │ ├── GridMotion.css
│ │ │ │ └── GridMotion.tsx
│ │ │ ├── GridScan/
│ │ │ │ ├── GridScan.css
│ │ │ │ └── GridScan.tsx
│ │ │ ├── Hyperspeed/
│ │ │ │ ├── HyperSpeedPresets.ts
│ │ │ │ ├── Hyperspeed.css
│ │ │ │ └── Hyperspeed.tsx
│ │ │ ├── Iridescence/
│ │ │ │ ├── Iridescence.css
│ │ │ │ └── Iridescence.tsx
│ │ │ ├── LetterGlitch/
│ │ │ │ └── LetterGlitch.tsx
│ │ │ ├── LightPillar/
│ │ │ │ ├── LightPillar.css
│ │ │ │ └── LightPillar.tsx
│ │ │ ├── LightRays/
│ │ │ │ ├── LightRays.css
│ │ │ │ └── LightRays.tsx
│ │ │ ├── Lightning/
│ │ │ │ ├── Lightning.css
│ │ │ │ └── Lightning.tsx
│ │ │ ├── LineWaves/
│ │ │ │ ├── LineWaves.css
│ │ │ │ └── LineWaves.tsx
│ │ │ ├── LiquidChrome/
│ │ │ │ ├── LiquidChrome.css
│ │ │ │ └── LiquidChrome.tsx
│ │ │ ├── LiquidEther/
│ │ │ │ ├── LiquidEther.css
│ │ │ │ └── LiquidEther.tsx
│ │ │ ├── Orb/
│ │ │ │ ├── Orb.css
│ │ │ │ └── Orb.tsx
│ │ │ ├── Particles/
│ │ │ │ ├── Particles.css
│ │ │ │ └── Particles.tsx
│ │ │ ├── PixelBlast/
│ │ │ │ ├── PixelBlast.css
│ │ │ │ └── PixelBlast.tsx
│ │ │ ├── PixelSnow/
│ │ │ │ ├── PixelSnow.css
│ │ │ │ └── PixelSnow.tsx
│ │ │ ├── Plasma/
│ │ │ │ ├── Plasma.css
│ │ │ │ └── Plasma.tsx
│ │ │ ├── Prism/
│ │ │ │ ├── Prism.css
│ │ │ │ └── Prism.tsx
│ │ │ ├── PrismaticBurst/
│ │ │ │ ├── PrismaticBurst.css
│ │ │ │ └── PrismaticBurst.tsx
│ │ │ ├── Radar/
│ │ │ │ ├── Radar.css
│ │ │ │ └── Radar.tsx
│ │ │ ├── RippleGrid/
│ │ │ │ ├── RippleGrid.css
│ │ │ │ └── RippleGrid.tsx
│ │ │ ├── ShapeGrid/
│ │ │ │ ├── ShapeGrid.css
│ │ │ │ └── ShapeGrid.tsx
│ │ │ ├── Silk/
│ │ │ │ └── Silk.tsx
│ │ │ ├── SoftAurora/
│ │ │ │ ├── SoftAurora.css
│ │ │ │ └── SoftAurora.tsx
│ │ │ ├── Threads/
│ │ │ │ ├── Threads.css
│ │ │ │ └── Threads.tsx
│ │ │ └── Waves/
│ │ │ ├── Waves.css
│ │ │ └── Waves.tsx
│ │ ├── Components/
│ │ │ ├── AnimatedList/
│ │ │ │ ├── AnimatedList.css
│ │ │ │ └── AnimatedList.tsx
│ │ │ ├── BorderGlow/
│ │ │ │ ├── BorderGlow.css
│ │ │ │ └── BorderGlow.tsx
│ │ │ ├── BounceCards/
│ │ │ │ ├── BounceCards.css
│ │ │ │ └── BounceCards.tsx
│ │ │ ├── BubbleMenu/
│ │ │ │ ├── BubbleMenu.css
│ │ │ │ └── BubbleMenu.tsx
│ │ │ ├── CardNav/
│ │ │ │ ├── CardNav.css
│ │ │ │ └── CardNav.tsx
│ │ │ ├── CardSwap/
│ │ │ │ ├── CardSwap.css
│ │ │ │ └── CardSwap.tsx
│ │ │ ├── Carousel/
│ │ │ │ ├── Carousel.css
│ │ │ │ └── Carousel.tsx
│ │ │ ├── ChromaGrid/
│ │ │ │ ├── ChromaGrid.css
│ │ │ │ └── ChromaGrid.tsx
│ │ │ ├── CircularGallery/
│ │ │ │ ├── CircularGallery.css
│ │ │ │ └── CircularGallery.tsx
│ │ │ ├── Counter/
│ │ │ │ ├── Counter.css
│ │ │ │ └── Counter.tsx
│ │ │ ├── DecayCard/
│ │ │ │ ├── DecayCard.css
│ │ │ │ └── DecayCard.tsx
│ │ │ ├── Dock/
│ │ │ │ ├── Dock.css
│ │ │ │ └── Dock.tsx
│ │ │ ├── DomeGallery/
│ │ │ │ ├── DomeGallery.css
│ │ │ │ └── DomeGallery.tsx
│ │ │ ├── ElasticSlider/
│ │ │ │ ├── ElasticSlider.css
│ │ │ │ └── ElasticSlider.tsx
│ │ │ ├── FlowingMenu/
│ │ │ │ ├── FlowingMenu.css
│ │ │ │ └── FlowingMenu.tsx
│ │ │ ├── FluidGlass/
│ │ │ │ └── FluidGlass.tsx
│ │ │ ├── FlyingPosters/
│ │ │ │ ├── FlyingPosters.css
│ │ │ │ └── FlyingPosters.tsx
│ │ │ ├── Folder/
│ │ │ │ ├── Folder.css
│ │ │ │ └── Folder.tsx
│ │ │ ├── GlassIcons/
│ │ │ │ ├── GlassIcons.css
│ │ │ │ └── GlassIcons.tsx
│ │ │ ├── GlassSurface/
│ │ │ │ ├── GlassSurface.css
│ │ │ │ └── GlassSurface.tsx
│ │ │ ├── GooeyNav/
│ │ │ │ ├── GooeyNav.css
│ │ │ │ └── GooeyNav.tsx
│ │ │ ├── InfiniteMenu/
│ │ │ │ ├── InfiniteMenu.css
│ │ │ │ └── InfiniteMenu.tsx
│ │ │ ├── Lanyard/
│ │ │ │ ├── Lanyard.css
│ │ │ │ ├── Lanyard.tsx
│ │ │ │ └── card.glb
│ │ │ ├── MagicBento/
│ │ │ │ ├── MagicBento.css
│ │ │ │ └── MagicBento.tsx
│ │ │ ├── Masonry/
│ │ │ │ ├── Masonry.css
│ │ │ │ └── Masonry.tsx
│ │ │ ├── ModelViewer/
│ │ │ │ └── ModelViewer.tsx
│ │ │ ├── PillNav/
│ │ │ │ ├── PillNav.css
│ │ │ │ └── PillNav.tsx
│ │ │ ├── PixelCard/
│ │ │ │ ├── PixelCard.css
│ │ │ │ └── PixelCard.tsx
│ │ │ ├── ProfileCard/
│ │ │ │ ├── ProfileCard.css
│ │ │ │ └── ProfileCard.tsx
│ │ │ ├── ReflectiveCard/
│ │ │ │ ├── ReflectiveCard.css
│ │ │ │ └── ReflectiveCard.tsx
│ │ │ ├── ScrollStack/
│ │ │ │ ├── ScrollStack.css
│ │ │ │ └── ScrollStack.tsx
│ │ │ ├── SpotlightCard/
│ │ │ │ ├── SpotlightCard.css
│ │ │ │ └── SpotlightCard.tsx
│ │ │ ├── Stack/
│ │ │ │ ├── Stack.css
│ │ │ │ └── Stack.tsx
│ │ │ ├── StaggeredMenu/
│ │ │ │ ├── StaggeredMenu.css
│ │ │ │ └── StaggeredMenu.tsx
│ │ │ ├── Stepper/
│ │ │ │ ├── Stepper.css
│ │ │ │ └── Stepper.tsx
│ │ │ └── TiltedCard/
│ │ │ ├── TiltedCard.css
│ │ │ └── TiltedCard.tsx
│ │ └── TextAnimations/
│ │ ├── ASCIIText/
│ │ │ └── ASCIIText.tsx
│ │ ├── BlurText/
│ │ │ └── BlurText.tsx
│ │ ├── CircularText/
│ │ │ ├── CircularText.css
│ │ │ └── CircularText.tsx
│ │ ├── CountUp/
│ │ │ └── CountUp.tsx
│ │ ├── CurvedLoop/
│ │ │ ├── CurvedLoop.css
│ │ │ └── CurvedLoop.tsx
│ │ ├── DecryptedText/
│ │ │ └── DecryptedText.tsx
│ │ ├── FallingText/
│ │ │ ├── FallingText.css
│ │ │ └── FallingText.tsx
│ │ ├── FuzzyText/
│ │ │ └── FuzzyText.tsx
│ │ ├── GlitchText/
│ │ │ ├── GlitchText.css
│ │ │ └── GlitchText.tsx
│ │ ├── GradientText/
│ │ │ ├── GradientText.css
│ │ │ └── GradientText.tsx
│ │ ├── RotatingText/
│ │ │ ├── RotatingText.css
│ │ │ └── RotatingText.tsx
│ │ ├── ScrambledText/
│ │ │ ├── ScrambledText.css
│ │ │ └── ScrambledText.tsx
│ │ ├── ScrollFloat/
│ │ │ ├── ScrollFloat.css
│ │ │ └── ScrollFloat.tsx
│ │ ├── ScrollReveal/
│ │ │ ├── ScrollReveal.css
│ │ │ └── ScrollReveal.tsx
│ │ ├── ScrollVelocity/
│ │ │ ├── ScrollVelocity.css
│ │ │ └── ScrollVelocity.tsx
│ │ ├── ShinyText/
│ │ │ ├── ShinyText.css
│ │ │ └── ShinyText.tsx
│ │ ├── Shuffle/
│ │ │ ├── Shuffle.css
│ │ │ └── Shuffle.tsx
│ │ ├── SplitText/
│ │ │ └── SplitText.tsx
│ │ ├── TextCursor/
│ │ │ ├── TextCursor.css
│ │ │ └── TextCursor.tsx
│ │ ├── TextPressure/
│ │ │ └── TextPressure.tsx
│ │ ├── TextType/
│ │ │ ├── TextType.css
│ │ │ └── TextType.tsx
│ │ ├── TrueFocus/
│ │ │ ├── TrueFocus.css
│ │ │ └── TrueFocus.tsx
│ │ └── VariableProximity/
│ │ ├── VariableProximity.css
│ │ └── VariableProximity.tsx
│ ├── ts-tailwind/
│ │ ├── Animations/
│ │ │ ├── AnimatedContent/
│ │ │ │ └── AnimatedContent.tsx
│ │ │ ├── Antigravity/
│ │ │ │ └── Antigravity.tsx
│ │ │ ├── BlobCursor/
│ │ │ │ └── BlobCursor.tsx
│ │ │ ├── ClickSpark/
│ │ │ │ └── ClickSpark.tsx
│ │ │ ├── Crosshair/
│ │ │ │ └── Crosshair.tsx
│ │ │ ├── Cubes/
│ │ │ │ └── Cubes.tsx
│ │ │ ├── ElectricBorder/
│ │ │ │ └── ElectricBorder.tsx
│ │ │ ├── FadeContent/
│ │ │ │ └── FadeContent.tsx
│ │ │ ├── GhostCursor/
│ │ │ │ └── GhostCursor.tsx
│ │ │ ├── GlareHover/
│ │ │ │ └── GlareHover.tsx
│ │ │ ├── GradualBlur/
│ │ │ │ └── GradualBlur.tsx
│ │ │ ├── ImageTrail/
│ │ │ │ └── ImageTrail.tsx
│ │ │ ├── LaserFlow/
│ │ │ │ └── LaserFlow.tsx
│ │ │ ├── LogoLoop/
│ │ │ │ └── LogoLoop.tsx
│ │ │ ├── MagicRings/
│ │ │ │ └── MagicRings.tsx
│ │ │ ├── Magnet/
│ │ │ │ └── Magnet.tsx
│ │ │ ├── MagnetLines/
│ │ │ │ └── MagnetLines.tsx
│ │ │ ├── MetaBalls/
│ │ │ │ └── MetaBalls.tsx
│ │ │ ├── MetallicPaint/
│ │ │ │ └── MetallicPaint.tsx
│ │ │ ├── Noise/
│ │ │ │ └── Noise.tsx
│ │ │ ├── OrbitImages/
│ │ │ │ └── OrbitImages.tsx
│ │ │ ├── PixelTrail/
│ │ │ │ └── PixelTrail.tsx
│ │ │ ├── PixelTransition/
│ │ │ │ └── PixelTransition.tsx
│ │ │ ├── Ribbons/
│ │ │ │ └── Ribbons.tsx
│ │ │ ├── ShapeBlur/
│ │ │ │ └── ShapeBlur.tsx
│ │ │ ├── SplashCursor/
│ │ │ │ └── SplashCursor.tsx
│ │ │ ├── StarBorder/
│ │ │ │ └── StarBorder.tsx
│ │ │ ├── StickerPeel/
│ │ │ │ └── StickerPeel.tsx
│ │ │ └── TargetCursor/
│ │ │ └── TargetCursor.tsx
│ │ ├── Backgrounds/
│ │ │ ├── Aurora/
│ │ │ │ └── Aurora.tsx
│ │ │ ├── Balatro/
│ │ │ │ └── Balatro.tsx
│ │ │ ├── Ballpit/
│ │ │ │ └── Ballpit.tsx
│ │ │ ├── Beams/
│ │ │ │ └── Beams.tsx
│ │ │ ├── ColorBends/
│ │ │ │ └── ColorBends.tsx
│ │ │ ├── DarkVeil/
│ │ │ │ └── DarkVeil.tsx
│ │ │ ├── Dither/
│ │ │ │ └── Dither.tsx
│ │ │ ├── DotGrid/
│ │ │ │ └── DotGrid.tsx
│ │ │ ├── EvilEye/
│ │ │ │ └── EvilEye.tsx
│ │ │ ├── FaultyTerminal/
│ │ │ │ └── FaultyTerminal.tsx
│ │ │ ├── FloatingLines/
│ │ │ │ └── FloatingLines.tsx
│ │ │ ├── Galaxy/
│ │ │ │ └── Galaxy.tsx
│ │ │ ├── GradientBlinds/
│ │ │ │ └── GradientBlinds.tsx
│ │ │ ├── Grainient/
│ │ │ │ └── Grainient.tsx
│ │ │ ├── GridDistortion/
│ │ │ │ └── GridDistortion.tsx
│ │ │ ├── GridMotion/
│ │ │ │ └── GridMotion.tsx
│ │ │ ├── GridScan/
│ │ │ │ └── GridScan.tsx
│ │ │ ├── Hyperspeed/
│ │ │ │ ├── HyperSpeedPresets.ts
│ │ │ │ └── Hyperspeed.tsx
│ │ │ ├── Iridescence/
│ │ │ │ └── Iridescence.tsx
│ │ │ ├── LetterGlitch/
│ │ │ │ └── LetterGlitch.tsx
│ │ │ ├── LightPillar/
│ │ │ │ └── LightPillar.tsx
│ │ │ ├── LightRays/
│ │ │ │ └── LightRays.tsx
│ │ │ ├── Lightning/
│ │ │ │ └── Lightning.tsx
│ │ │ ├── LineWaves/
│ │ │ │ └── LineWaves.tsx
│ │ │ ├── LiquidChrome/
│ │ │ │ └── LiquidChrome.tsx
│ │ │ ├── LiquidEther/
│ │ │ │ └── LiquidEther.tsx
│ │ │ ├── Orb/
│ │ │ │ └── Orb.tsx
│ │ │ ├── Particles/
│ │ │ │ └── Particles.tsx
│ │ │ ├── PixelBlast/
│ │ │ │ └── PixelBlast.tsx
│ │ │ ├── PixelSnow/
│ │ │ │ └── PixelSnow.tsx
│ │ │ ├── Plasma/
│ │ │ │ └── Plasma.tsx
│ │ │ ├── Prism/
│ │ │ │ └── Prism.tsx
│ │ │ ├── PrismaticBurst/
│ │ │ │ └── PrismaticBurst.tsx
│ │ │ ├── Radar/
│ │ │ │ └── Radar.tsx
│ │ │ ├── RippleGrid/
│ │ │ │ └── RippleGrid.tsx
│ │ │ ├── ShapeGrid/
│ │ │ │ └── ShapeGrid.tsx
│ │ │ ├── Silk/
│ │ │ │ └── Silk.tsx
│ │ │ ├── SoftAurora/
│ │ │ │ └── SoftAurora.tsx
│ │ │ ├── Threads/
│ │ │ │ └── Threads.tsx
│ │ │ └── Waves/
│ │ │ └── Waves.tsx
│ │ ├── Components/
│ │ │ ├── AnimatedList/
│ │ │ │ └── AnimatedList.tsx
│ │ │ ├── BorderGlow/
│ │ │ │ └── BorderGlow.tsx
│ │ │ ├── BounceCards/
│ │ │ │ └── BounceCards.tsx
│ │ │ ├── BubbleMenu/
│ │ │ │ └── BubbleMenu.tsx
│ │ │ ├── CardNav/
│ │ │ │ └── CardNav.tsx
│ │ │ ├── CardSwap/
│ │ │ │ └── CardSwap.tsx
│ │ │ ├── Carousel/
│ │ │ │ └── Carousel.tsx
│ │ │ ├── ChromaGrid/
│ │ │ │ └── ChromaGrid.tsx
│ │ │ ├── CircularGallery/
│ │ │ │ └── CircularGallery.tsx
│ │ │ ├── Counter/
│ │ │ │ └── Counter.tsx
│ │ │ ├── DecayCard/
│ │ │ │ └── DecayCard.tsx
│ │ │ ├── Dock/
│ │ │ │ └── Dock.tsx
│ │ │ ├── DomeGallery/
│ │ │ │ └── DomeGallery.tsx
│ │ │ ├── ElasticSlider/
│ │ │ │ └── ElasticSlider.tsx
│ │ │ ├── FlowingMenu/
│ │ │ │ └── FlowingMenu.tsx
│ │ │ ├── FluidGlass/
│ │ │ │ └── FluidGlass.tsx
│ │ │ ├── FlyingPosters/
│ │ │ │ └── FlyingPosters.tsx
│ │ │ ├── Folder/
│ │ │ │ └── Folder.tsx
│ │ │ ├── GlassIcons/
│ │ │ │ └── GlassIcons.tsx
│ │ │ ├── GlassSurface/
│ │ │ │ └── GlassSurface.tsx
│ │ │ ├── GooeyNav/
│ │ │ │ └── GooeyNav.tsx
│ │ │ ├── InfiniteMenu/
│ │ │ │ └── InfiniteMenu.tsx
│ │ │ ├── Lanyard/
│ │ │ │ ├── Lanyard.tsx
│ │ │ │ └── card.glb
│ │ │ ├── MagicBento/
│ │ │ │ └── MagicBento.tsx
│ │ │ ├── Masonry/
│ │ │ │ └── Masonry.tsx
│ │ │ ├── ModelViewer/
│ │ │ │ └── ModelViewer.tsx
│ │ │ ├── PillNav/
│ │ │ │ └── PillNav.tsx
│ │ │ ├── PixelCard/
│ │ │ │ └── PixelCard.tsx
│ │ │ ├── ProfileCard/
│ │ │ │ └── ProfileCard.tsx
│ │ │ ├── ReflectiveCard/
│ │ │ │ └── ReflectiveCard.tsx
│ │ │ ├── ScrollStack/
│ │ │ │ └── ScrollStack.tsx
│ │ │ ├── SpotlightCard/
│ │ │ │ └── SpotlightCard.tsx
│ │ │ ├── Stack/
│ │ │ │ └── Stack.tsx
│ │ │ ├── StaggeredMenu/
│ │ │ │ └── StaggeredMenu.tsx
│ │ │ ├── Stepper/
│ │ │ │ └── Stepper.tsx
│ │ │ └── TiltedCard/
│ │ │ └── TiltedCard.tsx
│ │ └── TextAnimations/
│ │ ├── ASCIIText/
│ │ │ └── ASCIIText.tsx
│ │ ├── BlurText/
│ │ │ └── BlurText.tsx
│ │ ├── CircularText/
│ │ │ └── CircularText.tsx
│ │ ├── CountUp/
│ │ │ └── CountUp.tsx
│ │ ├── CurvedLoop/
│ │ │ └── CurvedLoop.tsx
│ │ ├── DecryptedText/
│ │ │ └── DecryptedText.tsx
│ │ ├── FallingText/
│ │ │ └── FallingText.tsx
│ │ ├── FuzzyText/
│ │ │ └── FuzzyText.tsx
│ │ ├── GlitchText/
│ │ │ └── GlitchText.tsx
│ │ ├── GradientText/
│ │ │ └── GradientText.tsx
│ │ ├── RotatingText/
│ │ │ └── RotatingText.tsx
│ │ ├── ScrambledText/
│ │ │ └── ScrambledText.tsx
│ │ ├── ScrollFloat/
│ │ │ └── ScrollFloat.tsx
│ │ ├── ScrollReveal/
│ │ │ └── ScrollReveal.tsx
│ │ ├── ScrollVelocity/
│ │ │ └── ScrollVelocity.tsx
│ │ ├── ShinyText/
│ │ │ └── ShinyText.tsx
│ │ ├── Shuffle/
│ │ │ └── Shuffle.tsx
│ │ ├── SplitText/
│ │ │ └── SplitText.tsx
│ │ ├── TextCursor/
│ │ │ └── TextCursor.tsx
│ │ ├── TextPressure/
│ │ │ └── TextPressure.tsx
│ │ ├── TextType/
│ │ │ └── TextType.tsx
│ │ ├── TrueFocus/
│ │ │ └── TrueFocus.tsx
│ │ └── VariableProximity/
│ │ └── VariableProximity.tsx
│ ├── utils/
│ │ ├── animationUtils.js
│ │ ├── cli.js
│ │ ├── codeGeneration.js
│ │ ├── codeTheme.js
│ │ ├── customTheme.js
│ │ ├── favorites.js
│ │ ├── fuzzy.js
│ │ └── utils.js
│ └── vite-env.d.ts
├── tsconfig.json
├── vite.config.js
└── wrangler.jsonc
================================================
FILE CONTENTS
================================================
================================================
FILE: .assetsignore
================================================
default/**
tailwind/**
ts/**
================================================
FILE: .context/new-component.md
================================================
# React Bits – New Component Creation Context
This file provides complete, concrete context for an AI agent to reliably create new components in this repository. It is based on the OrbitImages component as a reference implementation.
---
## 0. Prerequisites
Run the scaffolding script first. It creates empty files and registers the component in `Components.js`, `Categories.js`, and `Information.js` automatically.
```bash
npm run new:component -- <Category> <ComponentName>
# Example: npm run new:component -- Animations OrbitImages
```
This creates:
- `src/content/<Category>/<ComponentName>/<ComponentName>.jsx` (empty)
- `src/content/<Category>/<ComponentName>/<ComponentName>.css` (empty)
- `src/tailwind/<Category>/<ComponentName>/<ComponentName>.jsx` (empty)
- `src/ts-default/<Category>/<ComponentName>/<ComponentName>.tsx` (empty)
- `src/ts-default/<Category>/<ComponentName>/<ComponentName>.css` (empty)
- `src/ts-tailwind/<Category>/<ComponentName>/<ComponentName>.tsx` (empty)
- `src/demo/<Category>/<ComponentName>Demo.jsx` (scaffold with Noise component placeholder)
- `src/constants/code/<Category>/<camelCaseName>Code.js` (empty)
- Entries in `Components.js`, `Categories.js`, `Information.js`
After scaffolding, you fill in the 8 files (4 variants + demo + code metadata + 2 CSS files for CSS variants).
---
## 1. Four Variant Rules
All four variants must produce **identical visual output and behavior**. The differences are only:
| Variant | Path | Language | Styling |
|---|---|---|---|
| JS + CSS | `src/content/…/<Name>.jsx` + `.css` | JavaScript | CSS classes imported via `./Name.css` |
| JS + Tailwind | `src/tailwind/…/<Name>.jsx` | JavaScript | Tailwind utility classes inline |
| TS + CSS | `src/ts-default/…/<Name>.tsx` + `.css` | TypeScript | CSS classes imported via `./Name.css` |
| TS + Tailwind | `src/ts-tailwind/…/<Name>.tsx` | TypeScript | Tailwind utility classes inline |
### JS + CSS variant rules
- Import `'./ComponentName.css'`
- Use named CSS classes for layout/styling (e.g. `.orbit-container`, `.orbit-item`)
- No TypeScript, no type annotations
- Props destructured with defaults in function signature
- `export default function ComponentName({ ... }) {}`
### JS + Tailwind variant rules
- **No** CSS import
- Replace every CSS class with Tailwind utility classes inline
- Same logic, same props, same defaults as JS+CSS
### TS + CSS variant rules
- Same CSS file content (duplicated into `ts-default/`)
- Import `'./ComponentName.css'`
- Add TypeScript `interface` for props
- Add `type` aliases for union types
- Type all refs: `useRef<HTMLDivElement>(null)`
- Type function params and return types for helpers
- Type motion values: `MotionValue<number>`
### TS + Tailwind variant rules
- **No** CSS import
- TypeScript interfaces + types (same as TS+CSS)
- Tailwind utility classes inline (same as JS+Tailwind)
- **No `cn()` utility**
### CSS file conventions
- Use component-scoped class names prefixed with component name (e.g. `.orbit-container`, `.orbit-item`)
- The CSS file in `ts-default/` is an exact copy of the one in `content/`
- Keep styles minimal – only what's needed for layout/positioning
---
## 2. Demo File Pattern
Location: `src/demo/<Category>/<ComponentName>Demo.jsx`
### Standard imports
```jsx
import { useMemo } from 'react';
import { Flex } from '@chakra-ui/react'; // or Box, depending on layout needs
import { CodeTab, PreviewTab, TabsLayout } from '../../components/common/TabsLayout';
import Customize from '../../components/common/Preview/Customize';
import PreviewSlider from '../../components/common/Preview/PreviewSlider';
import PreviewSwitch from '../../components/common/Preview/PreviewSwitch';
import PreviewSelect from '../../components/common/Preview/PreviewSelect';
import CodeExample from '../../components/code/CodeExample';
import RefreshButton from '../../components/common/Preview/RefreshButton';
import PropTable from '../../components/common/Preview/PropTable';
import Dependencies from '../../components/code/Dependencies';
import useForceRerender from '../../hooks/useForceRerender';
import useComponentProps from '../../hooks/useComponentProps';
import { ComponentPropsProvider } from '../../components/context/ComponentPropsContext';
// Import the JS+CSS component (always from content/)
import ComponentName from '../../content/<Category>/<ComponentName>/<ComponentName>';
// Import code metadata
import { camelCaseName } from '../../constants/code/<Category>/<camelCaseName>Code';
```
### Demo structure
```jsx
const DEFAULT_PROPS = {
// Only include props that have demo controls
someProp: defaultValue,
};
const ComponentNameDemo = () => {
const [key, forceRerender] = useForceRerender();
const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
const { someProp } = props;
const propData = useMemo(() => [
// ALL public props documented, not just controlled ones
{ name: 'propName', type: 'type', default: 'value', description: 'Description.' },
], []);
return (
<ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
<TabsLayout>
<PreviewTab>
<Flex overflow="hidden" justifyContent="center" alignItems="center"
minH="400px" position="relative" className="demo-container">
<ComponentName key={key} {...controlledProps} />
<RefreshButton onClick={forceRerender} />
</Flex>
<Customize>
{/* Controls here */}
</Customize>
<PropTable data={propData} />
<Dependencies dependencyList={['dep1']} />
</PreviewTab>
<CodeTab>
<CodeExample codeObject={camelCaseName} componentName="ComponentName" />
</CodeTab>
</TabsLayout>
</ComponentPropsProvider>
);
};
export default ComponentNameDemo;
```
### Control types
```jsx
// Slider
<PreviewSlider
title="Label"
min={0} max={100} step={1}
value={propValue}
valueUnit="px" // optional suffix
onChange={val => { updateProp('propName', val); forceRerender(); }}
/>
// Switch (boolean toggle)
<PreviewSwitch
title="Label"
isChecked={propValue}
onChange={checked => { updateProp('propName', checked); forceRerender(); }}
/>
// Select (dropdown)
<PreviewSelect
title="Label"
name="unique-name"
width={140}
value={propValue}
options={[{ label: 'Display', value: 'value' }]}
onChange={val => { updateProp('propName', val); forceRerender(); }}
/>
```
### When to call `forceRerender()`
- Always call it for props that affect animation initialization or layout
- For live-updating props (like autoplay toggle), it may not be needed
- When in doubt, call it
---
## 3. Code Metadata File
Location: `src/constants/code/<Category>/<camelCaseName>Code.js`
```js
import code from '@content/<Category>/<ComponentName>/<ComponentName>.jsx?raw';
import css from '@content/<Category>/<ComponentName>/<ComponentName>.css?raw';
import tailwind from '@tailwind/<Category>/<ComponentName>/<ComponentName>.jsx?raw';
import tsCode from '@ts-default/<Category>/<ComponentName>/<ComponentName>.tsx?raw';
import tsTailwind from '@ts-tailwind/<Category>/<ComponentName>/<ComponentName>.tsx?raw';
export const camelCaseName = {
dependencies: `dep1 dep2`, // space-separated npm package names
usage: `import ComponentName from './ComponentName'
<ComponentName
prop1={value1}
prop2={value2}
/>`,
code,
css,
tailwind,
tsCode,
tsTailwind
};
```
- `dependencies`: space-separated string of npm packages (e.g. `"motion"`, `"gsap"`)
- `usage`: JSX code snippet showing basic usage (imports + JSX)
- Path aliases: `@content`, `@tailwind`, `@ts-default`, `@ts-tailwind` map to `src/content`, `src/tailwind`, etc.
- The `?raw` suffix imports file contents as a raw string (Vite feature)
---
## 4. Registration (Auto-generated by scaffolding)
These are handled by `npm run new:component` but for reference:
### `src/constants/Components.js`
```js
'kebab-case-name': () => import('../demo/<Category>/<ComponentName>Demo')
```
### `src/constants/Categories.js`
Component name added to the category's subcategories array and optionally to `NEW` array:
```js
export const NEW = ['Component Name', ...];
// And in the subcategories:
{ heading: 'Category', subcategories: ['Component Name', ...] }
```
### `src/constants/Information.js`
```js
'Category/ComponentName': {
videoUrl: '/assets/video/componentname.webm',
description: 'Short description.',
category: 'Category',
name: 'ComponentName',
docsUrl: 'https://reactbits.dev/category/kebab-case-name',
tags: []
},
```
---
## 5. Background Studio (backgrounds only)
If the component is in the `Backgrounds` category, also register it in:
`src/tools/background-studio/backgrounds/index.js`
And add `OpenInStudioButton` to the demo:
```jsx
import OpenInStudioButton from '../../components/common/Preview/OpenInStudioButton';
// After the preview, before <Customize>:
<Flex justify="flex-end" mt={2} mb={-2}>
<OpenInStudioButton
backgroundId="kebab-case-id"
currentProps={{ ...controlledProps }}
defaultProps={DEFAULT_PROPS}
/>
</Flex>
```
---
## 6. Naming Conventions
| Context | Format | Example |
|---|---|---|
| Component name | PascalCase | `OrbitImages` |
| File names | PascalCase matching component | `OrbitImages.jsx` |
| CSS class prefix | kebab-case component name | `.orbit-container` |
| Route slug | kebab-case | `orbit-images` |
| Code metadata export | camelCase | `orbitImages` |
| Code metadata file | camelCase + `Code.js` | `orbitImagesCode.js` |
| Category display name | Space-separated | `Orbit Images` |
| Folder name | PascalCase | `OrbitImages/` |
---
## 7. Checklist
Before considering a component complete:
- [ ] All 4 variant files are implemented with identical behavior
- [ ] CSS files in `content/` and `ts-default/` are identical
- [ ] TS variants have proper interfaces and type annotations
- [ ] Demo imports from `content/` (JS+CSS variant)
- [ ] Demo has `DEFAULT_PROPS`, `useComponentProps`, `ComponentPropsProvider`
- [ ] Demo has `RefreshButton`, `Customize` controls, `PropTable`, `Dependencies`
- [ ] Demo has `CodeTab` with `CodeExample`
- [ ] Code metadata uses `?raw` imports with correct path aliases
- [ ] Code metadata has `dependencies`, `usage`, `code`, `css`, `tailwind`, `tsCode`, `tsTailwind`
- [ ] Component is registered in `Components.js`, `Categories.js`, and `Information.js`
- [ ] Props/defaults are consistent across component, demo, and code metadata usage example
================================================
FILE: .eslintrc.cjs
================================================
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended'
],
ignorePatterns: ['dist', '.eslintrc.cjs', 'public/default', 'public/tailwind', 'public/ts', 'public/r'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '19.0' } },
plugins: ['react-refresh'],
rules: {
'react/prop-types': 'off',
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]
}
};
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: #
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
thanks_dev: # Replace with a single thanks.dev username
custom: ['https://reactbits.dev/sponsors']
================================================
FILE: .github/ISSUE_TEMPLATE/1-bug-report.yml
================================================
name: 🐞 Bug report
description: Help improve React Bits.
labels: ['bug']
title: '[BUG]: '
body:
- type: markdown
attributes:
value: |
## Thanks for trying to improve React Bits!
Before continuing make sure you have checked other issues to see if your issue has already been reported / addressed.
- type: textarea
id: desc
attributes:
label: Describe the issue
description: What is happening right now? What is supposed to happen?
placeholder: When I do ..., it does ... but it should do ...
validations:
required: true
- type: markdown
attributes:
value: |
## Reproduction
Please provide code snippets/screenshots and, if possible/needed, a codesandbox environment where your bug can be reproduced.
- type: input
id: reproduction-link
attributes:
label: Reproduction Link
description: Link a codesandbox environment you used to reproduce.
placeholder: https://github.com/DavidHDev/react-bits
validations:
required: false
- type: textarea
id: repro-steps
attributes:
label: Steps to reproduce
description: What steps should be taken to reproduce your issue.
validations:
required: true
- type: checkboxes
id: terms
attributes:
label: Validations
description: Please make sure you have checked all of the following.
options:
- label: I have checked other issues to see if my issue was already reported or addressed
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/2-feature-request.yml
================================================
name: 💡 Feature Request
description: Suggest something for React Bits.
labels: ['enhancement']
title: '[FEAT]: '
body:
- type: markdown
attributes:
value: |
## Thanks for trying to improve React Bits!
Before continuing make sure you have checked other issues to see if your idea has already been discussed / addressed.
- type: textarea
id: desc
attributes:
label: Share your suggestion
description: What would you like to see in React Bits?
placeholder: I want flying pigs in a component please
validations:
required: true
- type: checkboxes
id: terms
attributes:
label: Validations
description: Please make sure you have checked all of the following.
options:
- label: I have checked other issues to see if my issue was already discussed or addressed
required: true
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
components-mcp.json
scripts/mcp.js
node_modules
dist
dist-ssr
*.local
components.json
public/default
public/tailwind
public/ts/default
public/ts/tailwind
AGENTS.md
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.wrangler
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: .prettierignore
================================================
# Dependencies
node_modules/
# Build outputs
dist/
build/
public/
# OS files
.DS_Store
Thumbs.db
# IDE files
.vscode/
.idea/
# Logs
*.log
# Cache
.cache/
.parcel-cache/
.next/
.vite/
# Environment files
.env
.env.local
.env.*.local
# Generated files
coverage/
*.tsbuildinfo
registry.json
# Other
Components.js
Categories.js
Information.js
================================================
FILE: .prettierrc
================================================
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"printWidth": 120,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "lf",
"vueIndentScriptAndStyle": false,
"htmlWhitespaceSensitivity": "ignore",
"bracketSameLine": false,
"singleAttributePerLine": false
}
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to React Bits
Thank you for considering contributing to React Bits! I appreciate your interest in making this project better.
To ensure a smooth collaboration, please read the following guidelines before getting started.
## Issue Tracker
We use the GitHub issue tracker to keep track of bugs, feature requests, and other project-related discussions. Before starting to work on a new feature or bug fix, please check the issue tracker to see if there's an existing issue or discussion related to it. If not, feel free to create a new issue.
## Branch Naming
When creating branches for your contributions, please follow the following naming convention:
`feat/<feature-name>`
For example, if you are working on a feature related to adding a new component, your branch name could be `feat/fix-x-component`. This naming convention helps us to easily track and associate contributions with their respective features.
## Pull Requests
We welcome pull requests from everyone as long as they respect the quality standards of this project. To submit a pull request, please follow these steps:
1. Fork the repository and create a new branch based on the branch naming convention mentioned above.
2. Make your changes in the new branch.
3. Submit a pull request to the main repository's `main` branch.
4. Provide a clear and descriptive title for your pull request, along with a detailed description of the changes you have made, and screenshots/videos where possible.
5. For components updates, ensure that changes are reflected in all related files. Each component change must be updated in all 4 variants of that particular component.
6. Before you open a pull request, please make sure that your changes are tested locally, and everything looks good on desktop and mobile, also check the browser console for errors, and so on, so that we can keep this library at the highest quality possible.
7. Any pull requests that fail to meet these requirements will be denied, so please make sure you respect them so that your work can go through.
## Note
New components from the community are currently not being accepted into the library, only component enhancements and bug fixes are open for contributions.
## Conclusion
I appreciate your interest in contributing! By following these guidelines, you can help us maintain a healthy and productive open-source community. I value your contributions and look forward to your pull requests!
If you have any questions or need further assistance, please don't hesitate to reach out to us through the issue tracker or other communication channels mentioned in the project's documentation.
Happy contributing!
================================================
FILE: LICENSE.md
================================================
MIT + Commons Clause License Condition v1.0
Copyright (c) 2026 David Haz
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, and distribute the Software **as part of an application, website, or product**, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
## Commons Clause Restriction
You may use this Software, including for any commercial purpose, **so long as you do not sell, sublicense, or redistribute the components themselves-whether alone, in a bundle, or as a ported version.**
## No Warranty
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<div align="center">
<br>
<br>
<picture>
<source media="(prefers-color-scheme: light)" srcset="src/assets/logos/reactbits-gh-black.svg">
<source media="(prefers-color-scheme: dark)" srcset="src/assets/logos/reactbits-gh-white.svg">
<img src="src/assets/logos/reactbits-gh-black.svg" alt="react-bits logo" width="600">
</picture>
<br>
<br>
<strong>The largest & most creative library of animated React components.</strong>
<br />
<sub>Stand out with 110+ free, customizable animations for text, backgrounds, and UI.</sub>
<br>
<br>
<a href="https://github.com/davidhdev/react-bits/stargazers"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/davidhdev/react-bits"></a>
<a href="https://github.com/davidhdev/react-bits/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/badge/License-MIT+Commons_Clause-magenta"></a>
<br>
<br>
<a href="https://reactbits.dev/">📖 Documentation</a> · <a href="https://reactbits.dev/get-started/installation">⚡ Quick Start</a> · <a href="https://reactbits.dev/tools">🛠️ Tools</a>
</div>
<br />
<div align="center">
<img src="src/assets/common/readme-showcase.png" alt="React Bits component showcase" width="1000">
</div>
<br />
## ✨ Why React Bits?
React Bits helps you **ship stunning interfaces faster**. Instead of spending hours crafting animations from scratch, grab a polished component and customize it to fit your vision.
> 💬 **Text Animations** · 🌀 **Animations** · 🧩 **Components** · 🖼️ **Backgrounds**
## 🚀 Features
- **110+ components** — text animations, UI elements, and backgrounds, growing weekly
- **Minimal dependencies** — lightweight and tree-shakeable
- **Fully customizable** — tweak everything via props or edit the source directly
- **4 variants per component** — JS-CSS, JS-TW, TS-CSS, TS-TW (everyone's happy)
- **Copy-paste ready** — works with any modern React project
## 🛠️ Creative Tools
<div align="center">
<img src="src/assets/common/tools-readme.webp" alt="React Bits Tools" width="1000" style="border-radius: 30px; max-width: 1920px;">
</div>
<hr />
### Beyond components, React Bits offers **free creative tools** to supercharge your workflow:
| Tool | What it does |
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **[Background Studio](https://reactbits.dev/tools)** | Explore animated backgrounds, customize effects, export as video/image/code |
| **[Shape Magic](https://reactbits.dev/tools)** | Create inner rounded corners between shapes, export as SVG, React code or clip-path code |
| **[Texture Lab](https://reactbits.dev/tools)** | Apply 20+ effects (noise, dithering, ASCII) to images/videos and export in high quality |
## 📦 Installation
React Bits supports [shadcn](https://ui.shadcn.com/) and [jsrepo](https://jsrepo.dev) for quick CLI installs.
```bash
# Example: Add a component via shadcn
npx shadcn@latest add @react-bits/BlurText-TS-TW
```
Each component page includes copy-ready CLI commands. See the [installation guide](https://reactbits.dev/get-started/installation) for full details.
You can also select your preferred technologies, and copy the code manually.
## 🚀 Sponsors
React Bits is proudly supported by these amazing sponsors:
### Diamond
<a href="https://www.shadcnblocks.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcnblocks.svg">
<source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnblocks-lightmode.svg">
<img src="public/assets/sponsors/shadcnblocks.svg" alt="shadcnblocks.com" style="height: 50px;">
</picture>
</a>
<a href="https://shadcnstudio.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcnstudio.svg">
<source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnstudio-lightmode.svg">
<img src="public/assets/sponsors/shadcnstudio.svg" alt="shadcn studio" style="height: 50px;">
</picture>
</a>
### Silver
<a href="https://nextjsweekly.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/nextjsweekly.svg">
<source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/nextjsweekly-lightmode.svg">
<img src="public/assets/sponsors/nextjsweekly.svg" alt="Next.js Weekly" style="height: 40px;">
</picture>
</a>
<a href="https://shadcraft.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcraft.svg">
<source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcraft-lightmode.png">
<img src="public/assets/sponsors/shadcraft.svg" alt="Shadcraft" style="height: 40px;">
</picture>
</a>
<a href="https://shadcnspace.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcnspace.svg">
<source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnspace-lightmode.svg">
<img src="public/assets/sponsors/shadcnspace.svg" alt="shadcnspace" style="height: 40px;">
</picture>
</a>
<hr />
**[Become a sponsor](https://reactbits.dev/sponsors)** — Get your brand in front of 500K+ developers monthly.
## 🤝 Contributing
We'd love your help! Check the [open issues](https://github.com/DavidHDev/react-bits/issues) or submit ideas via the [feature request template](https://github.com/DavidHDev/react-bits/issues/new?template=2-feature-request.yml).
Please read the [contribution guide](https://github.com/DavidHDev/react-bits/blob/main/CONTRIBUTING.md) first — thanks for making React Bits better!
## 🙌 Contributors
<a href="https://github.com/davidhdev/react-bits/graphs/contributors">
<img src="https://contrib.rocks/image?repo=davidhdev/react-bits" />
</a>
## 👤 Maintainer
**[David Haz](https://github.com/DavidHDev)** — creator & lead maintainer
## 🌐 Official Ports
| Framework | Link |
| --------- | ------------------------------------- |
| Vue.js | [vue-bits.dev](https://vue-bits.dev/) |
## 📊 Stats
## 🗳️ Credit
React Bits occasionally draws inspiration from publicly available code examples. These are rewritten as full-fledged, customizable components for JS, TS, CSS, and Tailwind. If you recognize your work, [open an issue](https://github.com/DavidHDev/react-bits/issues) to request credit.
## 📄 License
[MIT + Commons Clause](https://github.com/davidhdev/react-bits/blob/main/LICENSE.md) — free for personal and commercial use.
================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en" style="background: #060010">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1GF5NXTV27"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-1GF5NXTV27');
</script>
<!-- Basic Meta Tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#060010" />
<meta name="author" content="David Haz" />
<meta
name="description"
content="An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces."
/>
<meta
name="keywords"
content="React, React tutorials, React tips, React best practices, React development, React guides, React articles, React ecosystem, JavaScript, frontend development, ReactJS, UI Library, Component Library, React Components, React Animations"
/>
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Figtree:wght@200..800&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet"
/>
<!-- Icons -->
<link rel="icon" type="image/svg+xml" sizes="16x16 32x32" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="React Bits" />
<link rel="manifest" href="/site.webmanifest" />
<!-- Open Graph (OG) - Facebook, LinkedIn, etc. -->
<meta property="og:type" content="website" />
<meta property="og:title" content="React Bits" />
<meta
property="og:description"
content="An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces."
/>
<meta property="og:image" content="https://reactbits.dev/og-pic.png" />
<meta property="og:image:alt" content="The React Bits landing page design, showcasing the logo and a subtitle!" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://reactbits.dev" />
<meta property="og:site_name" content="React Bits" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card - Twitter Sharing -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="React Bits" />
<meta
name="twitter:description"
content="An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces."
/>
<meta name="twitter:image" content="https://reactbits.dev/og-pic.png" />
<meta name="twitter:image:alt" content="The React Bits landing page design, showcasing the logo and a subtitle!" />
<!-- Favicon & Apple Touch Icons -->
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<!-- Canonical & Robots Meta Tags -->
<link rel="canonical" href="https://reactbits.dev" />
<meta name="robots" content="index, follow" />
<!-- Structured Data (JSON-LD for SEO) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "React Bits",
"url": "https://reactbits.dev",
"description": "An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.",
"image": "https://reactbits.dev/og-pic.png",
"author": {
"@type": "Person",
"name": "David Haz"
},
"publisher": {
"@type": "Person",
"name": "David Haz",
"logo": {
"@type": "ImageObject",
"url": "https://davidhaz.com"
}
}
}
</script>
<title>React Bits - Animated UI Components For React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
================================================
FILE: jsrepo.config.ts
================================================
import { defineConfig, type RegistryItem } from 'jsrepo';
import { output } from '@jsrepo/shadcn';
import { type Category, componentMetadata, type Variant } from './src/constants/Information';
// Components that have non-code assets which should use manual dependency resolution.
// Key format: `${category}/${title}` to keep it unique.
const MANUAL_ASSETS: Record<string, { path: string; dependencyResolution: 'manual' }[]> = {
'Components/Lanyard': [
{ path: 'card.glb', dependencyResolution: 'manual' },
{ path: 'lanyard.png', dependencyResolution: 'manual' }
]
// Example: if ModelViewer had a model file you wanted to mark as manual too:
// 'Components/ModelViewer': [
// { path: 'model.glb', dependencyResolution: 'manual' }
// ]
};
export default defineConfig({
registry: {
name: '@react-bits',
description:
'An open source collection of animated, interactive & fully customizable React components for building stunning, memorable user interfaces.',
homepage: 'https://reactbits.dev',
authors: ['David Haz'],
bugs: 'https://github.com/DavidHDev/react-bits/issues',
repository: 'https://github.com/DavidHDev/react-bits',
tags: [
'react',
'javascript',
'components',
'web',
'reactjs',
'css-animations',
'component-library',
'ui-components',
'3d',
'ui-library',
'tailwind',
'tailwindcss',
'components',
'components-library'
],
excludeDeps: ['react'],
outputs: [output({ dir: 'public/r', format: true })],
items: [
...Object.values(componentMetadata).map(component =>
defineComponent({
title: component.name,
description: component.description,
category: component.category,
categories: [component.category],
meta: component.meta,
variants: component.variants
})
)
].flat()
}
});
/**
* Define a component to be exposed from the registry. Creates the 4 different variants of the component and ensures the correct files are included.
*
* @param title The title of the component.
* @param description The description of the component.
* @param category The category of the component.
* @param categories Organize the component into multiple categories.
* @param meta Optional meta data for the component.
* @param variants The variants of the component that are available through the registry (default: all variants)
* @returns An array of RegistryItem objects.
*/
function defineComponent({
title,
description,
category,
categories,
meta,
variants = ['JS-CSS', 'JS-TW', 'TS-CSS', 'TS-TW']
}: {
title: string;
description: string;
category: Category;
categories?: string[];
meta?: Record<string, string>;
variants?: readonly Variant[];
}): RegistryItem[] {
const baseItem: Omit<RegistryItem, 'files' | 'name'> = {
title,
description,
type: 'registry:component',
categories: [category, ...(categories ?? [])],
meta
};
// Unique key for this component in MANUAL_ASSETS
const key = `${category}/${title}`;
const manualFiles = MANUAL_ASSETS[key] && MANUAL_ASSETS[key].length > 0 ? MANUAL_ASSETS[key] : [];
const withManualFiles = (basePath: string) =>
manualFiles.length > 0
? [
{
path: basePath,
files: manualFiles
}
]
: [
{
path: basePath
}
];
// this might warrant a bit of explanation
// basically we check if the variant is included in the variants array and if so we return the item as part of an array
// otherwise we return an empty array
// we then spread that array empty or otherwise into the return array
return [
// JS + CSS
...(variants.includes('JS-CSS')
? [
{
...baseItem,
name: `${baseItem.title}-JS-CSS`,
files: withManualFiles(`src/content/${category}/${title}`)
}
]
: []),
// JS + Tailwind
...(variants.includes('JS-TW')
? [
{
...baseItem,
name: `${baseItem.title}-JS-TW`,
files: withManualFiles(`src/tailwind/${category}/${title}`)
}
]
: []),
// TS + CSS
...(variants.includes('TS-CSS')
? [
{
...baseItem,
name: `${baseItem.title}-TS-CSS`,
files: withManualFiles(`src/ts-default/${category}/${title}`)
}
]
: []),
// TS + Tailwind
...(variants.includes('TS-TW')
? [
{
...baseItem,
name: `${baseItem.title}-TS-TW`,
files: withManualFiles(`src/ts-tailwind/${category}/${title}`)
}
]
: [])
];
}
================================================
FILE: package.json
================================================
{
"name": "react-bits",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "concurrently -n \"registry,docs\" -c \"blue,green\" \"npm run registry:dev\" \"vite\"",
"build": "npm run registry:build && npm run llms:text && npm run sitemap && vite build",
"new:component": "node scripts/generateComponent.js",
"llms:text": "node ./scripts/generateLlmsText.js",
"sitemap": "node ./scripts/generateSitemap.js",
"registry:build": "jsrepo build",
"registry:dev": "jsrepo build --watch",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier --write ."
},
"dependencies": {
"@chakra-ui/icons": "^2.2.4",
"@chakra-ui/react": "^3.20.0",
"@emotion/react": "^11.14.0",
"@gsap/react": "^2.1.2",
"@react-three/drei": "^10.7.4",
"@react-three/fiber": "^9.3.0",
"@react-three/postprocessing": "^3.0.4",
"@react-three/rapier": "^2.1.0",
"@tailwindcss/vite": "^4.0.3",
"@use-gesture/react": "^10.2.27",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"face-api.js": "^0.22.2",
"gl-matrix": "^3.4.3",
"gsap": "^3.13.0",
"lenis": "^1.3.13",
"lucide-react": "^0.542.0",
"maath": "^0.10.8",
"mathjs": "^14.6.0",
"matter-js": "^0.20.0",
"meshline": "^3.3.1",
"motion": "^12.23.12",
"next-themes": "^0.4.6",
"nuqs": "^2.8.6",
"ogl": "^1.0.11",
"postprocessing": "^6.36.0",
"react": "^19.0.0",
"react-confetti": "^6.2.2",
"react-dom": "^19.0.0",
"react-haiku": "^2.2.0",
"react-icons": "^5.5.0",
"react-router-dom": "^6.30.1",
"react-syntax-highlighter": "^15.6.1",
"react-virtualized": "^9.22.6",
"sonner": "^1.7.1",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^4.0.3",
"three": "^0.167.1"
},
"devDependencies": {
"@jsrepo/shadcn": "^2.0.0",
"@types/matter-js": "^0.19.8",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@types/three": "^0.180.0",
"@vitejs/plugin-react": "^4.3.4",
"concurrently": "^9.1.2",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.3",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"jsrepo": "^3.2.0",
"postcss-safe-parser": "^7.0.1",
"prettier": "^3.6.2",
"tw-animate-css": "^1.4.0",
"typescript": "^5.7.3",
"vite": "^5.3.4"
}
}
================================================
FILE: public/README.md
================================================
<div align="center"> <img src="https://github.com/EnderRomantice/react-bits/blob/main/public/favicon-32x32.png" alt="react-bits logo" height="200"></div>
<div align="center">
Welcome to React Bits, the go-to open source library for high quality animated React components!
</div>
================================================
FILE: public/llms.txt
================================================
# React Bits
> React Bits is an open source collection of memorable UI elements - Components, Animations, Backgrounds, and Text Animations - provided in four implementation variants: JavaScript + CSS, JavaScript + Tailwind, TypeScript + CSS, and TypeScript + Tailwind. Components are copy-friendly and installable via CLI (jsrepo or shadcn).
Important notes for agents:
- Components are organized by semantics first: UI Components, Animations, Backgrounds, Text Animations.
- Each component has 4 variants. All variants are kept in sync when updated.
- Dependencies vary by component (e.g., gsap, motion, three, ogl). Always check and install dependencies before usage.
## Docs
- [Homepage](https://www.reactbits.dev): Landing page, quick presentation of the library, testimonials.
- [Introduction](https://www.reactbits.dev/get-started/introduction): Project mission and principles.
- [Installation](https://www.reactbits.dev/get-started/installation): Manual copy and CLI commands (jsrepo, shadcn).
- [MCP Setup](https://www.reactbits.dev/get-started/mcp): Set up a MCP server to help you with development.
## CLI
- shadcn: `npx shadcn@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>`
- <LANG>: JS | TS; <STYLE>: CSS | TW
- Example: npx shadcn@latest add https://reactbits.dev/r/SplitText-JS-CSS
- jsrepo: `npx jsrepo@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>`
- <LANG>: JS | TS; <STYLE>: CSS | TW
- Example: npx jsrepo@latest add https://reactbits.dev/r/SplitText-JS-CSS
Notes:
- Component page URLs use kebab-case paths like /text-animations/split-text.
- CLI component identifiers use PascalCase, e.g. SplitText.
## Text Animations
- [ASCII Text](https://www.reactbits.dev/text-animations/ascii-text): Renders text with an animated ASCII background for a retro feel. CLI: `ASCIIText`.
- [Blur Text](https://www.reactbits.dev/text-animations/blur-text): Text starts blurred then crisply resolves for a soft-focus reveal effect. CLI: `BlurText`.
- [Circular Text](https://www.reactbits.dev/text-animations/circular-text): Layouts characters around a circle with optional rotation animation. CLI: `CircularText`.
- [Count Up](https://www.reactbits.dev/text-animations/count-up): Animated number counter supporting formatting and decimals. CLI: `CountUp`.
- [Curved Loop](https://www.reactbits.dev/text-animations/curved-loop): Flowing looping text path along a customizable curve with drag interaction. CLI: `CurvedLoop`.
- [Decrypted Text](https://www.reactbits.dev/text-animations/decrypted-text): Hacker-style decryption cycling random glyphs until resolving to real text. CLI: `DecryptedText`.
- [Falling Text](https://www.reactbits.dev/text-animations/falling-text): Characters fall with gravity + bounce creating a playful entrance. CLI: `FallingText`.
- [Fuzzy Text](https://www.reactbits.dev/text-animations/fuzzy-text): Vibrating fuzzy text with controllable hover intensity. CLI: `FuzzyText`.
- [Glitch Text](https://www.reactbits.dev/text-animations/glitch-text): RGB split and distortion glitch effect with jitter effects. CLI: `GlitchText`.
- [Gradient Text](https://www.reactbits.dev/text-animations/gradient-text): Animated gradient sweep across live text with speed and color control. CLI: `GradientText`.
- [Rotating Text](https://www.reactbits.dev/text-animations/rotating-text): Cycles through multiple phrases with 3D rotate / flip transitions. CLI: `RotatingText`.
- [Scrambled Text](https://www.reactbits.dev/text-animations/scrambled-text): Detects cursor position and applies a distortion effect to text. CLI: `ScrambledText`.
- [Scroll Float](https://www.reactbits.dev/text-animations/scroll-float): Text gently floats / parallax shifts on scroll. CLI: `ScrollFloat`.
- [Scroll Reveal](https://www.reactbits.dev/text-animations/scroll-reveal): Text gently unblurs and reveals on scroll. CLI: `ScrollReveal`.
- [Scroll Velocity](https://www.reactbits.dev/text-animations/scroll-velocity): Text marquee animatio - speed and distortion scale with user's scroll velocity. CLI: `ScrollVelocity`.
- [Shiny Text](https://www.reactbits.dev/text-animations/shiny-text): Metallic sheen sweeps across text producing a reflective highlight. CLI: `ShinyText`.
- [Shuffle](https://www.reactbits.dev/text-animations/shuffle): Animated text reveal where characters shuffle before settling. CLI: `Shuffle`.
- [Split Text](https://www.reactbits.dev/text-animations/split-text): Splits text into characters / words for staggered entrance animation. CLI: `SplitText`.
- [Text Cursor](https://www.reactbits.dev/text-animations/text-cursor): Make any text element follow your cursor, leaving a trail of copies behind it. CLI: `TextCursor`.
- [Text Pressure](https://www.reactbits.dev/text-animations/text-pressure): Characters scale / warp interactively based on pointer pressure zone. CLI: `TextPressure`.
- [Text Type](https://www.reactbits.dev/text-animations/text-type): Typewriter effect with blinking cursor and adjustable typing cadence. CLI: `TextType`.
- [True Focus](https://www.reactbits.dev/text-animations/true-focus): Applies dynamic blur / clarity based over a series of words in order. CLI: `TrueFocus`.
- [Variable Proximity](https://www.reactbits.dev/text-animations/variable-proximity): Letter styling changes continuously with pointer distance mapping. CLI: `VariableProximity`.
## Animations
- [Animated Content](https://www.reactbits.dev/animations/animated-content): Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options. CLI: `AnimatedContent`.
- [Antigravity](https://www.reactbits.dev/animations/antigravity): 3D antigravity particle field that repels from the cursor with smooth motion. CLI: `Antigravity`.
- [Blob Cursor](https://www.reactbits.dev/animations/blob-cursor): Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing. CLI: `BlobCursor`.
- [Click Spark](https://www.reactbits.dev/animations/click-spark): Creates particle spark bursts at click position. CLI: `ClickSpark`.
- [Crosshair](https://www.reactbits.dev/animations/crosshair): Custom crosshair cursor with tracking, and link hover effects. CLI: `Crosshair`.
- [Cubes](https://www.reactbits.dev/animations/cubes): 3D rotating cube cluster. Supports auto-rotation or hover interaction. CLI: `Cubes`.
- [Electric Border](https://www.reactbits.dev/animations/electric-border): Jittery electric energy border with animated arcs, glow and adjustable intensity. CLI: `ElectricBorder`.
- [Fade Content](https://www.reactbits.dev/animations/fade-content): Simple directional fade / slide entrance / exit wrapper with threshold-based activation. CLI: `FadeContent`.
- [Ghost Cursor](https://www.reactbits.dev/animations/ghost-cursor): Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect. CLI: `GhostCursor`.
- [Glare Hover](https://www.reactbits.dev/animations/glare-hover): Adds a realistic moving glare highlight on hover over any element. CLI: `GlareHover`.
- [Gradual Blur](https://www.reactbits.dev/animations/gradual-blur): Progressively un-blurs content based on scroll or trigger creating a cinematic reveal. CLI: `GradualBlur`.
- [Image Trail](https://www.reactbits.dev/animations/image-trail): Cursor-based image trail with several built-in variants. CLI: `ImageTrail`.
- [Laser Flow](https://www.reactbits.dev/animations/laser-flow): Dynamic laser light that flows onto a surface, customizable effect. CLI: `LaserFlow`.
- [Logo Loop](https://www.reactbits.dev/animations/logo-loop): Continuously looping marquee of brand or tech logos with seamless repeat and hover pause. CLI: `LogoLoop`.
- [Magic Rings](https://www.reactbits.dev/animations/magic-rings): Interactive magic rings effect with customizable parameters. CLI: `MagicRings`.
- [Magnet](https://www.reactbits.dev/animations/magnet): Elements magnetically ease toward the cursor then settle back with spring physics. CLI: `Magnet`.
- [Magnet Lines](https://www.reactbits.dev/animations/magnet-lines): Animated field lines bend toward the cursor. CLI: `MagnetLines`.
- [Meta Balls](https://www.reactbits.dev/animations/meta-balls): Liquid metaball blobs that merge and separate with smooth implicit surface animation. CLI: `MetaBalls`.
- [Metallic Paint](https://www.reactbits.dev/animations/metallic-paint): Liquid metallic paint shader which can be applied to SVG elements. CLI: `MetallicPaint`.
- [Noise](https://www.reactbits.dev/animations/noise): Animated film grain / noise overlay adding subtle texture and motion. CLI: `Noise`.
- [Orbit Images](https://www.reactbits.dev/animations/orbit-images): SVG Path customizable orbiting images effect. CLI: `OrbitImages`.
- [Pixel Trail](https://www.reactbits.dev/animations/pixel-trail): Pixelated cursor trail emitting fading squares with retro digital feel. CLI: `PixelTrail`.
- [Pixel Transition](https://www.reactbits.dev/animations/pixel-transition): Pixel dissolve transition for content reveal on hover. CLI: `PixelTransition`.
- [Ribbons](https://www.reactbits.dev/animations/ribbons): Flowing responsive ribbons/cursor trail driven by physics and pointer motion. CLI: `Ribbons`.
- [Shape Blur](https://www.reactbits.dev/animations/shape-blur): Morphing blurred geometric shape. The effect occurs on hover. CLI: `ShapeBlur`.
- [Splash Cursor](https://www.reactbits.dev/animations/splash-cursor): Liquid splash burst at cursor with curling ripples and waves. CLI: `SplashCursor`.
- [Star Border](https://www.reactbits.dev/animations/star-border): Animated star / sparkle border orbiting content with twinkle pulses. CLI: `StarBorder`.
- [Sticker Peel](https://www.reactbits.dev/animations/sticker-peel): Sticker corner lift + peel interaction using 3D transform and shadow depth. CLI: `StickerPeel`.
- [Target Cursor](https://www.reactbits.dev/animations/target-cursor): A cursor follow animation with 4 corners that lock onto targets. CLI: `TargetCursor`.
## Components
- [Animated List](https://www.reactbits.dev/components/animated-list): List items enter with staggered motion variants for polished reveals. CLI: `AnimatedList`.
- [Border Glow](https://www.reactbits.dev/components/border-glow): Glowing mesh-gradient border that follows cursor direction and intensifies near edges. CLI: `BorderGlow`.
- [Bounce Cards](https://www.reactbits.dev/components/bounce-cards): Cards bounce that bounce in on mount. CLI: `BounceCards`.
- [Bubble Menu](https://www.reactbits.dev/components/bubble-menu): Floating circular expanding menu with staggered item reveal. CLI: `BubbleMenu`.
- [Card Nav](https://www.reactbits.dev/components/card-nav): Expandable navigation bar with card panels revealing nested links. CLI: `CardNav`.
- [Card Swap](https://www.reactbits.dev/components/card-swap): Cards animate position swapping with smooth layout transitions. CLI: `CardSwap`.
- [Carousel](https://www.reactbits.dev/components/carousel): Responsive carousel with touch gestures, looping and transitions. CLI: `Carousel`.
- [Chroma Grid](https://www.reactbits.dev/components/chroma-grid): A responsive grid of grayscale tiles. Hovering the grid reaveals their colors. CLI: `ChromaGrid`.
- [Circular Gallery](https://www.reactbits.dev/components/circular-gallery): Circular orbit gallery rotating images. CLI: `CircularGallery`.
- [Counter](https://www.reactbits.dev/components/counter): Flexible animated counter supporting increments + easing. CLI: `Counter`.
- [Decay Card](https://www.reactbits.dev/components/decay-card): Hover parallax effect that disintegrates the content of a card. CLI: `DecayCard`.
- [Dock](https://www.reactbits.dev/components/dock): macOS style magnifying dock with proximity scaling of icons. CLI: `Dock`.
- [Dome Gallery](https://www.reactbits.dev/components/dome-gallery): Immersive 3D dome gallery projecting images on a hemispheric surface. CLI: `DomeGallery`.
- [Elastic Slider](https://www.reactbits.dev/components/elastic-slider): Slider handle stretches elastically then snaps with spring physics. CLI: `ElasticSlider`.
- [Flowing Menu](https://www.reactbits.dev/components/flowing-menu): Liquid flowing active indicator glides between menu items. CLI: `FlowingMenu`.
- [Fluid Glass](https://www.reactbits.dev/components/fluid-glass): Glassmorphism container with animated liquid distortion refraction. CLI: `FluidGlass`.
- [Flying Posters](https://www.reactbits.dev/components/flying-posters): 3D posters rotate on scroll infinitely. CLI: `FlyingPosters`.
- [Folder](https://www.reactbits.dev/components/folder): Interactive folder opens to reveal nested content smooth motion. CLI: `Folder`.
- [Glass Icons](https://www.reactbits.dev/components/glass-icons): Icon set styled with frosted glass blur. CLI: `GlassIcons`.
- [Glass Surface](https://www.reactbits.dev/components/glass-surface): Advanced Apple-style glass surface with real-time distortion + lighting. CLI: `GlassSurface`.
- [Gooey Nav](https://www.reactbits.dev/components/gooey-nav): Navigation indicator morphs with gooey blob transitions between items. CLI: `GooeyNav`.
- [Infinite Menu](https://www.reactbits.dev/components/infinite-menu): Horizontally looping menu effect that scrolls endlessly with seamless wrap. CLI: `InfiniteMenu`.
- [Lanyard](https://www.reactbits.dev/components/lanyard): Swinging 3D lanyard / badge card with realistic inertial motion. CLI: `Lanyard`.
- [Magic Bento](https://www.reactbits.dev/components/magic-bento): Interactive bento grid tiles expand + animate with various options. CLI: `MagicBento`.
- [Masonry](https://www.reactbits.dev/components/masonry): Responsive masonry layout with animated reflow + gaps optimization. CLI: `Masonry`.
- [Model Viewer](https://www.reactbits.dev/components/model-viewer): Three.js model viewer with orbit controls and lighting presets. CLI: `ModelViewer`.
- [Pill Nav](https://www.reactbits.dev/components/pill-nav): Minimal pill nav with sliding active highlight + smooth easing. CLI: `PillNav`.
- [Pixel Card](https://www.reactbits.dev/components/pixel-card): Card content revealed through pixel expansion transition. CLI: `PixelCard`.
- [Profile Card](https://www.reactbits.dev/components/profile-card): Animated profile card glare with 3D hover effect. CLI: `ProfileCard`.
- [Reflective Card](https://www.reactbits.dev/components/reflective-card): Card with dynamic webcam reflection and glare effects that respond to cursor movement. CLI: `ReflectiveCard`.
- [Scroll Stack](https://www.reactbits.dev/components/scroll-stack): Overlapping card stack reveals on scroll with depth layering. CLI: `ScrollStack`.
- [Spotlight Card](https://www.reactbits.dev/components/spotlight-card): Dynamic spotlight follows cursor casting gradient illumination. CLI: `SpotlightCard`.
- [Stack](https://www.reactbits.dev/components/stack): Layered stack with swipe animations, autoplay and smooth transitions. CLI: `Stack`.
- [Staggered Menu](https://www.reactbits.dev/components/staggered-menu): Menu with staggered item animations and smooth transitions on open/close. CLI: `StaggeredMenu`.
- [Stepper](https://www.reactbits.dev/components/stepper): Animated multi-step progress indicator with active state transitions. CLI: `Stepper`.
- [Tilted Card](https://www.reactbits.dev/components/tilted-card): 3D perspective tilt card reacting to pointer. CLI: `TiltedCard`.
## Backgrounds
- [Aurora](https://www.reactbits.dev/backgrounds/aurora): Flowing aurora gradient background. CLI: `Aurora`.
- [Balatro](https://www.reactbits.dev/backgrounds/balatro): The balatro shader, fully customizalbe and interactive. CLI: `Balatro`.
- [Ballpit](https://www.reactbits.dev/backgrounds/ballpit): Physics ball pit simulation with bouncing colorful spheres. CLI: `Ballpit`.
- [Beams](https://www.reactbits.dev/backgrounds/beams): Crossing animated ribbons with customizable properties. CLI: `Beams`.
- [Color Bends](https://www.reactbits.dev/backgrounds/color-bends): Vibrant color bends with smooth flowing animation. CLI: `ColorBends`.
- [Dark Veil](https://www.reactbits.dev/backgrounds/dark-veil): Subtle dark background with a smooth animation and postprocessing. CLI: `DarkVeil`.
- [Dither](https://www.reactbits.dev/backgrounds/dither): Retro dithered noise shader background. CLI: `Dither`.
- [Dot Grid](https://www.reactbits.dev/backgrounds/dot-grid): Animated dot grid with cursor interactions. CLI: `DotGrid`.
- [Evil Eye](https://www.reactbits.dev/backgrounds/evil-eye): Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow. CLI: `EvilEye`.
- [Faulty Terminal](https://www.reactbits.dev/backgrounds/faulty-terminal): Terminal CRT scanline squares effect with flicker + noise. CLI: `FaultyTerminal`.
- [Floating Lines](https://www.reactbits.dev/backgrounds/floating-lines): 3D floating lines that react to cursor movement. CLI: `FloatingLines`.
- [Galaxy](https://www.reactbits.dev/backgrounds/galaxy): Parallax realistic starfield with pointer interactions. CLI: `Galaxy`.
- [Gradient Blinds](https://www.reactbits.dev/backgrounds/gradient-blinds): Layered gradient blinds with spotlight and noise distortion. CLI: `GradientBlinds`.
- [Grainient](https://www.reactbits.dev/backgrounds/grainient): Grainy gradient swirls with soft wave distortion. CLI: `Grainient`.
- [Grid Distortion](https://www.reactbits.dev/backgrounds/grid-distortion): Warped grid mesh distorts smoothly reacting to cursor. CLI: `GridDistortion`.
- [Grid Motion](https://www.reactbits.dev/backgrounds/grid-motion): Perspective moving grid lines based on cusror position. CLI: `GridMotion`.
- [Grid Scan](https://www.reactbits.dev/backgrounds/grid-scan): Animated grid room 3D scan effect and cool interactions. CLI: `GridScan`.
- [Hyperspeed](https://www.reactbits.dev/backgrounds/hyperspeed): Animated lines continuously moving to simulate hyperspace travel on click hold. CLI: `Hyperspeed`.
- [Iridescence](https://www.reactbits.dev/backgrounds/iridescence): Slick iridescent shader with shifting waves. CLI: `Iridescence`.
- [Letter Glitch](https://www.reactbits.dev/backgrounds/letter-glitch): Matrix style letter animation. CLI: `LetterGlitch`.
- [Lightning](https://www.reactbits.dev/backgrounds/lightning): Procedural lightning bolts with branching and glow flicker. CLI: `Lightning`.
- [Light Pillar](https://www.reactbits.dev/backgrounds/light-pillar): Vertical pillar of light with glow effects. CLI: `LightPillar`.
- [Light Rays](https://www.reactbits.dev/backgrounds/light-rays): Volumetric light rays/beams with customizable direction. CLI: `LightRays`.
- [Line Waves](https://www.reactbits.dev/backgrounds/line-waves): Animated line wave pattern with colorful warped distortion. CLI: `LineWaves`.
- [Liquid Chrome](https://www.reactbits.dev/backgrounds/liquid-chrome): Liquid metallic chrome shader with flowing reflective surface. CLI: `LiquidChrome`.
- [Liquid Ether](https://www.reactbits.dev/backgrounds/liquid-ether): Interactive liquid shader with flowing distortion and customizable colors. CLI: `LiquidEther`.
- [Orb](https://www.reactbits.dev/backgrounds/orb): Floating energy orb with customizable hover effect. CLI: `Orb`.
- [Particles](https://www.reactbits.dev/backgrounds/particles): Configurable particle system. CLI: `Particles`.
- [Pixel Blast](https://www.reactbits.dev/backgrounds/pixel-blast): Exploding pixel particle bursts with optional liquid postprocessing. CLI: `PixelBlast`.
- [Pixel Snow](https://www.reactbits.dev/backgrounds/pixel-snow): Falling pixelated snow effect with customizable density and speed. CLI: `PixelSnow`.
- [Plasma](https://www.reactbits.dev/backgrounds/plasma): Organic plasma gradients swirl + morph with smooth turbulence. CLI: `Plasma`.
- [Prism](https://www.reactbits.dev/backgrounds/prism): Rotating prism with configurable intensity, size, and colors. CLI: `Prism`.
- [Prismatic Burst](https://www.reactbits.dev/backgrounds/prismatic-burst): Burst of light rays with controllable color, distortion, amount. CLI: `PrismaticBurst`.
- [Radar](https://www.reactbits.dev/backgrounds/radar): Radar sweep effect with concentric rings, radial spokes, and a rotating beam. CLI: `Radar`.
- [Ripple Grid](https://www.reactbits.dev/backgrounds/ripple-grid): A grid that continuously animates with a ripple effect. CLI: `RippleGrid`.
- [Shape Grid](https://www.reactbits.dev/backgrounds/shape-grid): Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization. CLI: `ShapeGrid`.
- [Silk](https://www.reactbits.dev/backgrounds/silk): Smooth waves background with soft lighting. CLI: `Silk`.
- [Soft Aurora](https://www.reactbits.dev/backgrounds/soft-aurora): Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes. CLI: `SoftAurora`.
- [Threads](https://www.reactbits.dev/backgrounds/threads): Animated pattern of lines forming a fabric-like motion. CLI: `Threads`.
- [Waves](https://www.reactbits.dev/backgrounds/waves): Layered lines that form smooth wave patterns with animation. CLI: `Waves`.
## Variants
- [JavaScript + CSS (default)](src/content): Plain CSS styling; copyable into any React app.
- [JavaScript + Tailwind](src/tailwind): Tailwind-first implementations of the same components.
- [TypeScript + CSS](src/ts-default): Typed variants with plain CSS.
- [TypeScript + Tailwind](src/ts-tailwind): Typed Tailwind variants.
## Key Dependencies
- [GSAP](https://gsap.com/docs/v3/): Animation engine used by many motion components.
- [Motion (Framer)](https://www.framer.com/motion/): Declarative motion primitives for enter/exit/stagger.
- [three.js](https://threejs.org/docs/): 3D engine for backgrounds and interactive visuals.
- [ogl](https://github.com/oframe/ogl): Lightweight WebGL; shader-driven backgrounds.
## MCP
- [MCP Setup](https://www.reactbits.dev/get-started/mcp): How AI agents can browse/search React Bits.
- [Model Context Protocol](https://modelcontextprotocol.io/): Protocol reference.
## Development
- [CONTRIBUTING.md](CONTRIBUTING.md): Workflow and quality gates; keep all 4 variants updated for component changes.
- [LICENSE](LICENSE.md): License information.
================================================
FILE: public/r/ASCIIText-JS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "ASCIIText-JS-CSS",
"title": "ASCIIText",
"description": "Renders text with an animated ASCII background for a retro feel.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "ASCIIText/ASCIIText.jsx",
"content": "// Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE\n\nimport { useEffect, useRef } from 'react';\nimport * as THREE from 'three';\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nMath.map = function (n, start, stop, start2, stop2) {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n};\n\nconst PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;\n\nclass AsciiFilter {\n constructor(renderer, { fontSize, fontFamily, charset, invert } = {}) {\n this.renderer = renderer;\n this.domElement = document.createElement('div');\n this.domElement.style.position = 'absolute';\n this.domElement.style.top = '0';\n this.domElement.style.left = '0';\n this.domElement.style.width = '100%';\n this.domElement.style.height = '100%';\n\n this.pre = document.createElement('pre');\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset = charset ?? ' .\\'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';\n\n this.context.webkitImageSmoothingEnabled = false;\n this.context.mozImageSmoothingEnabled = false;\n this.context.msImageSmoothingEnabled = false;\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener('mousemove', this.onMouseMove);\n }\n\n setSize(width, height) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText('A').width;\n\n this.cols = Math.floor(this.width / (this.fontSize * (charWidth / this.fontSize)));\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = '0';\n this.pre.style.padding = '0';\n this.pre.style.lineHeight = '1em';\n this.pre.style.position = 'absolute';\n this.pre.style.left = '0';\n this.pre.style.top = '0';\n this.pre.style.zIndex = '9';\n this.pre.style.backgroundAttachment = 'fixed';\n this.pre.style.mixBlendMode = 'difference';\n }\n\n render(scene, camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx, w, h) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = '';\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [imgData[i], imgData[i + 1], imgData[i + 2], imgData[i + 3]];\n\n if (a === 0) {\n str += ' ';\n continue;\n }\n\n let gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += '\\n';\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener('mousemove', this.onMouseMove);\n }\n}\n\nclass CanvasTxt {\n constructor(txt, { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' } = {}) {\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = this.color;\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\nclass CanvAscii {\n constructor(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves },\n containerElem,\n width,\n height\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000);\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: this.width / 2, y: this.height / 2 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n }\n\n async init() {\n try {\n await document.fonts.load('600 200px \"IBM Plex Mono\"');\n await document.fonts.load('500 12px \"IBM Plex Mono\"');\n } catch (e) {\n // Font loading failed, continue with fallback\n }\n await document.fonts.ready;\n\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: 'IBM Plex Mono',\n color: this.textColor\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }\n }\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: 'IBM Plex Mono',\n fontSize: this.asciiFontSize,\n invert: true\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener('mousemove', this.onMouseMove);\n this.container.addEventListener('touchmove', this.onMouseMove);\n }\n\n setSize(w, h) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n this.mesh.material.uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const x = Math.map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = Math.map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse(obj => {\n if (obj.isMesh && typeof obj.material === 'object' && obj.material !== null) {\n Object.keys(obj.material).forEach(key => {\n const matProp = obj.material[key];\n if (matProp !== null && typeof matProp === 'object' && typeof matProp.dispose === 'function') {\n matProp.dispose();\n }\n });\n obj.material.dispose();\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n if (this.filter) {\n this.filter.dispose();\n if (this.filter.domElement.parentNode) {\n this.container.removeChild(this.filter.domElement);\n }\n }\n this.container.removeEventListener('mousemove', this.onMouseMove);\n this.container.removeEventListener('touchmove', this.onMouseMove);\n this.clear();\n if (this.renderer) {\n this.renderer.dispose();\n this.renderer.forceContextLoss();\n }\n }\n}\n\nexport default function ASCIIText({\n text = 'David!',\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = '#fdf9f3',\n planeBaseHeight = 8,\n enableWaves = true\n}) {\n const containerRef = useRef(null);\n const asciiRef = useRef(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n let cancelled = false;\n let observer = null;\n let ro = null;\n\n const createAndInit = async (container, w, h) => {\n const instance = new CanvAscii(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves },\n container,\n w,\n h\n );\n await instance.init();\n return instance;\n };\n\n const setup = async () => {\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n if (width === 0 || height === 0) {\n observer = new IntersectionObserver(\n async ([entry]) => {\n if (cancelled) return;\n if (entry.isIntersecting && entry.boundingClientRect.width > 0 && entry.boundingClientRect.height > 0) {\n const { width: w, height: h } = entry.boundingClientRect;\n observer.disconnect();\n observer = null;\n\n if (!cancelled) {\n asciiRef.current = await createAndInit(containerRef.current, w, h);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n }\n }\n }\n },\n { threshold: 0.1 }\n );\n observer.observe(containerRef.current);\n return;\n }\n\n asciiRef.current = await createAndInit(containerRef.current, width, height);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n\n ro = new ResizeObserver(entries => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n }\n };\n\n setup();\n\n return () => {\n cancelled = true;\n if (observer) observer.disconnect();\n if (ro) ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n asciiRef.current = null;\n }\n };\n }, [text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves]);\n\n return (\n <div\n ref={containerRef}\n className=\"ascii-text-container\"\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%'\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n}\n"
}
],
"registryDependencies": [],
"dependencies": [
"three@^0.167.1"
]
}
================================================
FILE: public/r/ASCIIText-JS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "ASCIIText-JS-TW",
"title": "ASCIIText",
"description": "Renders text with an animated ASCII background for a retro feel.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "ASCIIText/ASCIIText.jsx",
"content": "// Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE\n\nimport { useEffect, useRef } from 'react';\nimport * as THREE from 'three';\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nMath.map = function (n, start, stop, start2, stop2) {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n};\n\nconst PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;\n\nclass AsciiFilter {\n constructor(renderer, { fontSize, fontFamily, charset, invert } = {}) {\n this.renderer = renderer;\n this.domElement = document.createElement('div');\n this.domElement.style.position = 'absolute';\n this.domElement.style.top = '0';\n this.domElement.style.left = '0';\n this.domElement.style.width = '100%';\n this.domElement.style.height = '100%';\n\n this.pre = document.createElement('pre');\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset = charset ?? ' .\\'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';\n\n this.context.webkitImageSmoothingEnabled = false;\n this.context.mozImageSmoothingEnabled = false;\n this.context.msImageSmoothingEnabled = false;\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener('mousemove', this.onMouseMove);\n }\n\n setSize(width, height) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText('A').width;\n\n this.cols = Math.floor(this.width / (this.fontSize * (charWidth / this.fontSize)));\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = '0';\n this.pre.style.padding = '0';\n this.pre.style.lineHeight = '1em';\n this.pre.style.position = 'absolute';\n this.pre.style.left = '0';\n this.pre.style.top = '0';\n this.pre.style.zIndex = '9';\n this.pre.style.backgroundAttachment = 'fixed';\n this.pre.style.mixBlendMode = 'difference';\n }\n\n render(scene, camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx, w, h) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = '';\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [imgData[i], imgData[i + 1], imgData[i + 2], imgData[i + 3]];\n\n if (a === 0) {\n str += ' ';\n continue;\n }\n\n let gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += '\\n';\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener('mousemove', this.onMouseMove);\n }\n}\n\nclass CanvasTxt {\n constructor(txt, { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' } = {}) {\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = this.color;\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\nclass CanvAscii {\n constructor(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves },\n containerElem,\n width,\n height\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000);\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: this.width / 2, y: this.height / 2 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n }\n\n async init() {\n try {\n await document.fonts.load('600 200px \"IBM Plex Mono\"');\n await document.fonts.load('500 12px \"IBM Plex Mono\"');\n } catch (e) {}\n await document.fonts.ready;\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: 'IBM Plex Mono',\n color: this.textColor\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }\n }\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: 'IBM Plex Mono',\n fontSize: this.asciiFontSize,\n invert: true\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener('mousemove', this.onMouseMove);\n this.container.addEventListener('touchmove', this.onMouseMove);\n }\n\n setSize(w, h) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n this.mesh.material.uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const x = Math.map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = Math.map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse(obj => {\n if (obj.isMesh && typeof obj.material === 'object' && obj.material !== null) {\n Object.keys(obj.material).forEach(key => {\n const matProp = obj.material[key];\n if (matProp !== null && typeof matProp === 'object' && typeof matProp.dispose === 'function') {\n matProp.dispose();\n }\n });\n obj.material.dispose();\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n if (this.filter) {\n this.filter.dispose();\n if (this.filter.domElement.parentNode) {\n this.container.removeChild(this.filter.domElement);\n }\n }\n this.container.removeEventListener('mousemove', this.onMouseMove);\n this.container.removeEventListener('touchmove', this.onMouseMove);\n this.clear();\n if (this.renderer) {\n this.renderer.dispose();\n this.renderer.forceContextLoss();\n }\n }\n}\n\nexport default function ASCIIText({\n text = 'David!',\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = '#fdf9f3',\n planeBaseHeight = 8,\n enableWaves = true\n}) {\n const containerRef = useRef(null);\n const asciiRef = useRef(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n let cancelled = false;\n let observer = null;\n let ro = null;\n\n const createAndInit = async (container, w, h) => {\n const instance = new CanvAscii(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves },\n container,\n w,\n h\n );\n await instance.init();\n return instance;\n };\n\n const setup = async () => {\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n if (width === 0 || height === 0) {\n observer = new IntersectionObserver(\n async ([entry]) => {\n if (cancelled) return;\n if (entry.isIntersecting && entry.boundingClientRect.width > 0 && entry.boundingClientRect.height > 0) {\n const { width: w, height: h } = entry.boundingClientRect;\n observer.disconnect();\n observer = null;\n\n if (!cancelled) {\n asciiRef.current = await createAndInit(containerRef.current, w, h);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n }\n }\n }\n },\n { threshold: 0.1 }\n );\n observer.observe(containerRef.current);\n return;\n }\n\n asciiRef.current = await createAndInit(containerRef.current, width, height);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n\n ro = new ResizeObserver(entries => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n }\n };\n\n setup();\n\n return () => {\n cancelled = true;\n if (observer) observer.disconnect();\n if (ro) ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n asciiRef.current = null;\n }\n };\n }, [text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves]);\n\n return (\n <div\n ref={containerRef}\n className=\"ascii-text-container\"\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%'\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n}\n"
}
],
"registryDependencies": [],
"dependencies": [
"three@^0.167.1"
]
}
================================================
FILE: public/r/ASCIIText-TS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "ASCIIText-TS-CSS",
"title": "ASCIIText",
"description": "Renders text with an animated ASCII background for a retro feel.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "ASCIIText/ASCIIText.tsx",
"content": "// Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE\n\nimport { useEffect, useRef } from 'react';\nimport * as THREE from 'three';\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nfunction map(n: number, start: number, stop: number, start2: number, stop2: number) {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n}\n\nconst PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer!: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D | null;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n cols: number = 0;\n rows: number = 0;\n\n constructor(renderer: THREE.WebGLRenderer, { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {}) {\n this.renderer = renderer;\n this.domElement = document.createElement('div');\n this.domElement.style.position = 'absolute';\n this.domElement.style.top = '0';\n this.domElement.style.left = '0';\n this.domElement.style.width = '100%';\n this.domElement.style.height = '100%';\n\n this.pre = document.createElement('pre');\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset = charset ?? ' .\\'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';\n\n if (this.context) {\n this.context.imageSmoothingEnabled = false;\n this.context.imageSmoothingEnabled = false;\n }\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener('mousemove', this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n if (this.context) {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText('A').width;\n\n this.cols = Math.floor(this.width / (this.fontSize * (charWidth / this.fontSize)));\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = '0';\n this.pre.style.padding = '0';\n this.pre.style.lineHeight = '1em';\n this.pre.style.position = 'absolute';\n this.pre.style.left = '50%';\n this.pre.style.top = '50%';\n this.pre.style.transform = 'translate(-50%, -50%)';\n this.pre.style.zIndex = '9';\n this.pre.style.backgroundAttachment = 'fixed';\n this.pre.style.mixBlendMode = 'difference';\n }\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n if (this.context) {\n this.context.clearRect(0, 0, w, h);\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n this.asciify(this.context, w, h);\n this.hue();\n }\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = '';\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [imgData[i], imgData[i + 1], imgData[i + 2], imgData[i + 3]];\n\n if (a === 0) {\n str += ' ';\n continue;\n }\n\n let gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += '\\n';\n }\n this.pre.innerHTML = str;\n }\n\n dispose() {\n document.removeEventListener('mousemove', this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D | null;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(txt: string, { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' }: CanvasTxtOptions = {}) {\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n if (this.context) {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n }\n\n render() {\n if (this.context) {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = this.color;\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry: THREE.PlaneGeometry | undefined;\n material: THREE.ShaderMaterial | undefined;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center: { x: number; y: number } = { x: 0, y: 0 };\n animationFrameId: number = 0;\n\n constructor(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000);\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: this.width / 2, y: this.height / 2 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n }\n\n async init() {\n try {\n await document.fonts.load('600 200px \"IBM Plex Mono\"');\n await document.fonts.load('500 12px \"IBM Plex Mono\"');\n } catch (e) {}\n await document.fonts.ready;\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: 'IBM Plex Mono',\n color: this.textColor\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }\n }\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: 'IBM Plex Mono',\n fontSize: this.asciiFontSize,\n invert: true\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener('mousemove', this.onMouseMove);\n this.container.addEventListener('touchmove', this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: MouseEvent | TouchEvent) {\n const e = (evt as TouchEvent).touches ? (evt as TouchEvent).touches[0] : (evt as MouseEvent);\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as THREE.ShaderMaterial).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse(object => {\n const obj = object as unknown as THREE.Mesh;\n if (!obj.isMesh) return;\n [obj.material].flat().forEach(material => {\n material.dispose();\n Object.keys(material).forEach(key => {\n const matProp = material[key as keyof typeof material];\n if (matProp && typeof matProp === 'object' && 'dispose' in matProp && typeof matProp.dispose === 'function') {\n matProp.dispose();\n }\n });\n });\n obj.geometry.dispose();\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n if (this.filter) {\n this.filter.dispose();\n if (this.filter.domElement.parentNode) {\n this.container.removeChild(this.filter.domElement);\n }\n }\n this.container.removeEventListener('mousemove', this.onMouseMove);\n this.container.removeEventListener('touchmove', this.onMouseMove);\n this.clear();\n if (this.renderer) {\n this.renderer.dispose();\n this.renderer.forceContextLoss();\n }\n }\n}\n\ninterface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n}\n\nexport default function ASCIIText({\n text = 'David!',\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = '#fdf9f3',\n planeBaseHeight = 8,\n enableWaves = true\n}: ASCIITextProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii | null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n let cancelled = false;\n let observer: IntersectionObserver | null = null;\n let ro: ResizeObserver | null = null;\n\n const createAndInit = async (container: HTMLDivElement, w: number, h: number) => {\n const instance = new CanvAscii(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves },\n container,\n w,\n h\n );\n await instance.init();\n return instance;\n };\n\n const setup = async () => {\n const { width, height } = containerRef.current!.getBoundingClientRect();\n\n if (width === 0 || height === 0) {\n observer = new IntersectionObserver(\n async ([entry]) => {\n if (cancelled) return;\n if (entry.isIntersecting && entry.boundingClientRect.width > 0 && entry.boundingClientRect.height > 0) {\n const { width: w, height: h } = entry.boundingClientRect;\n observer?.disconnect();\n observer = null;\n\n if (!cancelled) {\n asciiRef.current = await createAndInit(containerRef.current!, w, h);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n }\n }\n }\n },\n { threshold: 0.1 }\n );\n observer.observe(containerRef.current!);\n return;\n }\n\n asciiRef.current = await createAndInit(containerRef.current!, width, height);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n\n ro = new ResizeObserver(entries => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current!);\n }\n };\n\n setup();\n\n return () => {\n cancelled = true;\n if (observer) observer.disconnect();\n if (ro) ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n asciiRef.current = null;\n }\n };\n }, [text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves]);\n\n return (\n <div\n ref={containerRef}\n className=\"ascii-text-container\"\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%'\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n}\n"
}
],
"registryDependencies": [],
"dependencies": [
"three@^0.167.1"
]
}
================================================
FILE: public/r/ASCIIText-TS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "ASCIIText-TS-TW",
"title": "ASCIIText",
"description": "Renders text with an animated ASCII background for a retro feel.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "ASCIIText/ASCIIText.tsx",
"content": "// Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE\n\nimport { useEffect, useRef } from 'react';\nimport * as THREE from 'three';\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nfunction map(n: number, start: number, stop: number, start2: number, stop2: number) {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n}\n\nconst PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D | null;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n cols: number = 0;\n rows: number = 0;\n\n constructor(renderer: THREE.WebGLRenderer, { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {}) {\n this.renderer = renderer;\n this.domElement = document.createElement('div');\n this.domElement.style.position = 'absolute';\n this.domElement.style.top = '0';\n this.domElement.style.left = '0';\n this.domElement.style.width = '100%';\n this.domElement.style.height = '100%';\n\n this.pre = document.createElement('pre');\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset = charset ?? ' .\\'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';\n\n if (this.context) {\n this.context.imageSmoothingEnabled = false;\n this.context.imageSmoothingEnabled = false;\n }\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener('mousemove', this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n if (this.context) {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText('A').width;\n\n this.cols = Math.floor(this.width / (this.fontSize * (charWidth / this.fontSize)));\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = '0';\n this.pre.style.padding = '0';\n this.pre.style.lineHeight = '1em';\n this.pre.style.position = 'absolute';\n this.pre.style.left = '50%';\n this.pre.style.top = '50%';\n this.pre.style.transform = 'translate(-50%, -50%)';\n this.pre.style.zIndex = '9';\n this.pre.style.backgroundAttachment = 'fixed';\n this.pre.style.mixBlendMode = 'difference';\n }\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n if (this.context) {\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = '';\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [imgData[i], imgData[i + 1], imgData[i + 2], imgData[i + 3]];\n\n if (a === 0) {\n str += ' ';\n continue;\n }\n\n let gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += '\\n';\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener('mousemove', this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D | null;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(txt: string, { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' }: CanvasTxtOptions = {}) {\n this.canvas = document.createElement('canvas');\n this.context = this.canvas.getContext('2d');\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n if (this.context) {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n }\n\n render() {\n if (this.context) {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = this.color;\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry!: THREE.PlaneGeometry;\n material!: THREE.ShaderMaterial;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center!: { x: number; y: number };\n animationFrameId: number = 0;\n\n constructor(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000);\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: this.width / 2, y: this.height / 2 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n }\n\n async init() {\n try {\n await document.fonts.load('600 200px \"IBM Plex Mono\"');\n await document.fonts.load('500 12px \"IBM Plex Mono\"');\n } catch (e) {}\n await document.fonts.ready;\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: 'IBM Plex Mono',\n color: this.textColor\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }\n }\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: 'IBM Plex Mono',\n fontSize: this.asciiFontSize,\n invert: true\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener('mousemove', this.onMouseMove);\n this.container.addEventListener('touchmove', this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: MouseEvent | TouchEvent) {\n const e = (evt as TouchEvent).touches ? (evt as TouchEvent).touches[0] : (evt as MouseEvent);\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as THREE.ShaderMaterial).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse(object => {\n const obj = object as unknown as THREE.Mesh;\n if (!obj.isMesh) return;\n [obj.material].flat().forEach(material => {\n material.dispose();\n Object.keys(material).forEach(key => {\n const matProp = material[key as keyof typeof material];\n if (matProp && typeof matProp === 'object' && 'dispose' in matProp && typeof matProp.dispose === 'function') {\n matProp.dispose();\n }\n });\n });\n obj.geometry.dispose();\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n if (this.filter) {\n this.filter.dispose();\n if (this.filter.domElement.parentNode) {\n this.container.removeChild(this.filter.domElement);\n }\n }\n this.container.removeEventListener('mousemove', this.onMouseMove);\n this.container.removeEventListener('touchmove', this.onMouseMove);\n this.clear();\n if (this.renderer) {\n this.renderer.dispose();\n this.renderer.forceContextLoss();\n }\n }\n}\n\ninterface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n}\n\nexport default function ASCIIText({\n text = 'David!',\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = '#fdf9f3',\n planeBaseHeight = 8,\n enableWaves = true\n}: ASCIITextProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii | null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n let cancelled = false;\n let observer: IntersectionObserver | null = null;\n let ro: ResizeObserver | null = null;\n\n const createAndInit = async (container: HTMLDivElement, w: number, h: number) => {\n const instance = new CanvAscii(\n { text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves },\n container,\n w,\n h\n );\n await instance.init();\n return instance;\n };\n\n const setup = async () => {\n const { width, height } = containerRef.current!.getBoundingClientRect();\n\n if (width === 0 || height === 0) {\n observer = new IntersectionObserver(\n async ([entry]) => {\n if (cancelled) return;\n if (entry.isIntersecting && entry.boundingClientRect.width > 0 && entry.boundingClientRect.height > 0) {\n const { width: w, height: h } = entry.boundingClientRect;\n observer?.disconnect();\n observer = null;\n\n if (!cancelled) {\n asciiRef.current = await createAndInit(containerRef.current!, w, h);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n }\n }\n }\n },\n { threshold: 0.1 }\n );\n observer.observe(containerRef.current!);\n return;\n }\n\n asciiRef.current = await createAndInit(containerRef.current!, width, height);\n if (!cancelled && asciiRef.current) {\n asciiRef.current.load();\n\n ro = new ResizeObserver(entries => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current!);\n }\n };\n\n setup();\n\n return () => {\n cancelled = true;\n if (observer) observer.disconnect();\n if (ro) ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n asciiRef.current = null;\n }\n };\n }, [text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves]);\n\n return (\n <div\n ref={containerRef}\n className=\"ascii-text-container\"\n style={{\n position: 'absolute',\n width: '100%',\n height: '100%'\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n}\n"
}
],
"registryDependencies": [],
"dependencies": [
"three@^0.167.1"
]
}
================================================
FILE: public/r/AnimatedContent-JS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedContent-JS-CSS",
"title": "AnimatedContent",
"description": "Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedContent/AnimatedContent.jsx",
"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n ...props\n}) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div ref={ref} className={className} style={{ visibility: 'hidden' }} {...props}>\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;\n"
}
],
"registryDependencies": [],
"dependencies": [
"gsap@^3.13.0"
]
}
================================================
FILE: public/r/AnimatedContent-JS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedContent-JS-TW",
"title": "AnimatedContent",
"description": "Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedContent/AnimatedContent.jsx",
"content": "import { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst AnimatedContent = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n ...props\n}) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div ref={ref} className={`invisible ${className}`} {...props}>\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;\n"
}
],
"registryDependencies": [],
"dependencies": [
"gsap@^3.13.0"
]
}
================================================
FILE: public/r/AnimatedContent-TS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedContent-TS-CSS",
"title": "AnimatedContent",
"description": "Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedContent/AnimatedContent.tsx",
"content": "import React, { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface AnimatedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n container?: Element | string | null;\n distance?: number;\n direction?: 'vertical' | 'horizontal';\n reverse?: boolean;\n duration?: number;\n ease?: string;\n initialOpacity?: number;\n animateOpacity?: boolean;\n scale?: number;\n threshold?: number;\n delay?: number;\n disappearAfter?: number;\n disappearDuration?: number;\n disappearEase?: string;\n onComplete?: () => void;\n onDisappearanceComplete?: () => void;\n}\n\nconst AnimatedContent: React.FC<AnimatedContentProps> = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n style,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget: Element | string | null = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget || window,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div ref={ref} className={className} style={{ visibility: 'hidden', ...style }} {...props}>\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;\n"
}
],
"registryDependencies": [],
"dependencies": [
"gsap@^3.13.0"
]
}
================================================
FILE: public/r/AnimatedContent-TS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedContent-TS-TW",
"title": "AnimatedContent",
"description": "Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedContent/AnimatedContent.tsx",
"content": "import React, { useRef, useEffect } from 'react';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface AnimatedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n container?: Element | string | null;\n distance?: number;\n direction?: 'vertical' | 'horizontal';\n reverse?: boolean;\n duration?: number;\n ease?: string;\n initialOpacity?: number;\n animateOpacity?: boolean;\n scale?: number;\n threshold?: number;\n delay?: number;\n disappearAfter?: number;\n disappearDuration?: number;\n disappearEase?: string;\n onComplete?: () => void;\n onDisappearanceComplete?: () => void;\n}\n\nconst AnimatedContent: React.FC<AnimatedContentProps> = ({\n children,\n container,\n distance = 100,\n direction = 'vertical',\n reverse = false,\n duration = 0.8,\n ease = 'power3.out',\n initialOpacity = 0,\n animateOpacity = true,\n scale = 1,\n threshold = 0.1,\n delay = 0,\n disappearAfter = 0,\n disappearDuration = 0.5,\n disappearEase = 'power3.in',\n onComplete,\n onDisappearanceComplete,\n className = '',\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n let scrollerTarget: Element | string | null = container || document.getElementById('snap-main-container') || null;\n\n if (typeof scrollerTarget === 'string') {\n scrollerTarget = document.querySelector(scrollerTarget);\n }\n\n const axis = direction === 'horizontal' ? 'x' : 'y';\n const offset = reverse ? -distance : distance;\n const startPct = (1 - threshold) * 100;\n\n gsap.set(el, {\n [axis]: offset,\n scale,\n opacity: animateOpacity ? initialOpacity : 1,\n visibility: 'visible'\n });\n\n const tl = gsap.timeline({\n paused: true,\n delay,\n onComplete: () => {\n if (onComplete) onComplete();\n if (disappearAfter > 0) {\n gsap.to(el, {\n [axis]: reverse ? distance : -distance,\n scale: 0.8,\n opacity: animateOpacity ? initialOpacity : 0,\n delay: disappearAfter,\n duration: disappearDuration,\n ease: disappearEase,\n onComplete: () => onDisappearanceComplete?.()\n });\n }\n }\n });\n\n tl.to(el, {\n [axis]: 0,\n scale: 1,\n opacity: 1,\n duration,\n ease\n });\n\n const st = ScrollTrigger.create({\n trigger: el,\n scroller: scrollerTarget || window,\n start: `top ${startPct}%`,\n once: true,\n onEnter: () => tl.play()\n });\n\n return () => {\n st.kill();\n tl.kill();\n };\n }, [\n container,\n distance,\n direction,\n reverse,\n duration,\n ease,\n initialOpacity,\n animateOpacity,\n scale,\n threshold,\n delay,\n disappearAfter,\n disappearDuration,\n disappearEase,\n onComplete,\n onDisappearanceComplete\n ]);\n\n return (\n <div ref={ref} className={`invisible ${className}`} {...props}>\n {children}\n </div>\n );\n};\n\nexport default AnimatedContent;\n"
}
],
"registryDependencies": [],
"dependencies": [
"gsap@^3.13.0"
]
}
================================================
FILE: public/r/AnimatedList-JS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedList-JS-CSS",
"title": "AnimatedList",
"description": "List items enter with staggered motion variants for polished reveals.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedList/AnimatedList.css",
"content": ".scroll-list-container {\n position: relative;\n width: 500px;\n}\n\n.scroll-list {\n max-height: 400px;\n overflow-y: auto;\n padding: 16px;\n}\n\n.scroll-list::-webkit-scrollbar {\n width: 8px;\n}\n\n.scroll-list::-webkit-scrollbar-track {\n background: #060010;\n}\n\n.scroll-list::-webkit-scrollbar-thumb {\n background: #271e37;\n border-radius: 4px;\n}\n\n.no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n\n.no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.item {\n padding: 16px;\n background-color: #170d27;\n border-radius: 8px;\n margin-bottom: 1rem;\n}\n\n.item.selected {\n background-color: #271e37;\n}\n\n.item-text {\n color: white;\n margin: 0;\n}\n\n.top-gradient {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 50px;\n background: linear-gradient(to bottom, #060010, transparent);\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.bottom-gradient {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100px;\n background: linear-gradient(to top, #060010, transparent);\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n"
},
{
"type": "registry:component",
"path": "AnimatedList/AnimatedList.jsx",
"content": "import { useRef, useState, useEffect, useCallback } from 'react';\nimport { motion, useInView } from 'motion/react';\nimport './AnimatedList.css';\n\nconst AnimatedItem = ({ children, delay = 0, index, onMouseEnter, onClick }) => {\n const ref = useRef(null);\n const inView = useInView(ref, { amount: 0.5, triggerOnce: false });\n return (\n <motion.div\n ref={ref}\n data-index={index}\n onMouseEnter={onMouseEnter}\n onClick={onClick}\n initial={{ scale: 0.7, opacity: 0 }}\n animate={inView ? { scale: 1, opacity: 1 } : { scale: 0.7, opacity: 0 }}\n transition={{ duration: 0.2, delay }}\n style={{ marginBottom: '1rem', cursor: 'pointer' }}\n >\n {children}\n </motion.div>\n );\n};\n\nconst AnimatedList = ({\n items = [\n 'Item 1',\n 'Item 2',\n 'Item 3',\n 'Item 4',\n 'Item 5',\n 'Item 6',\n 'Item 7',\n 'Item 8',\n 'Item 9',\n 'Item 10',\n 'Item 11',\n 'Item 12',\n 'Item 13',\n 'Item 14',\n 'Item 15'\n ],\n onItemSelect,\n showGradients = true,\n enableArrowNavigation = true,\n className = '',\n itemClassName = '',\n displayScrollbar = true,\n initialSelectedIndex = -1\n}) => {\n const listRef = useRef(null);\n const [selectedIndex, setSelectedIndex] = useState(initialSelectedIndex);\n const [keyboardNav, setKeyboardNav] = useState(false);\n const [topGradientOpacity, setTopGradientOpacity] = useState(0);\n const [bottomGradientOpacity, setBottomGradientOpacity] = useState(1);\n\n const handleItemMouseEnter = useCallback(index => {\n setSelectedIndex(index);\n }, []);\n\n const handleItemClick = useCallback(\n (item, index) => {\n setSelectedIndex(index);\n if (onItemSelect) {\n onItemSelect(item, index);\n }\n },\n [onItemSelect]\n );\n\n const handleScroll = useCallback(e => {\n const { scrollTop, scrollHeight, clientHeight } = e.target;\n setTopGradientOpacity(Math.min(scrollTop / 50, 1));\n const bottomDistance = scrollHeight - (scrollTop + clientHeight);\n setBottomGradientOpacity(scrollHeight <= clientHeight ? 0 : Math.min(bottomDistance / 50, 1));\n }, []);\n\n useEffect(() => {\n if (!enableArrowNavigation) return;\n const handleKeyDown = e => {\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.max(prev - 1, 0));\n } else if (e.key === 'Enter') {\n if (selectedIndex >= 0 && selectedIndex < items.length) {\n e.preventDefault();\n if (onItemSelect) {\n onItemSelect(items[selectedIndex], selectedIndex);\n }\n }\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [items, selectedIndex, onItemSelect, enableArrowNavigation]);\n\n useEffect(() => {\n if (!keyboardNav || selectedIndex < 0 || !listRef.current) return;\n const container = listRef.current;\n const selectedItem = container.querySelector(`[data-index=\"${selectedIndex}\"]`);\n if (selectedItem) {\n const extraMargin = 50;\n const containerScrollTop = container.scrollTop;\n const containerHeight = container.clientHeight;\n const itemTop = selectedItem.offsetTop;\n const itemBottom = itemTop + selectedItem.offsetHeight;\n if (itemTop < containerScrollTop + extraMargin) {\n container.scrollTo({ top: itemTop - extraMargin, behavior: 'smooth' });\n } else if (itemBottom > containerScrollTop + containerHeight - extraMargin) {\n container.scrollTo({\n top: itemBottom - containerHeight + extraMargin,\n behavior: 'smooth'\n });\n }\n }\n setKeyboardNav(false);\n }, [selectedIndex, keyboardNav]);\n\n return (\n <div className={`scroll-list-container ${className}`}>\n <div ref={listRef} className={`scroll-list ${!displayScrollbar ? 'no-scrollbar' : ''}`} onScroll={handleScroll}>\n {items.map((item, index) => (\n <AnimatedItem\n key={index}\n delay={0.1}\n index={index}\n onMouseEnter={() => handleItemMouseEnter(index)}\n onClick={() => handleItemClick(item, index)}\n >\n <div className={`item ${selectedIndex === index ? 'selected' : ''} ${itemClassName}`}>\n <p className=\"item-text\">{item}</p>\n </div>\n </AnimatedItem>\n ))}\n </div>\n {showGradients && (\n <>\n <div className=\"top-gradient\" style={{ opacity: topGradientOpacity }}></div>\n <div className=\"bottom-gradient\" style={{ opacity: bottomGradientOpacity }}></div>\n </>\n )}\n </div>\n );\n};\n\nexport default AnimatedList;\n"
}
],
"registryDependencies": [],
"dependencies": [
"motion@^12.23.12"
]
}
================================================
FILE: public/r/AnimatedList-JS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedList-JS-TW",
"title": "AnimatedList",
"description": "List items enter with staggered motion variants for polished reveals.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedList/AnimatedList.jsx",
"content": "import { useCallback, useEffect, useRef, useState } from 'react';\nimport { motion, useInView } from 'motion/react';\n\nconst AnimatedItem = ({ children, delay = 0, index, onMouseEnter, onClick }) => {\n const ref = useRef(null);\n const inView = useInView(ref, { amount: 0.5, triggerOnce: false });\n return (\n <motion.div\n ref={ref}\n data-index={index}\n onMouseEnter={onMouseEnter}\n onClick={onClick}\n initial={{ scale: 0.7, opacity: 0 }}\n animate={inView ? { scale: 1, opacity: 1 } : { scale: 0.7, opacity: 0 }}\n transition={{ duration: 0.2, delay }}\n className=\"mb-4 cursor-pointer\"\n >\n {children}\n </motion.div>\n );\n};\n\nconst AnimatedList = ({\n items = [\n 'Item 1',\n 'Item 2',\n 'Item 3',\n 'Item 4',\n 'Item 5',\n 'Item 6',\n 'Item 7',\n 'Item 8',\n 'Item 9',\n 'Item 10',\n 'Item 11',\n 'Item 12',\n 'Item 13',\n 'Item 14',\n 'Item 15'\n ],\n onItemSelect,\n showGradients = true,\n enableArrowNavigation = true,\n className = '',\n itemClassName = '',\n displayScrollbar = true,\n initialSelectedIndex = -1\n}) => {\n const listRef = useRef(null);\n const [selectedIndex, setSelectedIndex] = useState(initialSelectedIndex);\n const [keyboardNav, setKeyboardNav] = useState(false);\n const [topGradientOpacity, setTopGradientOpacity] = useState(0);\n const [bottomGradientOpacity, setBottomGradientOpacity] = useState(1);\n\n const handleItemMouseEnter = useCallback(index => {\n setSelectedIndex(index);\n }, []);\n\n const handleItemClick = useCallback(\n (item, index) => {\n setSelectedIndex(index);\n if (onItemSelect) {\n onItemSelect(item, index);\n }\n },\n [onItemSelect]\n );\n\n const handleScroll = useCallback(e => {\n const { scrollTop, scrollHeight, clientHeight } = e.target;\n setTopGradientOpacity(Math.min(scrollTop / 50, 1));\n const bottomDistance = scrollHeight - (scrollTop + clientHeight);\n setBottomGradientOpacity(scrollHeight <= clientHeight ? 0 : Math.min(bottomDistance / 50, 1));\n }, []);\n\n useEffect(() => {\n if (!enableArrowNavigation) return;\n const handleKeyDown = e => {\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.max(prev - 1, 0));\n } else if (e.key === 'Enter') {\n if (selectedIndex >= 0 && selectedIndex < items.length) {\n e.preventDefault();\n if (onItemSelect) {\n onItemSelect(items[selectedIndex], selectedIndex);\n }\n }\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [items, selectedIndex, onItemSelect, enableArrowNavigation]);\n\n useEffect(() => {\n if (!keyboardNav || selectedIndex < 0 || !listRef.current) return;\n const container = listRef.current;\n const selectedItem = container.querySelector(`[data-index=\"${selectedIndex}\"]`);\n if (selectedItem) {\n const extraMargin = 50;\n const containerScrollTop = container.scrollTop;\n const containerHeight = container.clientHeight;\n const itemTop = selectedItem.offsetTop;\n const itemBottom = itemTop + selectedItem.offsetHeight;\n if (itemTop < containerScrollTop + extraMargin) {\n container.scrollTo({ top: itemTop - extraMargin, behavior: 'smooth' });\n } else if (itemBottom > containerScrollTop + containerHeight - extraMargin) {\n container.scrollTo({\n top: itemBottom - containerHeight + extraMargin,\n behavior: 'smooth'\n });\n }\n }\n setKeyboardNav(false);\n }, [selectedIndex, keyboardNav]);\n\n return (\n <div className={`relative w-[500px] ${className}`}>\n <div\n ref={listRef}\n className={`max-h-[400px] overflow-y-auto p-4 ${\n displayScrollbar\n ? '[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar-track]:bg-[#060010] [&::-webkit-scrollbar-thumb]:bg-[#222] [&::-webkit-scrollbar-thumb]:rounded-[4px]'\n : 'scrollbar-hide'\n }`}\n onScroll={handleScroll}\n style={{\n scrollbarWidth: displayScrollbar ? 'thin' : 'none',\n scrollbarColor: '#222 #060010'\n }}\n >\n {items.map((item, index) => (\n <AnimatedItem\n key={index}\n delay={0.1}\n index={index}\n onMouseEnter={() => handleItemMouseEnter(index)}\n onClick={() => handleItemClick(item, index)}\n >\n <div className={`p-4 bg-[#111] rounded-lg ${selectedIndex === index ? 'bg-[#222]' : ''} ${itemClassName}`}>\n <p className=\"text-white m-0\">{item}</p>\n </div>\n </AnimatedItem>\n ))}\n </div>\n {showGradients && (\n <>\n <div\n className=\"absolute top-0 left-0 right-0 h-[50px] bg-gradient-to-b from-[#060010] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n style={{ opacity: topGradientOpacity }}\n ></div>\n <div\n className=\"absolute bottom-0 left-0 right-0 h-[100px] bg-gradient-to-t from-[#060010] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n style={{ opacity: bottomGradientOpacity }}\n ></div>\n </>\n )}\n </div>\n );\n};\n\nexport default AnimatedList;\n"
}
],
"registryDependencies": [],
"dependencies": [
"motion@^12.23.12"
]
}
================================================
FILE: public/r/AnimatedList-TS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedList-TS-CSS",
"title": "AnimatedList",
"description": "List items enter with staggered motion variants for polished reveals.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedList/AnimatedList.css",
"content": ".scroll-list-container {\n position: relative;\n width: 500px;\n}\n\n.scroll-list {\n max-height: 400px;\n overflow-y: auto;\n padding: 16px;\n}\n\n.scroll-list::-webkit-scrollbar {\n width: 8px;\n}\n\n.scroll-list::-webkit-scrollbar-track {\n background: #060606;\n}\n\n.scroll-list::-webkit-scrollbar-thumb {\n background: #222;\n border-radius: 4px;\n}\n\n.no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n\n.no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.item {\n padding: 16px;\n background-color: #111;\n border-radius: 8px;\n margin-bottom: 1rem;\n}\n\n.item.selected {\n background-color: #222;\n}\n\n.item-text {\n color: white;\n margin: 0;\n}\n\n.top-gradient {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 50px;\n background: linear-gradient(to bottom, #060010, transparent);\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.bottom-gradient {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100px;\n background: linear-gradient(to top, #060010, transparent);\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n"
},
{
"type": "registry:component",
"path": "AnimatedList/AnimatedList.tsx",
"content": "import React, { useRef, useState, useEffect, useCallback, ReactNode, MouseEventHandler, UIEvent } from 'react';\nimport { motion, useInView } from 'motion/react';\nimport './AnimatedList.css';\n\ninterface AnimatedItemProps {\n children: ReactNode;\n delay?: number;\n index: number;\n onMouseEnter?: MouseEventHandler<HTMLDivElement>;\n onClick?: MouseEventHandler<HTMLDivElement>;\n}\n\nconst AnimatedItem: React.FC<AnimatedItemProps> = ({ children, delay = 0, index, onMouseEnter, onClick }) => {\n const ref = useRef<HTMLDivElement>(null);\n const inView = useInView(ref, { amount: 0.5, once: false });\n return (\n <motion.div\n ref={ref}\n data-index={index}\n onMouseEnter={onMouseEnter}\n onClick={onClick}\n initial={{ scale: 0.7, opacity: 0 }}\n animate={inView ? { scale: 1, opacity: 1 } : { scale: 0.7, opacity: 0 }}\n transition={{ duration: 0.2, delay }}\n style={{ marginBottom: '1rem', cursor: 'pointer' }}\n >\n {children}\n </motion.div>\n );\n};\n\ninterface AnimatedListProps {\n items?: string[];\n onItemSelect?: (item: string, index: number) => void;\n showGradients?: boolean;\n enableArrowNavigation?: boolean;\n className?: string;\n itemClassName?: string;\n displayScrollbar?: boolean;\n initialSelectedIndex?: number;\n}\n\nconst AnimatedList: React.FC<AnimatedListProps> = ({\n items = [\n 'Item 1',\n 'Item 2',\n 'Item 3',\n 'Item 4',\n 'Item 5',\n 'Item 6',\n 'Item 7',\n 'Item 8',\n 'Item 9',\n 'Item 10',\n 'Item 11',\n 'Item 12',\n 'Item 13',\n 'Item 14',\n 'Item 15'\n ],\n onItemSelect,\n showGradients = true,\n enableArrowNavigation = true,\n className = '',\n itemClassName = '',\n displayScrollbar = true,\n initialSelectedIndex = -1\n}) => {\n const listRef = useRef<HTMLDivElement>(null);\n const [selectedIndex, setSelectedIndex] = useState<number>(initialSelectedIndex);\n const [keyboardNav, setKeyboardNav] = useState<boolean>(false);\n const [topGradientOpacity, setTopGradientOpacity] = useState<number>(0);\n const [bottomGradientOpacity, setBottomGradientOpacity] = useState<number>(1);\n\n const handleItemMouseEnter = useCallback((index: number) => {\n setSelectedIndex(index);\n }, []);\n\n const handleItemClick = useCallback(\n (item: string, index: number) => {\n setSelectedIndex(index);\n if (onItemSelect) {\n onItemSelect(item, index);\n }\n },\n [onItemSelect]\n );\n\n const handleScroll = useCallback((e: UIEvent<HTMLDivElement>) => {\n const target = e.target as HTMLDivElement;\n const { scrollTop, scrollHeight, clientHeight } = target;\n setTopGradientOpacity(Math.min(scrollTop / 50, 1));\n const bottomDistance = scrollHeight - (scrollTop + clientHeight);\n setBottomGradientOpacity(scrollHeight <= clientHeight ? 0 : Math.min(bottomDistance / 50, 1));\n }, []);\n\n useEffect(() => {\n if (!enableArrowNavigation) return;\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.max(prev - 1, 0));\n } else if (e.key === 'Enter') {\n if (selectedIndex >= 0 && selectedIndex < items.length) {\n e.preventDefault();\n if (onItemSelect) {\n onItemSelect(items[selectedIndex], selectedIndex);\n }\n }\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [items, selectedIndex, onItemSelect, enableArrowNavigation]);\n\n useEffect(() => {\n if (!keyboardNav || selectedIndex < 0 || !listRef.current) return;\n const container = listRef.current;\n const selectedItem = container.querySelector(`[data-index=\"${selectedIndex}\"]`) as HTMLElement | null;\n if (selectedItem) {\n const extraMargin = 50;\n const containerScrollTop = container.scrollTop;\n const containerHeight = container.clientHeight;\n const itemTop = selectedItem.offsetTop;\n const itemBottom = itemTop + selectedItem.offsetHeight;\n if (itemTop < containerScrollTop + extraMargin) {\n container.scrollTo({ top: itemTop - extraMargin, behavior: 'smooth' });\n } else if (itemBottom > containerScrollTop + containerHeight - extraMargin) {\n container.scrollTo({\n top: itemBottom - containerHeight + extraMargin,\n behavior: 'smooth'\n });\n }\n }\n setKeyboardNav(false);\n }, [selectedIndex, keyboardNav]);\n\n return (\n <div className={`scroll-list-container ${className}`}>\n <div ref={listRef} className={`scroll-list ${!displayScrollbar ? 'no-scrollbar' : ''}`} onScroll={handleScroll}>\n {items.map((item, index) => (\n <AnimatedItem\n key={index}\n delay={0.1}\n index={index}\n onMouseEnter={() => handleItemMouseEnter(index)}\n onClick={() => handleItemClick(item, index)}\n >\n <div className={`item ${selectedIndex === index ? 'selected' : ''} ${itemClassName}`}>\n <p className=\"item-text\">{item}</p>\n </div>\n </AnimatedItem>\n ))}\n </div>\n {showGradients && (\n <>\n <div className=\"top-gradient\" style={{ opacity: topGradientOpacity }}></div>\n <div className=\"bottom-gradient\" style={{ opacity: bottomGradientOpacity }}></div>\n </>\n )}\n </div>\n );\n};\n\nexport default AnimatedList;\n"
}
],
"registryDependencies": [],
"dependencies": [
"motion@^12.23.12"
]
}
================================================
FILE: public/r/AnimatedList-TS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "AnimatedList-TS-TW",
"title": "AnimatedList",
"description": "List items enter with staggered motion variants for polished reveals.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "AnimatedList/AnimatedList.tsx",
"content": "import React, { useRef, useState, useEffect, useCallback, ReactNode, MouseEventHandler, UIEvent } from 'react';\nimport { motion, useInView } from 'motion/react';\n\ninterface AnimatedItemProps {\n children: ReactNode;\n delay?: number;\n index: number;\n onMouseEnter?: MouseEventHandler<HTMLDivElement>;\n onClick?: MouseEventHandler<HTMLDivElement>;\n}\n\nconst AnimatedItem: React.FC<AnimatedItemProps> = ({ children, delay = 0, index, onMouseEnter, onClick }) => {\n const ref = useRef<HTMLDivElement>(null);\n const inView = useInView(ref, { amount: 0.5, once: false });\n return (\n <motion.div\n ref={ref}\n data-index={index}\n onMouseEnter={onMouseEnter}\n onClick={onClick}\n initial={{ scale: 0.7, opacity: 0 }}\n animate={inView ? { scale: 1, opacity: 1 } : { scale: 0.7, opacity: 0 }}\n transition={{ duration: 0.2, delay }}\n className=\"mb-4 cursor-pointer\"\n >\n {children}\n </motion.div>\n );\n};\n\ninterface AnimatedListProps {\n items?: string[];\n onItemSelect?: (item: string, index: number) => void;\n showGradients?: boolean;\n enableArrowNavigation?: boolean;\n className?: string;\n itemClassName?: string;\n displayScrollbar?: boolean;\n initialSelectedIndex?: number;\n}\n\nconst AnimatedList: React.FC<AnimatedListProps> = ({\n items = [\n 'Item 1',\n 'Item 2',\n 'Item 3',\n 'Item 4',\n 'Item 5',\n 'Item 6',\n 'Item 7',\n 'Item 8',\n 'Item 9',\n 'Item 10',\n 'Item 11',\n 'Item 12',\n 'Item 13',\n 'Item 14',\n 'Item 15'\n ],\n onItemSelect,\n showGradients = true,\n enableArrowNavigation = true,\n className = '',\n itemClassName = '',\n displayScrollbar = true,\n initialSelectedIndex = -1\n}) => {\n const listRef = useRef<HTMLDivElement>(null);\n const [selectedIndex, setSelectedIndex] = useState<number>(initialSelectedIndex);\n const [keyboardNav, setKeyboardNav] = useState<boolean>(false);\n const [topGradientOpacity, setTopGradientOpacity] = useState<number>(0);\n const [bottomGradientOpacity, setBottomGradientOpacity] = useState<number>(1);\n\n const handleItemMouseEnter = useCallback((index: number) => {\n setSelectedIndex(index);\n }, []);\n\n const handleItemClick = useCallback(\n (item: string, index: number) => {\n setSelectedIndex(index);\n if (onItemSelect) {\n onItemSelect(item, index);\n }\n },\n [onItemSelect]\n );\n\n const handleScroll = (e: UIEvent<HTMLDivElement>) => {\n const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLDivElement;\n setTopGradientOpacity(Math.min(scrollTop / 50, 1));\n const bottomDistance = scrollHeight - (scrollTop + clientHeight);\n setBottomGradientOpacity(scrollHeight <= clientHeight ? 0 : Math.min(bottomDistance / 50, 1));\n };\n\n useEffect(() => {\n if (!enableArrowNavigation) return;\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n setKeyboardNav(true);\n setSelectedIndex(prev => Math.max(prev - 1, 0));\n } else if (e.key === 'Enter') {\n if (selectedIndex >= 0 && selectedIndex < items.length) {\n e.preventDefault();\n if (onItemSelect) {\n onItemSelect(items[selectedIndex], selectedIndex);\n }\n }\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [items, selectedIndex, onItemSelect, enableArrowNavigation]);\n\n useEffect(() => {\n if (!keyboardNav || selectedIndex < 0 || !listRef.current) return;\n const container = listRef.current;\n const selectedItem = container.querySelector(`[data-index=\"${selectedIndex}\"]`) as HTMLElement | null;\n if (selectedItem) {\n const extraMargin = 50;\n const containerScrollTop = container.scrollTop;\n const containerHeight = container.clientHeight;\n const itemTop = selectedItem.offsetTop;\n const itemBottom = itemTop + selectedItem.offsetHeight;\n if (itemTop < containerScrollTop + extraMargin) {\n container.scrollTo({ top: itemTop - extraMargin, behavior: 'smooth' });\n } else if (itemBottom > containerScrollTop + containerHeight - extraMargin) {\n container.scrollTo({\n top: itemBottom - containerHeight + extraMargin,\n behavior: 'smooth'\n });\n }\n }\n setKeyboardNav(false);\n }, [selectedIndex, keyboardNav]);\n\n return (\n <div className={`relative w-[500px] ${className}`}>\n <div\n ref={listRef}\n className={`max-h-[400px] overflow-y-auto p-4 ${\n displayScrollbar\n ? '[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar-track]:bg-[#060010] [&::-webkit-scrollbar-thumb]:bg-[#222] [&::-webkit-scrollbar-thumb]:rounded-[4px]'\n : 'scrollbar-hide'\n }`}\n onScroll={handleScroll}\n style={{\n scrollbarWidth: displayScrollbar ? 'thin' : 'none',\n scrollbarColor: '#222 #060010'\n }}\n >\n {items.map((item, index) => (\n <AnimatedItem\n key={index}\n delay={0.1}\n index={index}\n onMouseEnter={() => handleItemMouseEnter(index)}\n onClick={() => handleItemClick(item, index)}\n >\n <div className={`p-4 bg-[#111] rounded-lg ${selectedIndex === index ? 'bg-[#222]' : ''} ${itemClassName}`}>\n <p className=\"text-white m-0\">{item}</p>\n </div>\n </AnimatedItem>\n ))}\n </div>\n {showGradients && (\n <>\n <div\n className=\"absolute top-0 left-0 right-0 h-[50px] bg-gradient-to-b from-[#060010] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n style={{ opacity: topGradientOpacity }}\n ></div>\n <div\n className=\"absolute bottom-0 left-0 right-0 h-[100px] bg-gradient-to-t from-[#060010] to-transparent pointer-events-none transition-opacity duration-300 ease\"\n style={{ opacity: bottomGradientOpacity }}\n ></div>\n </>\n )}\n </div>\n );\n};\n\nexport default AnimatedList;\n"
}
],
"registryDependencies": [],
"dependencies": [
"motion@^12.23.12"
]
}
================================================
FILE: public/r/Antigravity-JS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "Antigravity-JS-CSS",
"title": "Antigravity",
"description": "3D antigravity particle field that repels from the cursor with smooth motion.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "Antigravity/Antigravity.jsx",
"content": "/* eslint-disable react/no-unknown-property */\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { useMemo, useRef } from 'react';\nimport * as THREE from 'three';\n\nconst AntigravityInner = ({\n count = 300,\n magnetRadius = 10,\n ringRadius = 10,\n waveSpeed = 0.4,\n waveAmplitude = 1,\n particleSize = 2,\n lerpSpeed = 0.1,\n color = '#FF9FFC',\n autoAnimate = false,\n particleVariance = 1,\n rotationSpeed = 0,\n depthFactor = 1,\n pulseSpeed = 3,\n particleShape = 'capsule',\n fieldStrength = 10\n}) => {\n const meshRef = useRef(null);\n const { viewport } = useThree();\n const dummy = useMemo(() => new THREE.Object3D(), []);\n\n const lastMousePos = useRef({ x: 0, y: 0 });\n const lastMouseMoveTime = useRef(0);\n const virtualMouse = useRef({ x: 0, y: 0 });\n\n const particles = useMemo(() => {\n const temp = [];\n const width = viewport.width || 100;\n const height = viewport.height || 100;\n\n for (let i = 0; i < count; i++) {\n const t = Math.random() * 100;\n const factor = 20 + Math.random() * 100;\n const speed = 0.01 + Math.random() / 200;\n const xFactor = -50 + Math.random() * 100;\n const yFactor = -50 + Math.random() * 100;\n const zFactor = -50 + Math.random() * 100;\n\n const x = (Math.random() - 0.5) * width;\n const y = (Math.random() - 0.5) * height;\n const z = (Math.random() - 0.5) * 20;\n\n const randomRadiusOffset = (Math.random() - 0.5) * 2;\n\n temp.push({\n t,\n factor,\n speed,\n xFactor,\n yFactor,\n zFactor,\n mx: x,\n my: y,\n mz: z,\n cx: x,\n cy: y,\n cz: z,\n vx: 0,\n vy: 0,\n vz: 0,\n randomRadiusOffset\n });\n }\n return temp;\n }, [count, viewport.width, viewport.height]);\n\n useFrame(state => {\n const mesh = meshRef.current;\n if (!mesh) return;\n\n const { viewport: v, pointer: m } = state;\n\n const mouseDist = Math.sqrt(Math.pow(m.x - lastMousePos.current.x, 2) + Math.pow(m.y - lastMousePos.current.y, 2));\n\n if (mouseDist > 0.001) {\n lastMouseMoveTime.current = Date.now();\n lastMousePos.current = { x: m.x, y: m.y };\n }\n\n let destX = (m.x * v.width) / 2;\n let destY = (m.y * v.height) / 2;\n\n if (autoAnimate && Date.now() - lastMouseMoveTime.current > 2000) {\n const time = state.clock.getElapsedTime();\n destX = Math.sin(time * 0.5) * (v.width / 4);\n destY = Math.cos(time * 0.5 * 2) * (v.height / 4);\n }\n\n const smoothFactor = 0.05;\n virtualMouse.current.x += (destX - virtualMouse.current.x) * smoothFactor;\n virtualMouse.current.y += (destY - virtualMouse.current.y) * smoothFactor;\n\n const targetX = virtualMouse.current.x;\n const targetY = virtualMouse.current.y;\n\n const globalRotation = state.clock.getElapsedTime() * rotationSpeed;\n\n particles.forEach((particle, i) => {\n let { t, speed, mx, my, mz, cz, randomRadiusOffset } = particle;\n\n t = particle.t += speed / 2;\n\n const projectionFactor = 1 - cz / 50;\n const projectedTargetX = targetX * projectionFactor;\n const projectedTargetY = targetY * projectionFactor;\n\n const dx = mx - projectedTargetX;\n const dy = my - projectedTargetY;\n const dist = Math.sqrt(dx * dx + dy * dy);\n\n let targetPos = { x: mx, y: my, z: mz * depthFactor };\n\n if (dist < magnetRadius) {\n const angle = Math.atan2(dy, dx) + globalRotation;\n\n const wave = Math.sin(t * waveSpeed + angle) * (0.5 * waveAmplitude);\n const deviation = randomRadiusOffset * (5 / (fieldStrength + 0.1));\n\n const currentRingRadius = ringRadius + wave + deviation;\n\n targetPos.x = projectedTargetX + currentRingRadius * Math.cos(angle);\n targetPos.y = projectedTargetY + currentRingRadius * Math.sin(angle);\n targetPos.z = mz * depthFactor + Math.sin(t) * (1 * waveAmplitude * depthFactor);\n }\n\n particle.cx += (targetPos.x - particle.cx) * lerpSpeed;\n particle.cy += (targetPos.y - particle.cy) * lerpSpeed;\n particle.cz += (targetPos.z - particle.cz) * lerpSpeed;\n\n dummy.position.set(particle.cx, particle.cy, particle.cz);\n\n dummy.lookAt(projectedTargetX, projectedTargetY, particle.cz);\n dummy.rotateX(Math.PI / 2);\n\n const currentDistToMouse = Math.sqrt(\n Math.pow(particle.cx - projectedTargetX, 2) + Math.pow(particle.cy - projectedTargetY, 2)\n );\n\n const distFromRing = Math.abs(currentDistToMouse - ringRadius);\n let scaleFactor = 1 - distFromRing / 10;\n\n scaleFactor = Math.max(0, Math.min(1, scaleFactor));\n\n const finalScale = scaleFactor * (0.8 + Math.sin(t * pulseSpeed) * 0.2 * particleVariance) * particleSize;\n dummy.scale.set(finalScale, finalScale, finalScale);\n\n dummy.updateMatrix();\n\n mesh.setMatrixAt(i, dummy.matrix);\n });\n\n mesh.instanceMatrix.needsUpdate = true;\n });\n\n return (\n <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>\n {particleShape === 'capsule' && <capsuleGeometry args={[0.1, 0.4, 4, 8]} />}\n {particleShape === 'sphere' && <sphereGeometry args={[0.2, 16, 16]} />}\n {particleShape === 'box' && <boxGeometry args={[0.3, 0.3, 0.3]} />}\n {particleShape === 'tetrahedron' && <tetrahedronGeometry args={[0.3]} />}\n <meshBasicMaterial color={color} />\n </instancedMesh>\n );\n};\n\nconst Antigravity = props => {\n return (\n <Canvas camera={{ position: [0, 0, 50], fov: 35 }}>\n <AntigravityInner {...props} />\n </Canvas>\n );\n};\n\nexport default Antigravity;\n"
}
],
"registryDependencies": [],
"dependencies": [
"@react-three/fiber@^9.3.0",
"three@^0.167.1"
]
}
================================================
FILE: public/r/Antigravity-JS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "Antigravity-JS-TW",
"title": "Antigravity",
"description": "3D antigravity particle field that repels from the cursor with smooth motion.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "Antigravity/Antigravity.jsx",
"content": "/* eslint-disable react/no-unknown-property */\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { useMemo, useRef } from 'react';\nimport * as THREE from 'three';\n\nconst AntigravityInner = ({\n count = 300,\n magnetRadius = 10,\n ringRadius = 10,\n waveSpeed = 0.4,\n waveAmplitude = 1,\n particleSize = 2,\n lerpSpeed = 0.1,\n color = '#FF9FFC',\n autoAnimate = false,\n particleVariance = 1,\n rotationSpeed = 0,\n depthFactor = 1,\n pulseSpeed = 3,\n particleShape = 'capsule',\n fieldStrength = 10\n}) => {\n const meshRef = useRef(null);\n const { viewport } = useThree();\n const dummy = useMemo(() => new THREE.Object3D(), []);\n\n const lastMousePos = useRef({ x: 0, y: 0 });\n const lastMouseMoveTime = useRef(0);\n const virtualMouse = useRef({ x: 0, y: 0 });\n\n const particles = useMemo(() => {\n const temp = [];\n const width = viewport.width || 100;\n const height = viewport.height || 100;\n\n for (let i = 0; i < count; i++) {\n const t = Math.random() * 100;\n const factor = 20 + Math.random() * 100;\n const speed = 0.01 + Math.random() / 200;\n const xFactor = -50 + Math.random() * 100;\n const yFactor = -50 + Math.random() * 100;\n const zFactor = -50 + Math.random() * 100;\n\n const x = (Math.random() - 0.5) * width;\n const y = (Math.random() - 0.5) * height;\n const z = (Math.random() - 0.5) * 20;\n\n const randomRadiusOffset = (Math.random() - 0.5) * 2;\n\n temp.push({\n t,\n factor,\n speed,\n xFactor,\n yFactor,\n zFactor,\n mx: x,\n my: y,\n mz: z,\n cx: x,\n cy: y,\n cz: z,\n vx: 0,\n vy: 0,\n vz: 0,\n randomRadiusOffset\n });\n }\n return temp;\n }, [count, viewport.width, viewport.height]);\n\n useFrame(state => {\n const mesh = meshRef.current;\n if (!mesh) return;\n\n const { viewport: v, pointer: m } = state;\n\n const mouseDist = Math.sqrt(Math.pow(m.x - lastMousePos.current.x, 2) + Math.pow(m.y - lastMousePos.current.y, 2));\n\n if (mouseDist > 0.001) {\n lastMouseMoveTime.current = Date.now();\n lastMousePos.current = { x: m.x, y: m.y };\n }\n\n let destX = (m.x * v.width) / 2;\n let destY = (m.y * v.height) / 2;\n\n if (autoAnimate && Date.now() - lastMouseMoveTime.current > 2000) {\n const time = state.clock.getElapsedTime();\n destX = Math.sin(time * 0.5) * (v.width / 4);\n destY = Math.cos(time * 0.5 * 2) * (v.height / 4);\n }\n\n const smoothFactor = 0.05;\n virtualMouse.current.x += (destX - virtualMouse.current.x) * smoothFactor;\n virtualMouse.current.y += (destY - virtualMouse.current.y) * smoothFactor;\n\n const targetX = virtualMouse.current.x;\n const targetY = virtualMouse.current.y;\n\n const globalRotation = state.clock.getElapsedTime() * rotationSpeed;\n\n particles.forEach((particle, i) => {\n let { t, speed, mx, my, mz, cz, randomRadiusOffset } = particle;\n\n t = particle.t += speed / 2;\n\n const projectionFactor = 1 - cz / 50;\n const projectedTargetX = targetX * projectionFactor;\n const projectedTargetY = targetY * projectionFactor;\n\n const dx = mx - projectedTargetX;\n const dy = my - projectedTargetY;\n const dist = Math.sqrt(dx * dx + dy * dy);\n\n let targetPos = { x: mx, y: my, z: mz * depthFactor };\n\n if (dist < magnetRadius) {\n const angle = Math.atan2(dy, dx) + globalRotation;\n\n const wave = Math.sin(t * waveSpeed + angle) * (0.5 * waveAmplitude);\n const deviation = randomRadiusOffset * (5 / (fieldStrength + 0.1));\n\n const currentRingRadius = ringRadius + wave + deviation;\n\n targetPos.x = projectedTargetX + currentRingRadius * Math.cos(angle);\n targetPos.y = projectedTargetY + currentRingRadius * Math.sin(angle);\n targetPos.z = mz * depthFactor + Math.sin(t) * (1 * waveAmplitude * depthFactor);\n }\n\n particle.cx += (targetPos.x - particle.cx) * lerpSpeed;\n particle.cy += (targetPos.y - particle.cy) * lerpSpeed;\n particle.cz += (targetPos.z - particle.cz) * lerpSpeed;\n\n dummy.position.set(particle.cx, particle.cy, particle.cz);\n\n dummy.lookAt(projectedTargetX, projectedTargetY, particle.cz);\n dummy.rotateX(Math.PI / 2);\n\n const currentDistToMouse = Math.sqrt(\n Math.pow(particle.cx - projectedTargetX, 2) + Math.pow(particle.cy - projectedTargetY, 2)\n );\n\n const distFromRing = Math.abs(currentDistToMouse - ringRadius);\n let scaleFactor = 1 - distFromRing / 10;\n\n scaleFactor = Math.max(0, Math.min(1, scaleFactor));\n\n const finalScale = scaleFactor * (0.8 + Math.sin(t * pulseSpeed) * 0.2 * particleVariance) * particleSize;\n dummy.scale.set(finalScale, finalScale, finalScale);\n\n dummy.updateMatrix();\n\n mesh.setMatrixAt(i, dummy.matrix);\n });\n\n mesh.instanceMatrix.needsUpdate = true;\n });\n\n return (\n <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>\n {particleShape === 'capsule' && <capsuleGeometry args={[0.1, 0.4, 4, 8]} />}\n {particleShape === 'sphere' && <sphereGeometry args={[0.2, 16, 16]} />}\n {particleShape === 'box' && <boxGeometry args={[0.3, 0.3, 0.3]} />}\n {particleShape === 'tetrahedron' && <tetrahedronGeometry args={[0.3]} />}\n <meshBasicMaterial color={color} />\n </instancedMesh>\n );\n};\n\nconst Antigravity = props => {\n return (\n <Canvas camera={{ position: [0, 0, 50], fov: 35 }}>\n <AntigravityInner {...props} />\n </Canvas>\n );\n};\n\nexport default Antigravity;\n"
}
],
"registryDependencies": [],
"dependencies": [
"@react-three/fiber@^9.3.0",
"three@^0.167.1"
]
}
================================================
FILE: public/r/Antigravity-TS-CSS.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "Antigravity-TS-CSS",
"title": "Antigravity",
"description": "3D antigravity particle field that repels from the cursor with smooth motion.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "Antigravity/Antigravity.tsx",
"content": "import { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport React, { useMemo, useRef } from 'react';\nimport * as THREE from 'three';\n\ninterface AntigravityProps {\n count?: number;\n magnetRadius?: number;\n ringRadius?: number;\n waveSpeed?: number;\n waveAmplitude?: number;\n particleSize?: number;\n lerpSpeed?: number;\n color?: string;\n autoAnimate?: boolean;\n particleVariance?: number;\n rotationSpeed?: number;\n depthFactor?: number;\n pulseSpeed?: number;\n particleShape?: 'capsule' | 'sphere' | 'box' | 'tetrahedron';\n fieldStrength?: number;\n}\n\nconst AntigravityInner: React.FC<AntigravityProps> = ({\n count = 300,\n magnetRadius = 10,\n ringRadius = 10,\n waveSpeed = 0.4,\n waveAmplitude = 1,\n particleSize = 2,\n lerpSpeed = 0.1,\n color = '#FF9FFC',\n autoAnimate = false,\n particleVariance = 1,\n rotationSpeed = 0,\n depthFactor = 1,\n pulseSpeed = 3,\n particleShape = 'capsule',\n fieldStrength = 10\n}) => {\n const meshRef = useRef<THREE.InstancedMesh>(null);\n const { viewport } = useThree();\n const dummy = useMemo(() => new THREE.Object3D(), []);\n\n const lastMousePos = useRef({ x: 0, y: 0 });\n const lastMouseMoveTime = useRef(0);\n const virtualMouse = useRef({ x: 0, y: 0 });\n\n const particles = useMemo(() => {\n const temp = [];\n const width = viewport.width || 100;\n const height = viewport.height || 100;\n\n for (let i = 0; i < count; i++) {\n const t = Math.random() * 100;\n const factor = 20 + Math.random() * 100;\n const speed = 0.01 + Math.random() / 200;\n const xFactor = -50 + Math.random() * 100;\n const yFactor = -50 + Math.random() * 100;\n const zFactor = -50 + Math.random() * 100;\n\n const x = (Math.random() - 0.5) * width;\n const y = (Math.random() - 0.5) * height;\n const z = (Math.random() - 0.5) * 20;\n\n const randomRadiusOffset = (Math.random() - 0.5) * 2;\n\n temp.push({\n t,\n factor,\n speed,\n xFactor,\n yFactor,\n zFactor,\n mx: x,\n my: y,\n mz: z,\n cx: x,\n cy: y,\n cz: z,\n vx: 0,\n vy: 0,\n vz: 0,\n randomRadiusOffset\n });\n }\n return temp;\n }, [count, viewport.width, viewport.height]);\n\n useFrame(state => {\n const mesh = meshRef.current;\n if (!mesh) return;\n\n const { viewport: v, pointer: m } = state;\n\n const mouseDist = Math.sqrt(Math.pow(m.x - lastMousePos.current.x, 2) + Math.pow(m.y - lastMousePos.current.y, 2));\n\n if (mouseDist > 0.001) {\n lastMouseMoveTime.current = Date.now();\n lastMousePos.current = { x: m.x, y: m.y };\n }\n\n let destX = (m.x * v.width) / 2;\n let destY = (m.y * v.height) / 2;\n\n if (autoAnimate && Date.now() - lastMouseMoveTime.current > 2000) {\n const time = state.clock.getElapsedTime();\n destX = Math.sin(time * 0.5) * (v.width / 4);\n destY = Math.cos(time * 0.5 * 2) * (v.height / 4);\n }\n\n const smoothFactor = 0.05;\n virtualMouse.current.x += (destX - virtualMouse.current.x) * smoothFactor;\n virtualMouse.current.y += (destY - virtualMouse.current.y) * smoothFactor;\n\n const targetX = virtualMouse.current.x;\n const targetY = virtualMouse.current.y;\n\n const globalRotation = state.clock.getElapsedTime() * rotationSpeed;\n\n particles.forEach((particle, i) => {\n let { t, speed, mx, my, mz, cz, randomRadiusOffset } = particle;\n\n t = particle.t += speed / 2;\n\n const projectionFactor = 1 - cz / 50;\n const projectedTargetX = targetX * projectionFactor;\n const projectedTargetY = targetY * projectionFactor;\n\n const dx = mx - projectedTargetX;\n const dy = my - projectedTargetY;\n const dist = Math.sqrt(dx * dx + dy * dy);\n\n let targetPos = { x: mx, y: my, z: mz * depthFactor };\n\n if (dist < magnetRadius) {\n const angle = Math.atan2(dy, dx) + globalRotation;\n\n const wave = Math.sin(t * waveSpeed + angle) * (0.5 * waveAmplitude);\n const deviation = randomRadiusOffset * (5 / (fieldStrength + 0.1));\n\n const currentRingRadius = ringRadius + wave + deviation;\n\n targetPos.x = projectedTargetX + currentRingRadius * Math.cos(angle);\n targetPos.y = projectedTargetY + currentRingRadius * Math.sin(angle);\n targetPos.z = mz * depthFactor + Math.sin(t) * (1 * waveAmplitude * depthFactor);\n }\n\n particle.cx += (targetPos.x - particle.cx) * lerpSpeed;\n particle.cy += (targetPos.y - particle.cy) * lerpSpeed;\n particle.cz += (targetPos.z - particle.cz) * lerpSpeed;\n\n dummy.position.set(particle.cx, particle.cy, particle.cz);\n\n dummy.lookAt(projectedTargetX, projectedTargetY, particle.cz);\n dummy.rotateX(Math.PI / 2);\n\n const currentDistToMouse = Math.sqrt(\n Math.pow(particle.cx - projectedTargetX, 2) + Math.pow(particle.cy - projectedTargetY, 2)\n );\n\n const distFromRing = Math.abs(currentDistToMouse - ringRadius);\n let scaleFactor = 1 - distFromRing / 10;\n\n scaleFactor = Math.max(0, Math.min(1, scaleFactor));\n\n const finalScale = scaleFactor * (0.8 + Math.sin(t * pulseSpeed) * 0.2 * particleVariance) * particleSize;\n dummy.scale.set(finalScale, finalScale, finalScale);\n\n dummy.updateMatrix();\n\n mesh.setMatrixAt(i, dummy.matrix);\n });\n\n mesh.instanceMatrix.needsUpdate = true;\n });\n\n return (\n <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>\n {particleShape === 'capsule' && <capsuleGeometry args={[0.1, 0.4, 4, 8]} />}\n {particleShape === 'sphere' && <sphereGeometry args={[0.2, 16, 16]} />}\n {particleShape === 'box' && <boxGeometry args={[0.3, 0.3, 0.3]} />}\n {particleShape === 'tetrahedron' && <tetrahedronGeometry args={[0.3]} />}\n <meshBasicMaterial color={color} />\n </instancedMesh>\n );\n};\n\nconst Antigravity: React.FC<AntigravityProps> = props => {\n return (\n <Canvas camera={{ position: [0, 0, 50], fov: 35 }}>\n <AntigravityInner {...props} />\n </Canvas>\n );\n};\n\nexport default Antigravity;\n"
}
],
"registryDependencies": [],
"dependencies": [
"@react-three/fiber@^9.3.0",
"three@^0.167.1"
]
}
================================================
FILE: public/r/Antigravity-TS-TW.json
================================================
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "Antigravity-TS-TW",
"title": "Antigravity",
"description": "3D antigravity particle field that repels from the cursor with smooth motion.",
"type": "registry:component",
"files": [
{
"type": "registry:component",
"path": "Antigravity/Antigravity.tsx",
"content": "import { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport React, { useMemo, useRef } from 'react';\nimport * as THREE from 'three';\n\ninterface AntigravityProps {\n count?: number;\n magnetRadius?: number;\n ringRadius?: number;\n waveSpeed?: number;\n waveAmplitude?: number;\n particleSize?: number;\n lerpSpeed?: number;\n color?: string;\n autoAnimate?: boolean;\n particleVariance?: number;\n rotationSpeed?: number;\n depthFactor?: number;\n pulseSpeed?: number;\n particleShape?: 'capsule' | 'sphere' | 'box' | 'tetrahedron';\n fieldStrength?: number;\n}\n\nconst AntigravityInner: React.FC<AntigravityProps> = ({\n count = 300,\n magnetRadius = 10,\n ringRadius = 10,\n waveSpeed = 0.4,\n waveAmplitude = 1,\n particleSize = 2,\n lerpSpeed = 0.1,\n color = '#FF9FFC',\n autoAnimate = false,\n particleVariance = 1,\n rotationSpeed = 0,\n depthFactor = 1,\n pulseSpeed = 3,\n particleShape = 'capsule',\n fieldStrength = 10\n}) => {\n const meshRef = useRef<THREE.InstancedMesh>(null);\n const { viewport } = useThree();\n const dummy = useMemo(() => new THREE.Object3D(), []);\n\n const lastMousePos = useRef({ x: 0, y: 0 });\n const lastMouseMoveTime = useRef(0);\n const virtualMouse = useRef({ x: 0, y: 0 });\n\n const particles = useMemo(() => {\n const temp = [];\n const width = viewport.width || 100;\n const height = viewport.height || 100;\n\n for (let i = 0; i < count; i++) {\n const t = Math.random() * 100;\n const factor = 20 + Math.random() * 100;\n const speed = 0.01 + Math.random() / 200;\n const xFactor = -50 + Math.random() * 100;\n const yFactor = -50 + Math.random() * 100;\n const zFactor = -50 + Math.random() * 100;\n\n const x = (Math.random() - 0.5) * width;\n const y = (Math.random() - 0.5) * height;\n const z = (Math.random() - 0.5) * 20;\n\n const randomRadiusOffset = (Math.random() - 0.5) * 2;\n\n temp.push({\n t,\n factor,\n speed,\n xFactor,\n yFactor,\n zFactor,\n mx: x,\n my: y,\n mz: z,\n cx: x,\n cy: y,\n cz: z,\n vx: 0,\n vy: 0,\n vz: 0,\n randomRadiusOffset\n });\n }\n return temp;\n }, [count, viewport.width, viewport.height]);\n\n useFrame(state => {\n const mesh = meshRef.current;\n if (!mesh) return;\n\n const { viewport: v, pointer: m } = state;\n\n const mouseDist = Math.sqrt(Math.pow(m.x - lastMousePos.current.x, 2) + Math.pow(m.y - lastMousePos.current.y, 2));\n\n if (mouseDist > 0.001) {\n lastMouseMoveTime.current = Date.now();\n lastMousePos.current = { x: m.x, y: m.y };\n }\n\n let destX = (m.x * v.width) / 2;\n let destY = (m.y * v.height) / 2;\n\n if (autoAnimate && Date.now() - lastMouseMoveTime.current > 2000) {\n const time = state.clock.getElapsedTime();\n destX = Math.sin(time * 0.5) * (v.width / 4);\n destY = Math.cos(time * 0.5 * 2) * (v.height / 4);\n }\n\n const smoothFactor = 0.05;\n virtualMouse.current.x += (destX - virtualMouse.current.x) * smoothFactor;\n virtualMouse.current.y += (destY - virtualMouse.current.y) * smoothFactor;\n\n const targetX = virtualMouse.current.x;\n const targetY = virtualMouse.current.y;\n\n const globalRotation = state.clock.getElapsedTime() * rotationSpeed;\n\n particles.forEach((particle, i) => {\n let { t, speed, mx, my, mz, cz, randomRadiusOffset } = particle;\n\n t = particle.t += speed / 2;\n\n const projectionFactor = 1 - cz / 50;\n const projectedTargetX = targetX * projectionFactor;\n const projectedTargetY = targetY * projectionFactor;\n\n const dx = mx - projectedTargetX;\n const dy = my - projectedTargetY;\n const dist = Math.sqrt(dx * dx + dy * dy);\n\n let targetPos = { x: mx, y: my, z: mz * depthFactor };\n\n if (dist < magnetRadius) {\n const angle = Math.atan2(dy, dx) + globalRotation;\n\n const wave = Math.sin(t * waveSpeed + angle) * (0.5 * waveAmplitude);\n const deviation = randomRadiusOffset * (5 / (fieldStrength + 0.1));\n\n const currentRingRadius = ringRadius + wave + deviation;\n\n targetPos.x = projectedTargetX + currentRingRadius * Math.cos(angle);\n targetPos.y = projectedTargetY + currentRingRadius * Math.sin(angle);\n targetPos.z = mz * depthFactor + Math.sin(t) * (1 * waveAmplitud
gitextract_zr0nlso3/ ├── .assetsignore ├── .context/ │ └── new-component.md ├── .eslintrc.cjs ├── .github/ │ ├── FUNDING.yml │ └── ISSUE_TEMPLATE/ │ ├── 1-bug-report.yml │ └── 2-feature-request.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── index.html ├── jsrepo.config.ts ├── package.json ├── public/ │ ├── README.md │ ├── assets/ │ │ ├── 3d/ │ │ │ ├── bar.glb │ │ │ ├── cube.glb │ │ │ └── lens.glb │ │ └── video/ │ │ ├── animatedcontent.webm │ │ ├── animatedlist.webm │ │ ├── antigravity.webm │ │ ├── asciitext.webm │ │ ├── aurora.webm │ │ ├── balatro.webm │ │ ├── ballpit.webm │ │ ├── beams.webm │ │ ├── blobcursor.webm │ │ ├── blurtext.webm │ │ ├── borderglow.webm │ │ ├── bouncecards.webm │ │ ├── bubblemenu.webm │ │ ├── cardnav.webm │ │ ├── cardswap.webm │ │ ├── carousel.webm │ │ ├── chromagrid.webm │ │ ├── circulargallery.webm │ │ ├── circulartext.webm │ │ ├── clickspark.webm │ │ ├── colorbends.webm │ │ ├── counter.webm │ │ ├── countup.webm │ │ ├── crosshair.webm │ │ ├── cubes.webm │ │ ├── curvedloop.webm │ │ ├── darkveil.webm │ │ ├── decaycard.webm │ │ ├── decryptedtext.webm │ │ ├── dither.webm │ │ ├── dock.webm │ │ ├── domegallery.webm │ │ ├── dotgrid.webm │ │ ├── elasticslider.webm │ │ ├── electricborder.webm │ │ ├── evileye.webm │ │ ├── fadecontent.webm │ │ ├── fallingtext.webm │ │ ├── faultyterminal.webm │ │ ├── floatinglines.webm │ │ ├── flowingmenu.webm │ │ ├── fluidglass.webm │ │ ├── flyingposters.webm │ │ ├── folder.webm │ │ ├── fuzzytext.webm │ │ ├── galaxy.webm │ │ ├── ghostcursor.webm │ │ ├── glarehover.webm │ │ ├── glassicons.webm │ │ ├── glasssurface.webm │ │ ├── glitchtext.webm │ │ ├── gooeynav.webm │ │ ├── gradientblinds.webm │ │ ├── gradienttext.webm │ │ ├── gradualblur.webm │ │ ├── grainient.webm │ │ ├── griddistortion.webm │ │ ├── gridmotion.webm │ │ ├── gridscan.webm │ │ ├── hyperspeed.webm │ │ ├── imagetrail.webm │ │ ├── infinitemenu.webm │ │ ├── infinitescroll.webm │ │ ├── iridescence.webm │ │ ├── lanyard.webm │ │ ├── laserflow.webm │ │ ├── letterglitch.webm │ │ ├── lightning.webm │ │ ├── lightpillar.webm │ │ ├── lightrays.webm │ │ ├── linewaves.webm │ │ ├── liquidchrome.webm │ │ ├── liquidether.webm │ │ ├── logoloop.webm │ │ ├── magicbento.webm │ │ ├── magicrings.webm │ │ ├── magnet.webm │ │ ├── magnetlines.webm │ │ ├── masonry.webm │ │ ├── metaballs.webm │ │ ├── metallicpaint.webm │ │ ├── modelviewer.webm │ │ ├── noise.webm │ │ ├── orb.webm │ │ ├── orbitimages.webm │ │ ├── particles.webm │ │ ├── pillnav.webm │ │ ├── pixelblast.webm │ │ ├── pixelcard.webm │ │ ├── pixelsnow.webm │ │ ├── pixeltrail.webm │ │ ├── pixeltransition.webm │ │ ├── plasma.webm │ │ ├── prism.webm │ │ ├── prismaticburst.webm │ │ ├── profilecard.webm │ │ ├── radar.webm │ │ ├── reflectivecard.webm │ │ ├── ribbons.webm │ │ ├── ripplegrid.webm │ │ ├── rotatingtext.webm │ │ ├── scrambledtext.webm │ │ ├── scrollfloat.webm │ │ ├── scrollreveal.webm │ │ ├── scrollstack.webm │ │ ├── scrollvelocity.webm │ │ ├── shapeblur.webm │ │ ├── shinytext.webm │ │ ├── shuffle.webm │ │ ├── silk.webm │ │ ├── softaurora.webm │ │ ├── splashcursor.webm │ │ ├── splittext.webm │ │ ├── spotlightcard.webm │ │ ├── squares.webm │ │ ├── stack.webm │ │ ├── staggeredmenu.webm │ │ ├── starborder.webm │ │ ├── stepper.webm │ │ ├── stickerpeel.webm │ │ ├── targetcursor.webm │ │ ├── textcursor.webm │ │ ├── textpressure.webm │ │ ├── textrotate.webm │ │ ├── texttype.webm │ │ ├── threads.webm │ │ ├── tiltedcard.webm │ │ ├── truefocus.webm │ │ ├── variableproximity.webm │ │ └── waves.webm │ ├── llms.txt │ ├── r/ │ │ ├── ASCIIText-JS-CSS.json │ │ ├── ASCIIText-JS-TW.json │ │ ├── ASCIIText-TS-CSS.json │ │ ├── ASCIIText-TS-TW.json │ │ ├── AnimatedContent-JS-CSS.json │ │ ├── AnimatedContent-JS-TW.json │ │ ├── AnimatedContent-TS-CSS.json │ │ ├── AnimatedContent-TS-TW.json │ │ ├── AnimatedList-JS-CSS.json │ │ ├── AnimatedList-JS-TW.json │ │ ├── AnimatedList-TS-CSS.json │ │ ├── AnimatedList-TS-TW.json │ │ ├── Antigravity-JS-CSS.json │ │ ├── Antigravity-JS-TW.json │ │ ├── Antigravity-TS-CSS.json │ │ ├── Antigravity-TS-TW.json │ │ ├── Aurora-JS-CSS.json │ │ ├── Aurora-JS-TW.json │ │ ├── Aurora-TS-CSS.json │ │ ├── Aurora-TS-TW.json │ │ ├── Balatro-JS-CSS.json │ │ ├── Balatro-JS-TW.json │ │ ├── Balatro-TS-CSS.json │ │ ├── Balatro-TS-TW.json │ │ ├── Ballpit-JS-CSS.json │ │ ├── Ballpit-JS-TW.json │ │ ├── Ballpit-TS-CSS.json │ │ ├── Ballpit-TS-TW.json │ │ ├── Beams-JS-CSS.json │ │ ├── Beams-JS-TW.json │ │ ├── Beams-TS-CSS.json │ │ ├── Beams-TS-TW.json │ │ ├── BlobCursor-JS-CSS.json │ │ ├── BlobCursor-JS-TW.json │ │ ├── BlobCursor-TS-CSS.json │ │ ├── BlobCursor-TS-TW.json │ │ ├── BlurText-JS-CSS.json │ │ ├── BlurText-JS-TW.json │ │ ├── BlurText-TS-CSS.json │ │ ├── BlurText-TS-TW.json │ │ ├── BorderGlow-JS-CSS.json │ │ ├── BorderGlow-JS-TW.json │ │ ├── BorderGlow-TS-CSS.json │ │ ├── BorderGlow-TS-TW.json │ │ ├── BounceCards-JS-CSS.json │ │ ├── BounceCards-JS-TW.json │ │ ├── BounceCards-TS-CSS.json │ │ ├── BounceCards-TS-TW.json │ │ ├── BubbleMenu-JS-CSS.json │ │ ├── BubbleMenu-JS-TW.json │ │ ├── BubbleMenu-TS-CSS.json │ │ ├── BubbleMenu-TS-TW.json │ │ ├── CardNav-JS-CSS.json │ │ ├── CardNav-JS-TW.json │ │ ├── CardNav-TS-CSS.json │ │ ├── CardNav-TS-TW.json │ │ ├── CardSwap-JS-CSS.json │ │ ├── CardSwap-JS-TW.json │ │ ├── CardSwap-TS-CSS.json │ │ ├── CardSwap-TS-TW.json │ │ ├── Carousel-JS-CSS.json │ │ ├── Carousel-JS-TW.json │ │ ├── Carousel-TS-CSS.json │ │ ├── Carousel-TS-TW.json │ │ ├── ChromaGrid-JS-CSS.json │ │ ├── ChromaGrid-JS-TW.json │ │ ├── ChromaGrid-TS-CSS.json │ │ ├── ChromaGrid-TS-TW.json │ │ ├── CircularGallery-JS-CSS.json │ │ ├── CircularGallery-JS-TW.json │ │ ├── CircularGallery-TS-CSS.json │ │ ├── CircularGallery-TS-TW.json │ │ ├── CircularText-JS-CSS.json │ │ ├── CircularText-JS-TW.json │ │ ├── CircularText-TS-CSS.json │ │ ├── CircularText-TS-TW.json │ │ ├── ClickSpark-JS-CSS.json │ │ ├── ClickSpark-JS-TW.json │ │ ├── ClickSpark-TS-CSS.json │ │ ├── ClickSpark-TS-TW.json │ │ ├── ColorBends-JS-CSS.json │ │ ├── ColorBends-JS-TW.json │ │ ├── ColorBends-TS-CSS.json │ │ ├── ColorBends-TS-TW.json │ │ ├── CountUp-JS-CSS.json │ │ ├── CountUp-JS-TW.json │ │ ├── CountUp-TS-CSS.json │ │ ├── CountUp-TS-TW.json │ │ ├── Counter-JS-CSS.json │ │ ├── Counter-JS-TW.json │ │ ├── Counter-TS-CSS.json │ │ ├── Counter-TS-TW.json │ │ ├── Crosshair-JS-CSS.json │ │ ├── Crosshair-JS-TW.json │ │ ├── Crosshair-TS-CSS.json │ │ ├── Crosshair-TS-TW.json │ │ ├── Cubes-JS-CSS.json │ │ ├── Cubes-JS-TW.json │ │ ├── Cubes-TS-CSS.json │ │ ├── Cubes-TS-TW.json │ │ ├── CurvedLoop-JS-CSS.json │ │ ├── CurvedLoop-JS-TW.json │ │ ├── CurvedLoop-TS-CSS.json │ │ ├── CurvedLoop-TS-TW.json │ │ ├── DarkVeil-JS-CSS.json │ │ ├── DarkVeil-JS-TW.json │ │ ├── DarkVeil-TS-CSS.json │ │ ├── DarkVeil-TS-TW.json │ │ ├── DecayCard-JS-CSS.json │ │ ├── DecayCard-JS-TW.json │ │ ├── DecayCard-TS-CSS.json │ │ ├── DecayCard-TS-TW.json │ │ ├── DecryptedText-JS-CSS.json │ │ ├── DecryptedText-JS-TW.json │ │ ├── DecryptedText-TS-CSS.json │ │ ├── DecryptedText-TS-TW.json │ │ ├── Dither-JS-CSS.json │ │ ├── Dither-JS-TW.json │ │ ├── Dither-TS-CSS.json │ │ ├── Dither-TS-TW.json │ │ ├── Dock-JS-CSS.json │ │ ├── Dock-JS-TW.json │ │ ├── Dock-TS-CSS.json │ │ ├── Dock-TS-TW.json │ │ ├── DomeGallery-JS-CSS.json │ │ ├── DomeGallery-JS-TW.json │ │ ├── DomeGallery-TS-CSS.json │ │ ├── DomeGallery-TS-TW.json │ │ ├── DotGrid-JS-CSS.json │ │ ├── DotGrid-JS-TW.json │ │ ├── DotGrid-TS-CSS.json │ │ ├── DotGrid-TS-TW.json │ │ ├── ElasticSlider-JS-CSS.json │ │ ├── ElasticSlider-JS-TW.json │ │ ├── ElasticSlider-TS-CSS.json │ │ ├── ElasticSlider-TS-TW.json │ │ ├── ElectricBorder-JS-CSS.json │ │ ├── ElectricBorder-JS-TW.json │ │ ├── ElectricBorder-TS-CSS.json │ │ ├── ElectricBorder-TS-TW.json │ │ ├── EvilEye-JS-CSS.json │ │ ├── EvilEye-JS-TW.json │ │ ├── EvilEye-TS-CSS.json │ │ ├── EvilEye-TS-TW.json │ │ ├── FadeContent-JS-CSS.json │ │ ├── FadeContent-JS-TW.json │ │ ├── FadeContent-TS-CSS.json │ │ ├── FadeContent-TS-TW.json │ │ ├── FallingText-JS-CSS.json │ │ ├── FallingText-JS-TW.json │ │ ├── FallingText-TS-CSS.json │ │ ├── FallingText-TS-TW.json │ │ ├── FaultyTerminal-JS-CSS.json │ │ ├── FaultyTerminal-JS-TW.json │ │ ├── FaultyTerminal-TS-CSS.json │ │ ├── FaultyTerminal-TS-TW.json │ │ ├── FloatingLines-JS-CSS.json │ │ ├── FloatingLines-JS-TW.json │ │ ├── FloatingLines-TS-CSS.json │ │ ├── FloatingLines-TS-TW.json │ │ ├── FlowingMenu-JS-CSS.json │ │ ├── FlowingMenu-JS-TW.json │ │ ├── FlowingMenu-TS-CSS.json │ │ ├── FlowingMenu-TS-TW.json │ │ ├── FluidGlass-JS-CSS.json │ │ ├── FluidGlass-JS-TW.json │ │ ├── FluidGlass-TS-CSS.json │ │ ├── FluidGlass-TS-TW.json │ │ ├── FlyingPosters-JS-CSS.json │ │ ├── FlyingPosters-JS-TW.json │ │ ├── FlyingPosters-TS-CSS.json │ │ ├── FlyingPosters-TS-TW.json │ │ ├── Folder-JS-CSS.json │ │ ├── Folder-JS-TW.json │ │ ├── Folder-TS-CSS.json │ │ ├── Folder-TS-TW.json │ │ ├── FuzzyText-JS-CSS.json │ │ ├── FuzzyText-JS-TW.json │ │ ├── FuzzyText-TS-CSS.json │ │ ├── FuzzyText-TS-TW.json │ │ ├── Galaxy-JS-CSS.json │ │ ├── Galaxy-JS-TW.json │ │ ├── Galaxy-TS-CSS.json │ │ ├── Galaxy-TS-TW.json │ │ ├── GhostCursor-JS-CSS.json │ │ ├── GhostCursor-JS-TW.json │ │ ├── GhostCursor-TS-CSS.json │ │ ├── GhostCursor-TS-TW.json │ │ ├── GlareHover-JS-CSS.json │ │ ├── GlareHover-JS-TW.json │ │ ├── GlareHover-TS-CSS.json │ │ ├── GlareHover-TS-TW.json │ │ ├── GlassIcons-JS-CSS.json │ │ ├── GlassIcons-JS-TW.json │ │ ├── GlassIcons-TS-CSS.json │ │ ├── GlassIcons-TS-TW.json │ │ ├── GlassSurface-JS-CSS.json │ │ ├── GlassSurface-JS-TW.json │ │ ├── GlassSurface-TS-CSS.json │ │ ├── GlassSurface-TS-TW.json │ │ ├── GlitchText-JS-CSS.json │ │ ├── GlitchText-JS-TW.json │ │ ├── GlitchText-TS-CSS.json │ │ ├── GlitchText-TS-TW.json │ │ ├── GooeyNav-JS-CSS.json │ │ ├── GooeyNav-JS-TW.json │ │ ├── GooeyNav-TS-CSS.json │ │ ├── GooeyNav-TS-TW.json │ │ ├── GradientBlinds-JS-CSS.json │ │ ├── GradientBlinds-JS-TW.json │ │ ├── GradientBlinds-TS-CSS.json │ │ ├── GradientBlinds-TS-TW.json │ │ ├── GradientText-JS-CSS.json │ │ ├── GradientText-JS-TW.json │ │ ├── GradientText-TS-CSS.json │ │ ├── GradientText-TS-TW.json │ │ ├── GradualBlur-JS-CSS.json │ │ ├── GradualBlur-JS-TW.json │ │ ├── GradualBlur-TS-CSS.json │ │ ├── GradualBlur-TS-TW.json │ │ ├── Grainient-JS-CSS.json │ │ ├── Grainient-JS-TW.json │ │ ├── Grainient-TS-CSS.json │ │ ├── Grainient-TS-TW.json │ │ ├── GridDistortion-JS-CSS.json │ │ ├── GridDistortion-JS-TW.json │ │ ├── GridDistortion-TS-CSS.json │ │ ├── GridDistortion-TS-TW.json │ │ ├── GridMotion-JS-CSS.json │ │ ├── GridMotion-JS-TW.json │ │ ├── GridMotion-TS-CSS.json │ │ ├── GridMotion-TS-TW.json │ │ ├── GridScan-JS-CSS.json │ │ ├── GridScan-JS-TW.json │ │ ├── GridScan-TS-CSS.json │ │ ├── GridScan-TS-TW.json │ │ ├── Hyperspeed-JS-CSS.json │ │ ├── Hyperspeed-JS-TW.json │ │ ├── Hyperspeed-TS-CSS.json │ │ ├── Hyperspeed-TS-TW.json │ │ ├── ImageTrail-JS-CSS.json │ │ ├── ImageTrail-JS-TW.json │ │ ├── ImageTrail-TS-CSS.json │ │ ├── ImageTrail-TS-TW.json │ │ ├── InfiniteMenu-JS-CSS.json │ │ ├── InfiniteMenu-JS-TW.json │ │ ├── InfiniteMenu-TS-CSS.json │ │ ├── InfiniteMenu-TS-TW.json │ │ ├── Iridescence-JS-CSS.json │ │ ├── Iridescence-JS-TW.json │ │ ├── Iridescence-TS-CSS.json │ │ ├── Iridescence-TS-TW.json │ │ ├── Lanyard-JS-CSS.json │ │ ├── Lanyard-JS-TW.json │ │ ├── Lanyard-TS-CSS.json │ │ ├── Lanyard-TS-TW.json │ │ ├── LaserFlow-JS-CSS.json │ │ ├── LaserFlow-JS-TW.json │ │ ├── LaserFlow-TS-CSS.json │ │ ├── LaserFlow-TS-TW.json │ │ ├── LetterGlitch-JS-CSS.json │ │ ├── LetterGlitch-JS-TW.json │ │ ├── LetterGlitch-TS-CSS.json │ │ ├── LetterGlitch-TS-TW.json │ │ ├── LightPillar-JS-CSS.json │ │ ├── LightPillar-JS-TW.json │ │ ├── LightPillar-TS-CSS.json │ │ ├── LightPillar-TS-TW.json │ │ ├── LightRays-JS-CSS.json │ │ ├── LightRays-JS-TW.json │ │ ├── LightRays-TS-CSS.json │ │ ├── LightRays-TS-TW.json │ │ ├── Lightning-JS-CSS.json │ │ ├── Lightning-JS-TW.json │ │ ├── Lightning-TS-CSS.json │ │ ├── Lightning-TS-TW.json │ │ ├── LineWaves-JS-CSS.json │ │ ├── LineWaves-JS-TW.json │ │ ├── LineWaves-TS-CSS.json │ │ ├── LineWaves-TS-TW.json │ │ ├── LiquidChrome-JS-CSS.json │ │ ├── LiquidChrome-JS-TW.json │ │ ├── LiquidChrome-TS-CSS.json │ │ ├── LiquidChrome-TS-TW.json │ │ ├── LiquidEther-JS-CSS.json │ │ ├── LiquidEther-JS-TW.json │ │ ├── LiquidEther-TS-CSS.json │ │ ├── LiquidEther-TS-TW.json │ │ ├── LogoLoop-JS-CSS.json │ │ ├── LogoLoop-JS-TW.json │ │ ├── LogoLoop-TS-CSS.json │ │ ├── LogoLoop-TS-TW.json │ │ ├── MagicBento-JS-CSS.json │ │ ├── MagicBento-JS-TW.json │ │ ├── MagicBento-TS-CSS.json │ │ ├── MagicBento-TS-TW.json │ │ ├── MagicRings-JS-CSS.json │ │ ├── MagicRings-JS-TW.json │ │ ├── MagicRings-TS-CSS.json │ │ ├── MagicRings-TS-TW.json │ │ ├── Magnet-JS-CSS.json │ │ ├── Magnet-JS-TW.json │ │ ├── Magnet-TS-CSS.json │ │ ├── Magnet-TS-TW.json │ │ ├── MagnetLines-JS-CSS.json │ │ ├── MagnetLines-JS-TW.json │ │ ├── MagnetLines-TS-CSS.json │ │ ├── MagnetLines-TS-TW.json │ │ ├── Masonry-JS-CSS.json │ │ ├── Masonry-JS-TW.json │ │ ├── Masonry-TS-CSS.json │ │ ├── Masonry-TS-TW.json │ │ ├── MetaBalls-JS-CSS.json │ │ ├── MetaBalls-JS-TW.json │ │ ├── MetaBalls-TS-CSS.json │ │ ├── MetaBalls-TS-TW.json │ │ ├── MetallicPaint-JS-CSS.json │ │ ├── MetallicPaint-JS-TW.json │ │ ├── MetallicPaint-TS-CSS.json │ │ ├── MetallicPaint-TS-TW.json │ │ ├── ModelViewer-JS-CSS.json │ │ ├── ModelViewer-JS-TW.json │ │ ├── ModelViewer-TS-CSS.json │ │ ├── ModelViewer-TS-TW.json │ │ ├── Noise-JS-CSS.json │ │ ├── Noise-JS-TW.json │ │ ├── Noise-TS-CSS.json │ │ ├── Noise-TS-TW.json │ │ ├── Orb-JS-CSS.json │ │ ├── Orb-JS-TW.json │ │ ├── Orb-TS-CSS.json │ │ ├── Orb-TS-TW.json │ │ ├── OrbitImages-JS-CSS.json │ │ ├── OrbitImages-JS-TW.json │ │ ├── OrbitImages-TS-CSS.json │ │ ├── OrbitImages-TS-TW.json │ │ ├── Particles-JS-CSS.json │ │ ├── Particles-JS-TW.json │ │ ├── Particles-TS-CSS.json │ │ ├── Particles-TS-TW.json │ │ ├── PillNav-JS-CSS.json │ │ ├── PillNav-JS-TW.json │ │ ├── PillNav-TS-CSS.json │ │ ├── PillNav-TS-TW.json │ │ ├── PixelBlast-JS-CSS.json │ │ ├── PixelBlast-JS-TW.json │ │ ├── PixelBlast-TS-CSS.json │ │ ├── PixelBlast-TS-TW.json │ │ ├── PixelCard-JS-CSS.json │ │ ├── PixelCard-JS-TW.json │ │ ├── PixelCard-TS-CSS.json │ │ ├── PixelCard-TS-TW.json │ │ ├── PixelSnow-JS-CSS.json │ │ ├── PixelSnow-JS-TW.json │ │ ├── PixelSnow-TS-CSS.json │ │ ├── PixelSnow-TS-TW.json │ │ ├── PixelTrail-JS-CSS.json │ │ ├── PixelTrail-JS-TW.json │ │ ├── PixelTrail-TS-CSS.json │ │ ├── PixelTrail-TS-TW.json │ │ ├── PixelTransition-JS-CSS.json │ │ ├── PixelTransition-JS-TW.json │ │ ├── PixelTransition-TS-CSS.json │ │ ├── PixelTransition-TS-TW.json │ │ ├── Plasma-JS-CSS.json │ │ ├── Plasma-JS-TW.json │ │ ├── Plasma-TS-CSS.json │ │ ├── Plasma-TS-TW.json │ │ ├── Prism-JS-CSS.json │ │ ├── Prism-JS-TW.json │ │ ├── Prism-TS-CSS.json │ │ ├── Prism-TS-TW.json │ │ ├── PrismaticBurst-JS-CSS.json │ │ ├── PrismaticBurst-JS-TW.json │ │ ├── PrismaticBurst-TS-CSS.json │ │ ├── PrismaticBurst-TS-TW.json │ │ ├── ProfileCard-JS-CSS.json │ │ ├── ProfileCard-JS-TW.json │ │ ├── ProfileCard-TS-CSS.json │ │ ├── ProfileCard-TS-TW.json │ │ ├── Radar-JS-CSS.json │ │ ├── Radar-JS-TW.json │ │ ├── Radar-TS-CSS.json │ │ ├── Radar-TS-TW.json │ │ ├── ReflectiveCard-JS-CSS.json │ │ ├── ReflectiveCard-JS-TW.json │ │ ├── ReflectiveCard-TS-CSS.json │ │ ├── ReflectiveCard-TS-TW.json │ │ ├── Ribbons-JS-CSS.json │ │ ├── Ribbons-JS-TW.json │ │ ├── Ribbons-TS-CSS.json │ │ ├── Ribbons-TS-TW.json │ │ ├── RippleGrid-JS-CSS.json │ │ ├── RippleGrid-JS-TW.json │ │ ├── RippleGrid-TS-CSS.json │ │ ├── RippleGrid-TS-TW.json │ │ ├── RotatingText-JS-CSS.json │ │ ├── RotatingText-JS-TW.json │ │ ├── RotatingText-TS-CSS.json │ │ ├── RotatingText-TS-TW.json │ │ ├── ScrambledText-JS-CSS.json │ │ ├── ScrambledText-JS-TW.json │ │ ├── ScrambledText-TS-CSS.json │ │ ├── ScrambledText-TS-TW.json │ │ ├── ScrollFloat-JS-CSS.json │ │ ├── ScrollFloat-JS-TW.json │ │ ├── ScrollFloat-TS-CSS.json │ │ ├── ScrollFloat-TS-TW.json │ │ ├── ScrollReveal-JS-CSS.json │ │ ├── ScrollReveal-JS-TW.json │ │ ├── ScrollReveal-TS-CSS.json │ │ ├── ScrollReveal-TS-TW.json │ │ ├── ScrollStack-JS-CSS.json │ │ ├── ScrollStack-JS-TW.json │ │ ├── ScrollStack-TS-CSS.json │ │ ├── ScrollStack-TS-TW.json │ │ ├── ScrollVelocity-JS-CSS.json │ │ ├── ScrollVelocity-JS-TW.json │ │ ├── ScrollVelocity-TS-CSS.json │ │ ├── ScrollVelocity-TS-TW.json │ │ ├── ShapeBlur-JS-CSS.json │ │ ├── ShapeBlur-JS-TW.json │ │ ├── ShapeBlur-TS-CSS.json │ │ ├── ShapeBlur-TS-TW.json │ │ ├── ShapeGrid-JS-CSS.json │ │ ├── ShapeGrid-JS-TW.json │ │ ├── ShapeGrid-TS-CSS.json │ │ ├── ShapeGrid-TS-TW.json │ │ ├── ShinyText-JS-CSS.json │ │ ├── ShinyText-JS-TW.json │ │ ├── ShinyText-TS-CSS.json │ │ ├── ShinyText-TS-TW.json │ │ ├── Shuffle-JS-CSS.json │ │ ├── Shuffle-JS-TW.json │ │ ├── Shuffle-TS-CSS.json │ │ ├── Shuffle-TS-TW.json │ │ ├── Silk-JS-CSS.json │ │ ├── Silk-JS-TW.json │ │ ├── Silk-TS-CSS.json │ │ ├── Silk-TS-TW.json │ │ ├── SoftAurora-JS-CSS.json │ │ ├── SoftAurora-JS-TW.json │ │ ├── SoftAurora-TS-CSS.json │ │ ├── SoftAurora-TS-TW.json │ │ ├── SplashCursor-JS-CSS.json │ │ ├── SplashCursor-JS-TW.json │ │ ├── SplashCursor-TS-CSS.json │ │ ├── SplashCursor-TS-TW.json │ │ ├── SplitText-JS-CSS.json │ │ ├── SplitText-JS-TW.json │ │ ├── SplitText-TS-CSS.json │ │ ├── SplitText-TS-TW.json │ │ ├── SpotlightCard-JS-CSS.json │ │ ├── SpotlightCard-JS-TW.json │ │ ├── SpotlightCard-TS-CSS.json │ │ ├── SpotlightCard-TS-TW.json │ │ ├── Stack-JS-CSS.json │ │ ├── Stack-JS-TW.json │ │ ├── Stack-TS-CSS.json │ │ ├── Stack-TS-TW.json │ │ ├── StaggeredMenu-JS-CSS.json │ │ ├── StaggeredMenu-JS-TW.json │ │ ├── StaggeredMenu-TS-CSS.json │ │ ├── StaggeredMenu-TS-TW.json │ │ ├── StarBorder-JS-CSS.json │ │ ├── StarBorder-JS-TW.json │ │ ├── StarBorder-TS-CSS.json │ │ ├── StarBorder-TS-TW.json │ │ ├── Stepper-JS-CSS.json │ │ ├── Stepper-JS-TW.json │ │ ├── Stepper-TS-CSS.json │ │ ├── Stepper-TS-TW.json │ │ ├── StickerPeel-JS-CSS.json │ │ ├── StickerPeel-JS-TW.json │ │ ├── StickerPeel-TS-CSS.json │ │ ├── StickerPeel-TS-TW.json │ │ ├── TargetCursor-JS-CSS.json │ │ ├── TargetCursor-JS-TW.json │ │ ├── TargetCursor-TS-CSS.json │ │ ├── TargetCursor-TS-TW.json │ │ ├── TextCursor-JS-CSS.json │ │ ├── TextCursor-JS-TW.json │ │ ├── TextCursor-TS-CSS.json │ │ ├── TextCursor-TS-TW.json │ │ ├── TextPressure-JS-CSS.json │ │ ├── TextPressure-JS-TW.json │ │ ├── TextPressure-TS-CSS.json │ │ ├── TextPressure-TS-TW.json │ │ ├── TextType-JS-CSS.json │ │ ├── TextType-JS-TW.json │ │ ├── TextType-TS-CSS.json │ │ ├── TextType-TS-TW.json │ │ ├── Threads-JS-CSS.json │ │ ├── Threads-JS-TW.json │ │ ├── Threads-TS-CSS.json │ │ ├── Threads-TS-TW.json │ │ ├── TiltedCard-JS-CSS.json │ │ ├── TiltedCard-JS-TW.json │ │ ├── TiltedCard-TS-CSS.json │ │ ├── TiltedCard-TS-TW.json │ │ ├── TrueFocus-JS-CSS.json │ │ ├── TrueFocus-JS-TW.json │ │ ├── TrueFocus-TS-CSS.json │ │ ├── TrueFocus-TS-TW.json │ │ ├── VariableProximity-JS-CSS.json │ │ ├── VariableProximity-JS-TW.json │ │ ├── VariableProximity-TS-CSS.json │ │ ├── VariableProximity-TS-TW.json │ │ ├── Waves-JS-CSS.json │ │ ├── Waves-JS-TW.json │ │ ├── Waves-TS-CSS.json │ │ ├── Waves-TS-TW.json │ │ └── registry.json │ ├── robots.txt │ ├── site.webmanifest │ └── sitemap.xml ├── scripts/ │ ├── generateComponent.js │ ├── generateLlmsText.js │ └── generateSitemap.js ├── src/ │ ├── App.jsx │ ├── assets/ │ │ └── lanyard/ │ │ └── card.glb │ ├── components/ │ │ ├── code/ │ │ │ ├── CliInstallation.jsx │ │ │ ├── CodeExample.jsx │ │ │ ├── CodeHighlighter.jsx │ │ │ ├── CodeOptions.jsx │ │ │ ├── Dependencies.jsx │ │ │ └── IconSelect.jsx │ │ ├── common/ │ │ │ ├── Announcement.jsx │ │ │ ├── AnnouncementBar/ │ │ │ │ ├── AnnouncementBar.css │ │ │ │ ├── AnnouncementBar.jsx │ │ │ │ └── index.js │ │ │ ├── AnnouncementModal/ │ │ │ │ ├── AnnouncementModal.css │ │ │ │ └── AnnouncementModal.jsx │ │ │ ├── BackToTopButton.jsx │ │ │ ├── ComponentList.jsx │ │ │ ├── ContributionSection.jsx │ │ │ ├── GitHub/ │ │ │ │ └── ContributionSection.jsx │ │ │ ├── Misc/ │ │ │ │ ├── Announcement.jsx │ │ │ │ ├── BackToTopButton.jsx │ │ │ │ ├── SearchDialog.jsx │ │ │ │ └── SkeletonLoader.jsx │ │ │ ├── Preview/ │ │ │ │ ├── BackgroundContent.jsx │ │ │ │ ├── Customize.jsx │ │ │ │ ├── OpenInStudioButton.jsx │ │ │ │ ├── PreviewColorPicker.jsx │ │ │ │ ├── PreviewInput.jsx │ │ │ │ ├── PreviewSelect.jsx │ │ │ │ ├── PreviewSlider.jsx │ │ │ │ ├── PreviewSliderVertical.jsx │ │ │ │ ├── PreviewSwitch.jsx │ │ │ │ ├── PropTable.jsx │ │ │ │ ├── RefreshButton.jsx │ │ │ │ └── ResetPropsButton.jsx │ │ │ ├── ProCard.jsx │ │ │ ├── SVGComponents.jsx │ │ │ ├── SearchDialog.jsx │ │ │ ├── SimpleMarquee.jsx │ │ │ ├── SkeletonLoader.jsx │ │ │ ├── SponsorsCard.jsx │ │ │ ├── SponsorsCircle.jsx │ │ │ ├── TabsFooter.jsx │ │ │ └── TabsLayout.jsx │ │ ├── context/ │ │ │ ├── ActiveRouteContext/ │ │ │ │ └── ActiveRouteContext.jsx │ │ │ ├── ComponentPropsContext.jsx │ │ │ ├── InstallationContext/ │ │ │ │ └── InstallationContext.jsx │ │ │ ├── OptionsContext/ │ │ │ │ ├── OptionsContext.jsx │ │ │ │ └── useOptions.js │ │ │ ├── SearchContext/ │ │ │ │ ├── SearchContext.jsx │ │ │ │ └── useSearch.js │ │ │ └── TransitionContext/ │ │ │ └── TransitionContext.jsx │ │ ├── landing/ │ │ │ ├── DisplayHeader/ │ │ │ │ ├── DisplayHeader.css │ │ │ │ └── DisplayHeader.jsx │ │ │ ├── FeatureCards/ │ │ │ │ ├── FeatureCards.css │ │ │ │ └── FeatureCards.jsx │ │ │ ├── Footer/ │ │ │ │ ├── Footer.css │ │ │ │ └── Footer.jsx │ │ │ ├── Hero/ │ │ │ │ └── Hero.jsx │ │ │ ├── PlasmaWave/ │ │ │ │ └── PlasmaWaveV2.jsx │ │ │ ├── Sponsors/ │ │ │ │ ├── Sponsors.css │ │ │ │ └── Sponsors.jsx │ │ │ ├── StartBuilding/ │ │ │ │ ├── StartBuilding.css │ │ │ │ └── StartBuilding.jsx │ │ │ ├── Testimonials/ │ │ │ │ ├── Testimonials.css │ │ │ │ └── Testimonials.jsx │ │ │ └── ToolsShowcase/ │ │ │ ├── ToolsShowcase.css │ │ │ └── ToolsShowcase.jsx │ │ ├── layout/ │ │ │ ├── Providers.jsx │ │ │ └── SidebarLayout.jsx │ │ ├── navs/ │ │ │ ├── Header.jsx │ │ │ └── Sidebar.jsx │ │ └── setup/ │ │ ├── color-mode.jsx │ │ ├── provider.jsx │ │ ├── toaster.jsx │ │ └── tooltip.jsx │ ├── constants/ │ │ ├── Categories.js │ │ ├── Components.js │ │ ├── Information.js │ │ ├── Showcase.js │ │ ├── Site.js │ │ ├── Sponsors.js │ │ ├── Tools.js │ │ ├── code/ │ │ │ ├── Animations/ │ │ │ │ ├── animatedContentCode.js │ │ │ │ ├── antigravityCode.js │ │ │ │ ├── blobCursorCode.js │ │ │ │ ├── clickSparkCode.js │ │ │ │ ├── crosshairCode.js │ │ │ │ ├── cubesCode.js │ │ │ │ ├── electricBorderCode.js │ │ │ │ ├── fadeContentCode.js │ │ │ │ ├── ghostCursorCode.js │ │ │ │ ├── glareHoverCode.js │ │ │ │ ├── gradualblurCode.js │ │ │ │ ├── imageTrailCode.js │ │ │ │ ├── laserFlowCode.js │ │ │ │ ├── logoLoopCode.js │ │ │ │ ├── magicRingsCode.js │ │ │ │ ├── magnetCode.js │ │ │ │ ├── magnetLinesCode.js │ │ │ │ ├── metaBallsCode.js │ │ │ │ ├── metallicPaintCode.js │ │ │ │ ├── noiseCode.js │ │ │ │ ├── orbitImagesCode.js │ │ │ │ ├── pixelTrailCode.js │ │ │ │ ├── pixelTransitionCode.js │ │ │ │ ├── ribbonsCode.js │ │ │ │ ├── shapeBlurCode.js │ │ │ │ ├── splashCursorCode.js │ │ │ │ ├── starBorderCode.js │ │ │ │ ├── stickerPeelCode.js │ │ │ │ └── targetCursorCode.js │ │ │ ├── Backgrounds/ │ │ │ │ ├── auroraCode.js │ │ │ │ ├── balatroCode.js │ │ │ │ ├── ballpitCode.js │ │ │ │ ├── beamsCode.js │ │ │ │ ├── colorBendsCode.js │ │ │ │ ├── darkVeilCode.js │ │ │ │ ├── ditherCode.js │ │ │ │ ├── dotGridCode.js │ │ │ │ ├── evilEyeCode.js │ │ │ │ ├── faultyTerminalCode.js │ │ │ │ ├── floatingLinesCode.js │ │ │ │ ├── galaxyCode.js │ │ │ │ ├── gradientBlindsCode.js │ │ │ │ ├── grainientCode.js │ │ │ │ ├── gridDistortionCode.js │ │ │ │ ├── gridMotionCode.js │ │ │ │ ├── gridScanCode.js │ │ │ │ ├── hyperspeedCode.js │ │ │ │ ├── iridescenceCode.js │ │ │ │ ├── letterGlitchCode.js │ │ │ │ ├── lightPillarCode.js │ │ │ │ ├── lightRaysCode.js │ │ │ │ ├── lightningCode.js │ │ │ │ ├── lineWavesCode.js │ │ │ │ ├── liquidChromeCode.js │ │ │ │ ├── liquidEtherCode.js │ │ │ │ ├── orbCode.js │ │ │ │ ├── particlesCode.js │ │ │ │ ├── pixelBlastCode.js │ │ │ │ ├── pixelSnowCode.js │ │ │ │ ├── plasmaCode.js │ │ │ │ ├── prismCode.js │ │ │ │ ├── prismaticBurstCode.js │ │ │ │ ├── radarCode.js │ │ │ │ ├── rippleGridCode.js │ │ │ │ ├── shapeGridCode.js │ │ │ │ ├── silkCode.js │ │ │ │ ├── softAuroraCode.js │ │ │ │ ├── threadsCode.js │ │ │ │ └── wavesCode.js │ │ │ ├── Components/ │ │ │ │ ├── animatedListCode.js │ │ │ │ ├── borderGlowCode.js │ │ │ │ ├── bounceCardsCode.js │ │ │ │ ├── bubbleMenuCode.js │ │ │ │ ├── cardNavCode.js │ │ │ │ ├── cardSwapCode.js │ │ │ │ ├── carouselCode.js │ │ │ │ ├── chromaGridCode.js │ │ │ │ ├── circularGalleryCode.js │ │ │ │ ├── counterCode.js │ │ │ │ ├── decayCardCode.js │ │ │ │ ├── dockCode.js │ │ │ │ ├── domeGalleryCode.js │ │ │ │ ├── elasticSliderCode.js │ │ │ │ ├── flowingMenuCode.js │ │ │ │ ├── fluidGlassCode.js │ │ │ │ ├── flyingPostersCode.js │ │ │ │ ├── folderCode.js │ │ │ │ ├── glassIconsCode.js │ │ │ │ ├── glassSurfaceCode.js │ │ │ │ ├── gooeyNavCode.js │ │ │ │ ├── infiniteMenuCode.js │ │ │ │ ├── lanyardCode.js │ │ │ │ ├── magicBentoCode.js │ │ │ │ ├── masonryCode.js │ │ │ │ ├── modelViewerCode.js │ │ │ │ ├── pillNavCode.js │ │ │ │ ├── pixelCardCode.js │ │ │ │ ├── profileCardCode.js │ │ │ │ ├── reflectiveCardCode.js │ │ │ │ ├── scrollStackCode.js │ │ │ │ ├── spotlightCardCode.js │ │ │ │ ├── stackCode.js │ │ │ │ ├── staggeredMenuCode.js │ │ │ │ ├── stepperCode.js │ │ │ │ └── tiltedCardCode.js │ │ │ └── TextAnimations/ │ │ │ ├── asciiTextCode.js │ │ │ ├── blurTextCode.js │ │ │ ├── circularTextCode.js │ │ │ ├── countUpCode.js │ │ │ ├── curvedLoopCode.js │ │ │ ├── decryptedTextCode.js │ │ │ ├── fallingTextCode.js │ │ │ ├── fuzzyTextCode.js │ │ │ ├── glitchTextCode.js │ │ │ ├── gradientTextCode.js │ │ │ ├── rotatingTextCode.js │ │ │ ├── scrambledTextCode.js │ │ │ ├── scrollFloatCode.js │ │ │ ├── scrollRevealCode.js │ │ │ ├── scrollVelocityCode.js │ │ │ ├── shinyTextCode.js │ │ │ ├── shuffleCode.js │ │ │ ├── splitTextCode.js │ │ │ ├── textCursorCode.js │ │ │ ├── textPressureCode.js │ │ │ ├── textTypeCode.js │ │ │ ├── trueFocusCode.js │ │ │ └── variableProximityCode.js │ │ └── colors.js │ ├── content/ │ │ ├── Animations/ │ │ │ ├── AnimatedContent/ │ │ │ │ └── AnimatedContent.jsx │ │ │ ├── Antigravity/ │ │ │ │ └── Antigravity.jsx │ │ │ ├── BlobCursor/ │ │ │ │ ├── BlobCursor.css │ │ │ │ └── BlobCursor.jsx │ │ │ ├── ClickSpark/ │ │ │ │ └── ClickSpark.jsx │ │ │ ├── Crosshair/ │ │ │ │ └── Crosshair.jsx │ │ │ ├── Cubes/ │ │ │ │ ├── Cubes.css │ │ │ │ └── Cubes.jsx │ │ │ ├── ElectricBorder/ │ │ │ │ ├── ElectricBorder.css │ │ │ │ └── ElectricBorder.jsx │ │ │ ├── FadeContent/ │ │ │ │ └── FadeContent.jsx │ │ │ ├── GhostCursor/ │ │ │ │ ├── GhostCursor.css │ │ │ │ └── GhostCursor.jsx │ │ │ ├── GlareHover/ │ │ │ │ ├── GlareHover.css │ │ │ │ └── GlareHover.jsx │ │ │ ├── GradualBlur/ │ │ │ │ ├── GradualBlur.css │ │ │ │ └── GradualBlur.jsx │ │ │ ├── ImageTrail/ │ │ │ │ ├── ImageTrail.css │ │ │ │ └── ImageTrail.jsx │ │ │ ├── LaserFlow/ │ │ │ │ ├── LaserFlow.css │ │ │ │ └── LaserFlow.jsx │ │ │ ├── LogoLoop/ │ │ │ │ ├── LogoLoop.css │ │ │ │ └── LogoLoop.jsx │ │ │ ├── MagicRings/ │ │ │ │ ├── MagicRings.css │ │ │ │ └── MagicRings.jsx │ │ │ ├── Magnet/ │ │ │ │ └── Magnet.jsx │ │ │ ├── MagnetLines/ │ │ │ │ ├── MagnetLines.css │ │ │ │ └── MagnetLines.jsx │ │ │ ├── MetaBalls/ │ │ │ │ ├── MetaBalls.css │ │ │ │ └── MetaBalls.jsx │ │ │ ├── MetallicPaint/ │ │ │ │ ├── MetallicPaint.css │ │ │ │ └── MetallicPaint.jsx │ │ │ ├── Noise/ │ │ │ │ ├── Noise.css │ │ │ │ └── Noise.jsx │ │ │ ├── OrbitImages/ │ │ │ │ ├── OrbitImages.css │ │ │ │ └── OrbitImages.jsx │ │ │ ├── PixelTrail/ │ │ │ │ ├── PixelTrail.css │ │ │ │ └── PixelTrail.jsx │ │ │ ├── PixelTransition/ │ │ │ │ ├── PixelTransition.css │ │ │ │ └── PixelTransition.jsx │ │ │ ├── Ribbons/ │ │ │ │ ├── Ribbons.css │ │ │ │ └── Ribbons.jsx │ │ │ ├── ShapeBlur/ │ │ │ │ └── ShapeBlur.jsx │ │ │ ├── SplashCursor/ │ │ │ │ └── SplashCursor.jsx │ │ │ ├── StarBorder/ │ │ │ │ ├── StarBorder.css │ │ │ │ └── StarBorder.jsx │ │ │ ├── StickerPeel/ │ │ │ │ ├── StickerPeel.css │ │ │ │ └── StickerPeel.jsx │ │ │ └── TargetCursor/ │ │ │ ├── TargetCursor.css │ │ │ └── TargetCursor.jsx │ │ ├── Backgrounds/ │ │ │ ├── Aurora/ │ │ │ │ ├── Aurora.css │ │ │ │ └── Aurora.jsx │ │ │ ├── Balatro/ │ │ │ │ ├── Balatro.css │ │ │ │ └── Balatro.jsx │ │ │ ├── Ballpit/ │ │ │ │ └── Ballpit.jsx │ │ │ ├── Beams/ │ │ │ │ ├── Beams.css │ │ │ │ └── Beams.jsx │ │ │ ├── ColorBends/ │ │ │ │ ├── ColorBends.css │ │ │ │ └── ColorBends.jsx │ │ │ ├── DarkVeil/ │ │ │ │ ├── DarkVeil.css │ │ │ │ └── DarkVeil.jsx │ │ │ ├── Dither/ │ │ │ │ ├── Dither.css │ │ │ │ └── Dither.jsx │ │ │ ├── DotGrid/ │ │ │ │ ├── DotGrid.css │ │ │ │ └── DotGrid.jsx │ │ │ ├── EvilEye/ │ │ │ │ ├── EvilEye.css │ │ │ │ └── EvilEye.jsx │ │ │ ├── FaultyTerminal/ │ │ │ │ ├── FaultyTerminal.css │ │ │ │ └── FaultyTerminal.jsx │ │ │ ├── FloatingLines/ │ │ │ │ ├── FloatingLines.css │ │ │ │ └── FloatingLines.jsx │ │ │ ├── Galaxy/ │ │ │ │ ├── Galaxy.css │ │ │ │ └── Galaxy.jsx │ │ │ ├── GradientBlinds/ │ │ │ │ ├── GradientBlinds.css │ │ │ │ └── GradientBlinds.jsx │ │ │ ├── Grainient/ │ │ │ │ ├── Grainient.css │ │ │ │ └── Grainient.jsx │ │ │ ├── GridDistortion/ │ │ │ │ ├── GridDistortion.css │ │ │ │ └── GridDistortion.jsx │ │ │ ├── GridMotion/ │ │ │ │ ├── GridMotion.css │ │ │ │ └── GridMotion.jsx │ │ │ ├── GridScan/ │ │ │ │ ├── GridScan.css │ │ │ │ └── GridScan.jsx │ │ │ ├── Hyperspeed/ │ │ │ │ ├── HyperSpeedPresets.js │ │ │ │ ├── Hyperspeed.css │ │ │ │ └── Hyperspeed.jsx │ │ │ ├── Iridescence/ │ │ │ │ ├── Iridescence.css │ │ │ │ └── Iridescence.jsx │ │ │ ├── LetterGlitch/ │ │ │ │ └── LetterGlitch.jsx │ │ │ ├── LightPillar/ │ │ │ │ ├── LightPillar.css │ │ │ │ └── LightPillar.jsx │ │ │ ├── LightRays/ │ │ │ │ ├── LightRays.css │ │ │ │ └── LightRays.jsx │ │ │ ├── Lightning/ │ │ │ │ ├── Lightning.css │ │ │ │ └── Lightning.jsx │ │ │ ├── LineWaves/ │ │ │ │ ├── LineWaves.css │ │ │ │ └── LineWaves.jsx │ │ │ ├── LiquidChrome/ │ │ │ │ ├── LiquidChrome.css │ │ │ │ └── LiquidChrome.jsx │ │ │ ├── LiquidEther/ │ │ │ │ ├── LiquidEther.css │ │ │ │ └── LiquidEther.jsx │ │ │ ├── Orb/ │ │ │ │ ├── Orb.css │ │ │ │ └── Orb.jsx │ │ │ ├── Particles/ │ │ │ │ ├── Particles.css │ │ │ │ └── Particles.jsx │ │ │ ├── PixelBlast/ │ │ │ │ ├── PixelBlast.css │ │ │ │ └── PixelBlast.jsx │ │ │ ├── PixelSnow/ │ │ │ │ ├── PixelSnow.css │ │ │ │ └── PixelSnow.jsx │ │ │ ├── Plasma/ │ │ │ │ ├── Plasma.css │ │ │ │ └── Plasma.jsx │ │ │ ├── Prism/ │ │ │ │ ├── Prism.css │ │ │ │ └── Prism.jsx │ │ │ ├── PrismaticBurst/ │ │ │ │ ├── PrismaticBurst.css │ │ │ │ └── PrismaticBurst.jsx │ │ │ ├── Radar/ │ │ │ │ ├── Radar.css │ │ │ │ └── Radar.jsx │ │ │ ├── RippleGrid/ │ │ │ │ ├── RippleGrid.css │ │ │ │ └── RippleGrid.jsx │ │ │ ├── ShapeGrid/ │ │ │ │ ├── ShapeGrid.css │ │ │ │ └── ShapeGrid.jsx │ │ │ ├── Silk/ │ │ │ │ └── Silk.jsx │ │ │ ├── SoftAurora/ │ │ │ │ ├── SoftAurora.css │ │ │ │ └── SoftAurora.jsx │ │ │ ├── Threads/ │ │ │ │ ├── Threads.css │ │ │ │ └── Threads.jsx │ │ │ └── Waves/ │ │ │ ├── Waves.css │ │ │ └── Waves.jsx │ │ ├── Components/ │ │ │ ├── AnimatedList/ │ │ │ │ ├── AnimatedList.css │ │ │ │ └── AnimatedList.jsx │ │ │ ├── BorderGlow/ │ │ │ │ ├── BorderGlow.css │ │ │ │ └── BorderGlow.jsx │ │ │ ├── BounceCards/ │ │ │ │ ├── BounceCards.css │ │ │ │ └── BounceCards.jsx │ │ │ ├── BubbleMenu/ │ │ │ │ ├── BubbleMenu.css │ │ │ │ └── BubbleMenu.jsx │ │ │ ├── CardNav/ │ │ │ │ ├── CardNav.css │ │ │ │ └── CardNav.jsx │ │ │ ├── CardSwap/ │ │ │ │ ├── CardSwap.css │ │ │ │ └── CardSwap.jsx │ │ │ ├── Carousel/ │ │ │ │ ├── Carousel.css │ │ │ │ └── Carousel.jsx │ │ │ ├── ChromaGrid/ │ │ │ │ ├── ChromaGrid.css │ │ │ │ └── ChromaGrid.jsx │ │ │ ├── CircularGallery/ │ │ │ │ ├── CircularGallery.css │ │ │ │ └── CircularGallery.jsx │ │ │ ├── Counter/ │ │ │ │ ├── Counter.css │ │ │ │ └── Counter.jsx │ │ │ ├── DecayCard/ │ │ │ │ ├── DecayCard.css │ │ │ │ └── DecayCard.jsx │ │ │ ├── Dock/ │ │ │ │ ├── Dock.css │ │ │ │ └── Dock.jsx │ │ │ ├── DomeGallery/ │ │ │ │ ├── DomeGallery.css │ │ │ │ └── DomeGallery.jsx │ │ │ ├── ElasticSlider/ │ │ │ │ ├── ElasticSlider.css │ │ │ │ └── ElasticSlider.jsx │ │ │ ├── FlowingMenu/ │ │ │ │ ├── FlowingMenu.css │ │ │ │ └── FlowingMenu.jsx │ │ │ ├── FluidGlass/ │ │ │ │ └── FluidGlass.jsx │ │ │ ├── FlyingPosters/ │ │ │ │ ├── FlyingPosters.css │ │ │ │ └── FlyingPosters.jsx │ │ │ ├── Folder/ │ │ │ │ ├── Folder.css │ │ │ │ └── Folder.jsx │ │ │ ├── GlassIcons/ │ │ │ │ ├── GlassIcons.css │ │ │ │ └── GlassIcons.jsx │ │ │ ├── GlassSurface/ │ │ │ │ ├── GlassSurface.css │ │ │ │ └── GlassSurface.jsx │ │ │ ├── GooeyNav/ │ │ │ │ ├── GooeyNav.css │ │ │ │ └── GooeyNav.jsx │ │ │ ├── InfiniteMenu/ │ │ │ │ ├── InfiniteMenu.css │ │ │ │ └── InfiniteMenu.jsx │ │ │ ├── Lanyard/ │ │ │ │ ├── Lanyard.css │ │ │ │ ├── Lanyard.jsx │ │ │ │ └── card.glb │ │ │ ├── MagicBento/ │ │ │ │ ├── MagicBento.css │ │ │ │ └── MagicBento.jsx │ │ │ ├── Masonry/ │ │ │ │ ├── Masonry.css │ │ │ │ └── Masonry.jsx │ │ │ ├── ModelViewer/ │ │ │ │ └── ModelViewer.jsx │ │ │ ├── PillNav/ │ │ │ │ ├── PillNav.css │ │ │ │ └── PillNav.jsx │ │ │ ├── PixelCard/ │ │ │ │ ├── PixelCard.css │ │ │ │ └── PixelCard.jsx │ │ │ ├── ProfileCard/ │ │ │ │ ├── ProfileCard.css │ │ │ │ └── ProfileCard.jsx │ │ │ ├── ReflectiveCard/ │ │ │ │ ├── ReflectiveCard.css │ │ │ │ └── ReflectiveCard.jsx │ │ │ ├── ScrollStack/ │ │ │ │ ├── ScrollStack.css │ │ │ │ └── ScrollStack.jsx │ │ │ ├── SpotlightCard/ │ │ │ │ ├── SpotlightCard.css │ │ │ │ └── SpotlightCard.jsx │ │ │ ├── Stack/ │ │ │ │ ├── Stack.css │ │ │ │ └── Stack.jsx │ │ │ ├── StaggeredMenu/ │ │ │ │ ├── StaggeredMenu.css │ │ │ │ └── StaggeredMenu.jsx │ │ │ ├── Stepper/ │ │ │ │ ├── Stepper.css │ │ │ │ └── Stepper.jsx │ │ │ └── TiltedCard/ │ │ │ ├── TiltedCard.css │ │ │ └── TiltedCard.jsx │ │ └── TextAnimations/ │ │ ├── ASCIIText/ │ │ │ └── ASCIIText.jsx │ │ ├── BlurText/ │ │ │ └── BlurText.jsx │ │ ├── CircularText/ │ │ │ ├── CircularText.css │ │ │ └── CircularText.jsx │ │ ├── CountUp/ │ │ │ └── CountUp.jsx │ │ ├── CurvedLoop/ │ │ │ ├── CurvedLoop.css │ │ │ └── CurvedLoop.jsx │ │ ├── DecryptedText/ │ │ │ └── DecryptedText.jsx │ │ ├── FallingText/ │ │ │ ├── FallingText.css │ │ │ └── FallingText.jsx │ │ ├── FuzzyText/ │ │ │ └── FuzzyText.jsx │ │ ├── GlitchText/ │ │ │ ├── GlitchText.css │ │ │ └── GlitchText.jsx │ │ ├── GradientText/ │ │ │ ├── GradientText.css │ │ │ └── GradientText.jsx │ │ ├── RotatingText/ │ │ │ ├── RotatingText.css │ │ │ └── RotatingText.jsx │ │ ├── ScrambledText/ │ │ │ ├── ScrambledText.css │ │ │ └── ScrambledText.jsx │ │ ├── ScrollFloat/ │ │ │ ├── ScrollFloat.css │ │ │ └── ScrollFloat.jsx │ │ ├── ScrollReveal/ │ │ │ ├── ScrollReveal.css │ │ │ └── ScrollReveal.jsx │ │ ├── ScrollVelocity/ │ │ │ ├── ScrollVelocity.css │ │ │ └── ScrollVelocity.jsx │ │ ├── ShinyText/ │ │ │ ├── ShinyText.css │ │ │ └── ShinyText.jsx │ │ ├── Shuffle/ │ │ │ ├── Shuffle.css │ │ │ └── Shuffle.jsx │ │ ├── SplitText/ │ │ │ └── SplitText.jsx │ │ ├── TextCursor/ │ │ │ ├── TextCursor.css │ │ │ └── TextCursor.jsx │ │ ├── TextPressure/ │ │ │ └── TextPressure.jsx │ │ ├── TextType/ │ │ │ ├── TextType.css │ │ │ └── TextType.jsx │ │ ├── TrueFocus/ │ │ │ ├── TrueFocus.css │ │ │ └── TrueFocus.jsx │ │ └── VariableProximity/ │ │ ├── VariableProximity.css │ │ └── VariableProximity.jsx │ ├── css/ │ │ ├── category.css │ │ ├── docs.css │ │ ├── landing.css │ │ ├── misc.css │ │ ├── showcase.css │ │ ├── sidebar.css │ │ ├── skeleton.css │ │ ├── transitions.css │ │ └── variables.css │ ├── demo/ │ │ ├── Animations/ │ │ │ ├── AnimatedContentDemo.jsx │ │ │ ├── AntigravityDemo.jsx │ │ │ ├── BlobCursorDemo.jsx │ │ │ ├── ClickSparkDemo.jsx │ │ │ ├── CrosshairDemo.jsx │ │ │ ├── CubesDemo.jsx │ │ │ ├── ElectricBorderDemo.jsx │ │ │ ├── FadeContentDemo.jsx │ │ │ ├── GhostCursorDemo.jsx │ │ │ ├── GlareHoverDemo.jsx │ │ │ ├── GradualBlurDemo.jsx │ │ │ ├── ImageTrailDemo.jsx │ │ │ ├── LaserFlowDemo.jsx │ │ │ ├── LogoLoopDemo.jsx │ │ │ ├── MagicRingsDemo.jsx │ │ │ ├── MagnetDemo.jsx │ │ │ ├── MagnetLinesDemo.jsx │ │ │ ├── MetaBallsDemo.jsx │ │ │ ├── MetallicPaintDemo.jsx │ │ │ ├── NoiseDemo.jsx │ │ │ ├── OrbitImagesDemo.jsx │ │ │ ├── PixelTrailDemo.jsx │ │ │ ├── PixelTransitionDemo.jsx │ │ │ ├── RibbonsDemo.jsx │ │ │ ├── ShapeBlurDemo.jsx │ │ │ ├── SplashCursorDemo.jsx │ │ │ ├── StarBorderDemo.jsx │ │ │ ├── StickerPeelDemo.jsx │ │ │ └── TargetCursorDemo.jsx │ │ ├── Backgrounds/ │ │ │ ├── AuroraDemo.jsx │ │ │ ├── BalatroDemo.jsx │ │ │ ├── BallpitDemo.jsx │ │ │ ├── BeamsDemo.jsx │ │ │ ├── ColorBendsDemo.jsx │ │ │ ├── DarkVeilDemo.jsx │ │ │ ├── DitherDemo.jsx │ │ │ ├── DotGridDemo.jsx │ │ │ ├── EvilEyeDemo.jsx │ │ │ ├── FaultyTerminalDemo.jsx │ │ │ ├── FloatingLinesDemo.jsx │ │ │ ├── GalaxyDemo.jsx │ │ │ ├── GradientBlindsDemo.jsx │ │ │ ├── GrainientDemo.jsx │ │ │ ├── GridDistortionDemo.jsx │ │ │ ├── GridMotionDemo.jsx │ │ │ ├── GridScanDemo.jsx │ │ │ ├── HyperspeedDemo.jsx │ │ │ ├── IridescenceDemo.jsx │ │ │ ├── LetterGlitchDemo.jsx │ │ │ ├── LightPillarDemo.jsx │ │ │ ├── LightRaysDemo.jsx │ │ │ ├── LightningDemo.jsx │ │ │ ├── LineWavesDemo.jsx │ │ │ ├── LiquidChromeDemo.jsx │ │ │ ├── LiquidEtherDemo.jsx │ │ │ ├── OrbDemo.jsx │ │ │ ├── ParticlesDemo.jsx │ │ │ ├── PixelBlastDemo.jsx │ │ │ ├── PixelSnowDemo.jsx │ │ │ ├── PlasmaDemo.jsx │ │ │ ├── PrismDemo.jsx │ │ │ ├── PrismaticBurstDemo.jsx │ │ │ ├── RadarDemo.jsx │ │ │ ├── RippleGridDemo.jsx │ │ │ ├── ShapeGridDemo.jsx │ │ │ ├── SilkDemo.jsx │ │ │ ├── SoftAuroraDemo.jsx │ │ │ ├── ThreadsDemo.jsx │ │ │ └── WavesDemo.jsx │ │ ├── Components/ │ │ │ ├── AnimatedListDemo.jsx │ │ │ ├── BorderGlowDemo.jsx │ │ │ ├── BounceCardsDemo.jsx │ │ │ ├── BubbleMenuDemo.jsx │ │ │ ├── CardNavDemo.jsx │ │ │ ├── CardSwapDemo.jsx │ │ │ ├── CarouselDemo.jsx │ │ │ ├── ChromaGridDemo.jsx │ │ │ ├── CircularGalleryDemo.jsx │ │ │ ├── CounterDemo.jsx │ │ │ ├── DecayCardDemo.jsx │ │ │ ├── DockDemo.jsx │ │ │ ├── DomeGalleryDemo.jsx │ │ │ ├── ElasticSliderDemo.jsx │ │ │ ├── FlowingMenuDemo.jsx │ │ │ ├── FluidGlassDemo.jsx │ │ │ ├── FlyingPostersDemo.jsx │ │ │ ├── FolderDemo.jsx │ │ │ ├── GlassIconsDemo.jsx │ │ │ ├── GlassSurfaceDemo.jsx │ │ │ ├── GooeyNavDemo.jsx │ │ │ ├── InfiniteMenuDemo.jsx │ │ │ ├── LanyardDemo.jsx │ │ │ ├── MagicBentoDemo.jsx │ │ │ ├── MasonryDemo.jsx │ │ │ ├── ModelViewerDemo.jsx │ │ │ ├── PillNavDemo.jsx │ │ │ ├── PixelCardDemo.jsx │ │ │ ├── ProfileCardDemo.jsx │ │ │ ├── ReflectiveCardDemo.jsx │ │ │ ├── ScrollStackDemo.jsx │ │ │ ├── SpotlightCardDemo.jsx │ │ │ ├── StackDemo.jsx │ │ │ ├── StaggeredMenuDemo.jsx │ │ │ ├── StepperDemo.jsx │ │ │ └── TiltedCardDemo.jsx │ │ └── TextAnimations/ │ │ ├── ASCIITextDemo.jsx │ │ ├── BlurTextDemo.jsx │ │ ├── CircularTextDemo.jsx │ │ ├── CountUpDemo.jsx │ │ ├── CurvedLoopDemo.jsx │ │ ├── DecryptedTextDemo.jsx │ │ ├── FallingTextDemo.jsx │ │ ├── FuzzyTextDemo.jsx │ │ ├── GlitchTextDemo.jsx │ │ ├── GradientTextDemo.jsx │ │ ├── RotatingTextDemo.jsx │ │ ├── ScrambledTextDemo.jsx │ │ ├── ScrollFloatDemo.jsx │ │ ├── ScrollRevealDemo.jsx │ │ ├── ScrollVelocityDemo.jsx │ │ ├── ShinyTextDemo.jsx │ │ ├── ShuffleDemo.jsx │ │ ├── SplitTextDemo.jsx │ │ ├── TextCursorDemo.jsx │ │ ├── TextPressureDemo.jsx │ │ ├── TextTypeDemo.jsx │ │ ├── TrueFocusDemo.jsx │ │ └── VariableProximityDemo.jsx │ ├── docs/ │ │ ├── CodeBlock.jsx │ │ ├── DocsButtonBar.jsx │ │ ├── Installation.jsx │ │ ├── Introduction.jsx │ │ ├── McpServer.jsx │ │ └── MethodSelector.jsx │ ├── global.d.ts │ ├── hooks/ │ │ ├── useActiveRoute.js │ │ ├── useComponentProps.js │ │ ├── useComponentPropsContext.js │ │ ├── useForceRerender.js │ │ ├── useInstallation.js │ │ ├── useScrollToTop.js │ │ ├── useStars.js │ │ └── useTransition.js │ ├── main.jsx │ ├── pages/ │ │ ├── CategoryPage.jsx │ │ ├── FavoritesPage.jsx │ │ ├── IndexPage.jsx │ │ ├── LandingPage.jsx │ │ ├── ShowcasePage.jsx │ │ ├── SponsorsPage.jsx │ │ └── ToolsPage.jsx │ ├── styles.css │ ├── tailwind/ │ │ ├── Animations/ │ │ │ ├── AnimatedContent/ │ │ │ │ └── AnimatedContent.jsx │ │ │ ├── Antigravity/ │ │ │ │ └── Antigravity.jsx │ │ │ ├── BlobCursor/ │ │ │ │ └── BlobCursor.jsx │ │ │ ├── ClickSpark/ │ │ │ │ └── ClickSpark.jsx │ │ │ ├── Crosshair/ │ │ │ │ └── Crosshair.jsx │ │ │ ├── Cubes/ │ │ │ │ └── Cubes.jsx │ │ │ ├── ElectricBorder/ │ │ │ │ └── ElectricBorder.jsx │ │ │ ├── FadeContent/ │ │ │ │ └── FadeContent.jsx │ │ │ ├── GhostCursor/ │ │ │ │ └── GhostCursor.jsx │ │ │ ├── GlareHover/ │ │ │ │ └── GlareHover.jsx │ │ │ ├── GradualBlur/ │ │ │ │ └── GradualBlur.jsx │ │ │ ├── ImageTrail/ │ │ │ │ └── ImageTrail.jsx │ │ │ ├── LaserFlow/ │ │ │ │ └── LaserFlow.jsx │ │ │ ├── LogoLoop/ │ │ │ │ └── LogoLoop.jsx │ │ │ ├── MagicRings/ │ │ │ │ └── MagicRings.jsx │ │ │ ├── Magnet/ │ │ │ │ └── Magnet.jsx │ │ │ ├── MagnetLines/ │ │ │ │ └── MagnetLines.jsx │ │ │ ├── MetaBalls/ │ │ │ │ └── MetaBalls.jsx │ │ │ ├── MetallicPaint/ │ │ │ │ └── MetallicPaint.jsx │ │ │ ├── Noise/ │ │ │ │ └── Noise.jsx │ │ │ ├── OrbitImages/ │ │ │ │ └── OrbitImages.jsx │ │ │ ├── PixelTrail/ │ │ │ │ └── PixelTrail.jsx │ │ │ ├── PixelTransition/ │ │ │ │ └── PixelTransition.jsx │ │ │ ├── Ribbons/ │ │ │ │ └── Ribbons.jsx │ │ │ ├── ShapeBlur/ │ │ │ │ └── ShapeBlur.jsx │ │ │ ├── SplashCursor/ │ │ │ │ └── SplashCursor.jsx │ │ │ ├── StarBorder/ │ │ │ │ └── StarBorder.jsx │ │ │ ├── StickerPeel/ │ │ │ │ └── StickerPeel.jsx │ │ │ └── TargetCursor/ │ │ │ └── TargetCursor.jsx │ │ ├── Backgrounds/ │ │ │ ├── Aurora/ │ │ │ │ └── Aurora.jsx │ │ │ ├── Balatro/ │ │ │ │ └── Balatro.jsx │ │ │ ├── Ballpit/ │ │ │ │ └── Ballpit.jsx │ │ │ ├── Beams/ │ │ │ │ └── Beams.jsx │ │ │ ├── ColorBends/ │ │ │ │ └── ColorBends.jsx │ │ │ ├── DarkVeil/ │ │ │ │ └── DarkVeil.jsx │ │ │ ├── Dither/ │ │ │ │ └── Dither.jsx │ │ │ ├── DotGrid/ │ │ │ │ └── DotGrid.jsx │ │ │ ├── EvilEye/ │ │ │ │ └── EvilEye.jsx │ │ │ ├── FaultyTerminal/ │ │ │ │ └── FaultyTerminal.jsx │ │ │ ├── FloatingLines/ │ │ │ │ └── FloatingLines.jsx │ │ │ ├── Galaxy/ │ │ │ │ └── Galaxy.jsx │ │ │ ├── GradientBlinds/ │ │ │ │ └── GradientBlinds.jsx │ │ │ ├── Grainient/ │ │ │ │ └── Grainient.jsx │ │ │ ├── GridDistortion/ │ │ │ │ └── GridDistortion.jsx │ │ │ ├── GridMotion/ │ │ │ │ └── GridMotion.jsx │ │ │ ├── GridScan/ │ │ │ │ └── GridScan.jsx │ │ │ ├── Hyperspeed/ │ │ │ │ ├── HyperSpeedPresets.js │ │ │ │ └── Hyperspeed.jsx │ │ │ ├── Iridescence/ │ │ │ │ └── Iridescence.jsx │ │ │ ├── LetterGlitch/ │ │ │ │ └── LetterGlitch.jsx │ │ │ ├── LightPillar/ │ │ │ │ └── LightPillar.jsx │ │ │ ├── LightRays/ │ │ │ │ └── LightRays.jsx │ │ │ ├── Lightning/ │ │ │ │ └── Lightning.jsx │ │ │ ├── LineWaves/ │ │ │ │ └── LineWaves.jsx │ │ │ ├── LiquidChrome/ │ │ │ │ └── LiquidChrome.jsx │ │ │ ├── LiquidEther/ │ │ │ │ └── LiquidEther.jsx │ │ │ ├── Orb/ │ │ │ │ └── Orb.jsx │ │ │ ├── Particles/ │ │ │ │ └── Particles.jsx │ │ │ ├── PixelBlast/ │ │ │ │ └── PixelBlast.jsx │ │ │ ├── PixelSnow/ │ │ │ │ └── PixelSnow.jsx │ │ │ ├── Plasma/ │ │ │ │ └── Plasma.jsx │ │ │ ├── Prism/ │ │ │ │ └── Prism.jsx │ │ │ ├── PrismaticBurst/ │ │ │ │ └── PrismaticBurst.jsx │ │ │ ├── Radar/ │ │ │ │ └── Radar.jsx │ │ │ ├── RippleGrid/ │ │ │ │ └── RippleGrid.jsx │ │ │ ├── ShapeGrid/ │ │ │ │ └── ShapeGrid.jsx │ │ │ ├── Silk/ │ │ │ │ └── Silk.jsx │ │ │ ├── SoftAurora/ │ │ │ │ └── SoftAurora.jsx │ │ │ ├── Threads/ │ │ │ │ └── Threads.jsx │ │ │ └── Waves/ │ │ │ └── Waves.jsx │ │ ├── Components/ │ │ │ ├── AnimatedList/ │ │ │ │ └── AnimatedList.jsx │ │ │ ├── BorderGlow/ │ │ │ │ └── BorderGlow.jsx │ │ │ ├── BounceCards/ │ │ │ │ └── BounceCards.jsx │ │ │ ├── BubbleMenu/ │ │ │ │ └── BubbleMenu.jsx │ │ │ ├── CardNav/ │ │ │ │ └── CardNav.jsx │ │ │ ├── CardSwap/ │ │ │ │ └── CardSwap.jsx │ │ │ ├── Carousel/ │ │ │ │ └── Carousel.jsx │ │ │ ├── ChromaGrid/ │ │ │ │ └── ChromaGrid.jsx │ │ │ ├── CircularGallery/ │ │ │ │ └── CircularGallery.jsx │ │ │ ├── Counter/ │ │ │ │ └── Counter.jsx │ │ │ ├── DecayCard/ │ │ │ │ └── DecayCard.jsx │ │ │ ├── Dock/ │ │ │ │ └── Dock.jsx │ │ │ ├── DomeGallery/ │ │ │ │ └── DomeGallery.jsx │ │ │ ├── ElasticSlider/ │ │ │ │ └── ElasticSlider.jsx │ │ │ ├── FlowingMenu/ │ │ │ │ └── FlowingMenu.jsx │ │ │ ├── FluidGlass/ │ │ │ │ └── FluidGlass.jsx │ │ │ ├── FlyingPosters/ │ │ │ │ └── FlyingPosters.jsx │ │ │ ├── Folder/ │ │ │ │ └── Folder.jsx │ │ │ ├── GlassIcons/ │ │ │ │ └── GlassIcons.jsx │ │ │ ├── GlassSurface/ │ │ │ │ └── GlassSurface.jsx │ │ │ ├── GooeyNav/ │ │ │ │ └── GooeyNav.jsx │ │ │ ├── InfiniteMenu/ │ │ │ │ └── InfiniteMenu.jsx │ │ │ ├── Lanyard/ │ │ │ │ ├── Lanyard.jsx │ │ │ │ └── card.glb │ │ │ ├── MagicBento/ │ │ │ │ └── MagicBento.jsx │ │ │ ├── Masonry/ │ │ │ │ └── Masonry.jsx │ │ │ ├── ModelViewer/ │ │ │ │ └── ModelViewer.jsx │ │ │ ├── PillNav/ │ │ │ │ └── PillNav.jsx │ │ │ ├── PixelCard/ │ │ │ │ └── PixelCard.jsx │ │ │ ├── ProfileCard/ │ │ │ │ └── ProfileCard.jsx │ │ │ ├── ReflectiveCard/ │ │ │ │ └── ReflectiveCard.jsx │ │ │ ├── ScrollStack/ │ │ │ │ └── ScrollStack.jsx │ │ │ ├── SpotlightCard/ │ │ │ │ └── SpotlightCard.jsx │ │ │ ├── Stack/ │ │ │ │ └── Stack.jsx │ │ │ ├── StaggeredMenu/ │ │ │ │ └── StaggeredMenu.jsx │ │ │ ├── Stepper/ │ │ │ │ └── Stepper.jsx │ │ │ └── TiltedCard/ │ │ │ └── TiltedCard.jsx │ │ └── TextAnimations/ │ │ ├── ASCIIText/ │ │ │ └── ASCIIText.jsx │ │ ├── BlurText/ │ │ │ └── BlurText.jsx │ │ ├── CircularText/ │ │ │ └── CircularText.jsx │ │ ├── CountUp/ │ │ │ └── CountUp.jsx │ │ ├── CurvedLoop/ │ │ │ └── CurvedLoop.jsx │ │ ├── DecryptedText/ │ │ │ └── DecryptedText.jsx │ │ ├── FallingText/ │ │ │ └── FallingText.jsx │ │ ├── FuzzyText/ │ │ │ └── FuzzyText.jsx │ │ ├── GlitchText/ │ │ │ └── GlitchText.jsx │ │ ├── GradientText/ │ │ │ └── GradientText.jsx │ │ ├── RotatingText/ │ │ │ └── RotatingText.jsx │ │ ├── ScrambledText/ │ │ │ └── ScrambledText.jsx │ │ ├── ScrollFloat/ │ │ │ └── ScrollFloat.jsx │ │ ├── ScrollReveal/ │ │ │ └── ScrollReveal.jsx │ │ ├── ScrollVelocity/ │ │ │ └── ScrollVelocity.jsx │ │ ├── ShinyText/ │ │ │ └── ShinyText.jsx │ │ ├── Shuffle/ │ │ │ └── Shuffle.jsx │ │ ├── SplitText/ │ │ │ └── SplitText.jsx │ │ ├── TextCursor/ │ │ │ └── TextCursor.jsx │ │ ├── TextPressure/ │ │ │ └── TextPressure.jsx │ │ ├── TextType/ │ │ │ └── TextType.jsx │ │ ├── TrueFocus/ │ │ │ └── TrueFocus.jsx │ │ └── VariableProximity/ │ │ └── VariableProximity.jsx │ ├── tools/ │ │ ├── background-studio/ │ │ │ ├── BackgroundStudio.jsx │ │ │ ├── Controls.jsx │ │ │ ├── backgrounds/ │ │ │ │ └── index.js │ │ │ ├── hooks/ │ │ │ │ └── useBackgroundState.js │ │ │ └── utils/ │ │ │ └── exportCode.js │ │ ├── shape-magic/ │ │ │ ├── Canvas.jsx │ │ │ ├── Controls.jsx │ │ │ ├── ShapeMagic.jsx │ │ │ ├── computeBridges.js │ │ │ ├── svgRenderers.js │ │ │ └── types.js │ │ ├── texture-lab/ │ │ │ ├── Canvas.jsx │ │ │ ├── Controls.jsx │ │ │ ├── TextureLab.jsx │ │ │ ├── renderer.js │ │ │ ├── shaders.js │ │ │ ├── types.js │ │ │ └── utils.js │ │ └── tools.css │ ├── ts-default/ │ │ ├── Animations/ │ │ │ ├── AnimatedContent/ │ │ │ │ └── AnimatedContent.tsx │ │ │ ├── Antigravity/ │ │ │ │ └── Antigravity.tsx │ │ │ ├── BlobCursor/ │ │ │ │ ├── BlobCursor.css │ │ │ │ └── BlobCursor.tsx │ │ │ ├── ClickSpark/ │ │ │ │ └── ClickSpark.tsx │ │ │ ├── Crosshair/ │ │ │ │ └── Crosshair.tsx │ │ │ ├── Cubes/ │ │ │ │ ├── Cubes.css │ │ │ │ └── Cubes.tsx │ │ │ ├── ElectricBorder/ │ │ │ │ ├── ElectricBorder.css │ │ │ │ └── ElectricBorder.tsx │ │ │ ├── FadeContent/ │ │ │ │ └── FadeContent.tsx │ │ │ ├── GhostCursor/ │ │ │ │ ├── GhostCursor.css │ │ │ │ └── GhostCursor.tsx │ │ │ ├── GlareHover/ │ │ │ │ ├── GlareHover.css │ │ │ │ └── GlareHover.tsx │ │ │ ├── GradualBlur/ │ │ │ │ ├── GradualBlur.css │ │ │ │ └── GradualBlur.tsx │ │ │ ├── ImageTrail/ │ │ │ │ ├── ImageTrail.css │ │ │ │ └── ImageTrail.tsx │ │ │ ├── LaserFlow/ │ │ │ │ ├── LaserFlow.css │ │ │ │ └── LaserFlow.tsx │ │ │ ├── LogoLoop/ │ │ │ │ ├── LogoLoop.css │ │ │ │ └── LogoLoop.tsx │ │ │ ├── MagicRings/ │ │ │ │ ├── MagicRings.css │ │ │ │ └── MagicRings.tsx │ │ │ ├── Magnet/ │ │ │ │ └── Magnet.tsx │ │ │ ├── MagnetLines/ │ │ │ │ ├── MagnetLines.css │ │ │ │ └── MagnetLines.tsx │ │ │ ├── MetaBalls/ │ │ │ │ ├── MetaBalls.css │ │ │ │ └── MetaBalls.tsx │ │ │ ├── MetallicPaint/ │ │ │ │ ├── MetallicPaint.css │ │ │ │ └── MetallicPaint.tsx │ │ │ ├── Noise/ │ │ │ │ ├── Noise.css │ │ │ │ └── Noise.tsx │ │ │ ├── OrbitImages/ │ │ │ │ ├── OrbitImages.css │ │ │ │ └── OrbitImages.tsx │ │ │ ├── PixelTrail/ │ │ │ │ ├── PixelTrail.css │ │ │ │ └── PixelTrail.tsx │ │ │ ├── PixelTransition/ │ │ │ │ ├── PixelTransition.css │ │ │ │ └── PixelTransition.tsx │ │ │ ├── Ribbons/ │ │ │ │ ├── Ribbons.css │ │ │ │ └── Ribbons.tsx │ │ │ ├── ShapeBlur/ │ │ │ │ └── ShapeBlur.tsx │ │ │ ├── SplashCursor/ │ │ │ │ └── SplashCursor.tsx │ │ │ ├── StarBorder/ │ │ │ │ ├── StarBorder.css │ │ │ │ └── StarBorder.tsx │ │ │ ├── StickerPeel/ │ │ │ │ ├── StickerPeel.css │ │ │ │ └── StickerPeel.tsx │ │ │ └── TargetCursor/ │ │ │ ├── TargetCursor.css │ │ │ └── TargetCursor.tsx │ │ ├── Backgrounds/ │ │ │ ├── Aurora/ │ │ │ │ ├── Aurora.css │ │ │ │ └── Aurora.tsx │ │ │ ├── Balatro/ │ │ │ │ ├── Balatro.css │ │ │ │ └── Balatro.tsx │ │ │ ├── Ballpit/ │ │ │ │ └── Ballpit.tsx │ │ │ ├── Beams/ │ │ │ │ ├── Beams.css │ │ │ │ └── Beams.tsx │ │ │ ├── ColorBends/ │ │ │ │ ├── ColorBends.css │ │ │ │ └── ColorBends.tsx │ │ │ ├── DarkVeil/ │ │ │ │ ├── DarkVeil.css │ │ │ │ └── DarkVeil.tsx │ │ │ ├── Dither/ │ │ │ │ ├── Dither.css │ │ │ │ └── Dither.tsx │ │ │ ├── DotGrid/ │ │ │ │ ├── DotGrid.css │ │ │ │ └── DotGrid.tsx │ │ │ ├── EvilEye/ │ │ │ │ ├── EvilEye.css │ │ │ │ └── EvilEye.tsx │ │ │ ├── FaultyTerminal/ │ │ │ │ ├── FaultyTerminal.css │ │ │ │ └── FaultyTerminal.tsx │ │ │ ├── FloatingLines/ │ │ │ │ ├── FloatingLines.css │ │ │ │ └── FloatingLines.tsx │ │ │ ├── Galaxy/ │ │ │ │ ├── Galaxy.css │ │ │ │ └── Galaxy.tsx │ │ │ ├── GradientBlinds/ │ │ │ │ ├── GradientBlinds.css │ │ │ │ └── GradientBlinds.tsx │ │ │ ├── Grainient/ │ │ │ │ ├── Grainient.css │ │ │ │ └── Grainient.tsx │ │ │ ├── GridDistortion/ │ │ │ │ ├── GridDistortion.css │ │ │ │ └── GridDistortion.tsx │ │ │ ├── GridMotion/ │ │ │ │ ├── GridMotion.css │ │ │ │ └── GridMotion.tsx │ │ │ ├── GridScan/ │ │ │ │ ├── GridScan.css │ │ │ │ └── GridScan.tsx │ │ │ ├── Hyperspeed/ │ │ │ │ ├── HyperSpeedPresets.ts │ │ │ │ ├── Hyperspeed.css │ │ │ │ └── Hyperspeed.tsx │ │ │ ├── Iridescence/ │ │ │ │ ├── Iridescence.css │ │ │ │ └── Iridescence.tsx │ │ │ ├── LetterGlitch/ │ │ │ │ └── LetterGlitch.tsx │ │ │ ├── LightPillar/ │ │ │ │ ├── LightPillar.css │ │ │ │ └── LightPillar.tsx │ │ │ ├── LightRays/ │ │ │ │ ├── LightRays.css │ │ │ │ └── LightRays.tsx │ │ │ ├── Lightning/ │ │ │ │ ├── Lightning.css │ │ │ │ └── Lightning.tsx │ │ │ ├── LineWaves/ │ │ │ │ ├── LineWaves.css │ │ │ │ └── LineWaves.tsx │ │ │ ├── LiquidChrome/ │ │ │ │ ├── LiquidChrome.css │ │ │ │ └── LiquidChrome.tsx │ │ │ ├── LiquidEther/ │ │ │ │ ├── LiquidEther.css │ │ │ │ └── LiquidEther.tsx │ │ │ ├── Orb/ │ │ │ │ ├── Orb.css │ │ │ │ └── Orb.tsx │ │ │ ├── Particles/ │ │ │ │ ├── Particles.css │ │ │ │ └── Particles.tsx │ │ │ ├── PixelBlast/ │ │ │ │ ├── PixelBlast.css │ │ │ │ └── PixelBlast.tsx │ │ │ ├── PixelSnow/ │ │ │ │ ├── PixelSnow.css │ │ │ │ └── PixelSnow.tsx │ │ │ ├── Plasma/ │ │ │ │ ├── Plasma.css │ │ │ │ └── Plasma.tsx │ │ │ ├── Prism/ │ │ │ │ ├── Prism.css │ │ │ │ └── Prism.tsx │ │ │ ├── PrismaticBurst/ │ │ │ │ ├── PrismaticBurst.css │ │ │ │ └── PrismaticBurst.tsx │ │ │ ├── Radar/ │ │ │ │ ├── Radar.css │ │ │ │ └── Radar.tsx │ │ │ ├── RippleGrid/ │ │ │ │ ├── RippleGrid.css │ │ │ │ └── RippleGrid.tsx │ │ │ ├── ShapeGrid/ │ │ │ │ ├── ShapeGrid.css │ │ │ │ └── ShapeGrid.tsx │ │ │ ├── Silk/ │ │ │ │ └── Silk.tsx │ │ │ ├── SoftAurora/ │ │ │ │ ├── SoftAurora.css │ │ │ │ └── SoftAurora.tsx │ │ │ ├── Threads/ │ │ │ │ ├── Threads.css │ │ │ │ └── Threads.tsx │ │ │ └── Waves/ │ │ │ ├── Waves.css │ │ │ └── Waves.tsx │ │ ├── Components/ │ │ │ ├── AnimatedList/ │ │ │ │ ├── AnimatedList.css │ │ │ │ └── AnimatedList.tsx │ │ │ ├── BorderGlow/ │ │ │ │ ├── BorderGlow.css │ │ │ │ └── BorderGlow.tsx │ │ │ ├── BounceCards/ │ │ │ │ ├── BounceCards.css │ │ │ │ └── BounceCards.tsx │ │ │ ├── BubbleMenu/ │ │ │ │ ├── BubbleMenu.css │ │ │ │ └── BubbleMenu.tsx │ │ │ ├── CardNav/ │ │ │ │ ├── CardNav.css │ │ │ │ └── CardNav.tsx │ │ │ ├── CardSwap/ │ │ │ │ ├── CardSwap.css │ │ │ │ └── CardSwap.tsx │ │ │ ├── Carousel/ │ │ │ │ ├── Carousel.css │ │ │ │ └── Carousel.tsx │ │ │ ├── ChromaGrid/ │ │ │ │ ├── ChromaGrid.css │ │ │ │ └── ChromaGrid.tsx │ │ │ ├── CircularGallery/ │ │ │ │ ├── CircularGallery.css │ │ │ │ └── CircularGallery.tsx │ │ │ ├── Counter/ │ │ │ │ ├── Counter.css │ │ │ │ └── Counter.tsx │ │ │ ├── DecayCard/ │ │ │ │ ├── DecayCard.css │ │ │ │ └── DecayCard.tsx │ │ │ ├── Dock/ │ │ │ │ ├── Dock.css │ │ │ │ └── Dock.tsx │ │ │ ├── DomeGallery/ │ │ │ │ ├── DomeGallery.css │ │ │ │ └── DomeGallery.tsx │ │ │ ├── ElasticSlider/ │ │ │ │ ├── ElasticSlider.css │ │ │ │ └── ElasticSlider.tsx │ │ │ ├── FlowingMenu/ │ │ │ │ ├── FlowingMenu.css │ │ │ │ └── FlowingMenu.tsx │ │ │ ├── FluidGlass/ │ │ │ │ └── FluidGlass.tsx │ │ │ ├── FlyingPosters/ │ │ │ │ ├── FlyingPosters.css │ │ │ │ └── FlyingPosters.tsx │ │ │ ├── Folder/ │ │ │ │ ├── Folder.css │ │ │ │ └── Folder.tsx │ │ │ ├── GlassIcons/ │ │ │ │ ├── GlassIcons.css │ │ │ │ └── GlassIcons.tsx │ │ │ ├── GlassSurface/ │ │ │ │ ├── GlassSurface.css │ │ │ │ └── GlassSurface.tsx │ │ │ ├── GooeyNav/ │ │ │ │ ├── GooeyNav.css │ │ │ │ └── GooeyNav.tsx │ │ │ ├── InfiniteMenu/ │ │ │ │ ├── InfiniteMenu.css │ │ │ │ └── InfiniteMenu.tsx │ │ │ ├── Lanyard/ │ │ │ │ ├── Lanyard.css │ │ │ │ ├── Lanyard.tsx │ │ │ │ └── card.glb │ │ │ ├── MagicBento/ │ │ │ │ ├── MagicBento.css │ │ │ │ └── MagicBento.tsx │ │ │ ├── Masonry/ │ │ │ │ ├── Masonry.css │ │ │ │ └── Masonry.tsx │ │ │ ├── ModelViewer/ │ │ │ │ └── ModelViewer.tsx │ │ │ ├── PillNav/ │ │ │ │ ├── PillNav.css │ │ │ │ └── PillNav.tsx │ │ │ ├── PixelCard/ │ │ │ │ ├── PixelCard.css │ │ │ │ └── PixelCard.tsx │ │ │ ├── ProfileCard/ │ │ │ │ ├── ProfileCard.css │ │ │ │ └── ProfileCard.tsx │ │ │ ├── ReflectiveCard/ │ │ │ │ ├── ReflectiveCard.css │ │ │ │ └── ReflectiveCard.tsx │ │ │ ├── ScrollStack/ │ │ │ │ ├── ScrollStack.css │ │ │ │ └── ScrollStack.tsx │ │ │ ├── SpotlightCard/ │ │ │ │ ├── SpotlightCard.css │ │ │ │ └── SpotlightCard.tsx │ │ │ ├── Stack/ │ │ │ │ ├── Stack.css │ │ │ │ └── Stack.tsx │ │ │ ├── StaggeredMenu/ │ │ │ │ ├── StaggeredMenu.css │ │ │ │ └── StaggeredMenu.tsx │ │ │ ├── Stepper/ │ │ │ │ ├── Stepper.css │ │ │ │ └── Stepper.tsx │ │ │ └── TiltedCard/ │ │ │ ├── TiltedCard.css │ │ │ └── TiltedCard.tsx │ │ └── TextAnimations/ │ │ ├── ASCIIText/ │ │ │ └── ASCIIText.tsx │ │ ├── BlurText/ │ │ │ └── BlurText.tsx │ │ ├── CircularText/ │ │ │ ├── CircularText.css │ │ │ └── CircularText.tsx │ │ ├── CountUp/ │ │ │ └── CountUp.tsx │ │ ├── CurvedLoop/ │ │ │ ├── CurvedLoop.css │ │ │ └── CurvedLoop.tsx │ │ ├── DecryptedText/ │ │ │ └── DecryptedText.tsx │ │ ├── FallingText/ │ │ │ ├── FallingText.css │ │ │ └── FallingText.tsx │ │ ├── FuzzyText/ │ │ │ └── FuzzyText.tsx │ │ ├── GlitchText/ │ │ │ ├── GlitchText.css │ │ │ └── GlitchText.tsx │ │ ├── GradientText/ │ │ │ ├── GradientText.css │ │ │ └── GradientText.tsx │ │ ├── RotatingText/ │ │ │ ├── RotatingText.css │ │ │ └── RotatingText.tsx │ │ ├── ScrambledText/ │ │ │ ├── ScrambledText.css │ │ │ └── ScrambledText.tsx │ │ ├── ScrollFloat/ │ │ │ ├── ScrollFloat.css │ │ │ └── ScrollFloat.tsx │ │ ├── ScrollReveal/ │ │ │ ├── ScrollReveal.css │ │ │ └── ScrollReveal.tsx │ │ ├── ScrollVelocity/ │ │ │ ├── ScrollVelocity.css │ │ │ └── ScrollVelocity.tsx │ │ ├── ShinyText/ │ │ │ ├── ShinyText.css │ │ │ └── ShinyText.tsx │ │ ├── Shuffle/ │ │ │ ├── Shuffle.css │ │ │ └── Shuffle.tsx │ │ ├── SplitText/ │ │ │ └── SplitText.tsx │ │ ├── TextCursor/ │ │ │ ├── TextCursor.css │ │ │ └── TextCursor.tsx │ │ ├── TextPressure/ │ │ │ └── TextPressure.tsx │ │ ├── TextType/ │ │ │ ├── TextType.css │ │ │ └── TextType.tsx │ │ ├── TrueFocus/ │ │ │ ├── TrueFocus.css │ │ │ └── TrueFocus.tsx │ │ └── VariableProximity/ │ │ ├── VariableProximity.css │ │ └── VariableProximity.tsx │ ├── ts-tailwind/ │ │ ├── Animations/ │ │ │ ├── AnimatedContent/ │ │ │ │ └── AnimatedContent.tsx │ │ │ ├── Antigravity/ │ │ │ │ └── Antigravity.tsx │ │ │ ├── BlobCursor/ │ │ │ │ └── BlobCursor.tsx │ │ │ ├── ClickSpark/ │ │ │ │ └── ClickSpark.tsx │ │ │ ├── Crosshair/ │ │ │ │ └── Crosshair.tsx │ │ │ ├── Cubes/ │ │ │ │ └── Cubes.tsx │ │ │ ├── ElectricBorder/ │ │ │ │ └── ElectricBorder.tsx │ │ │ ├── FadeContent/ │ │ │ │ └── FadeContent.tsx │ │ │ ├── GhostCursor/ │ │ │ │ └── GhostCursor.tsx │ │ │ ├── GlareHover/ │ │ │ │ └── GlareHover.tsx │ │ │ ├── GradualBlur/ │ │ │ │ └── GradualBlur.tsx │ │ │ ├── ImageTrail/ │ │ │ │ └── ImageTrail.tsx │ │ │ ├── LaserFlow/ │ │ │ │ └── LaserFlow.tsx │ │ │ ├── LogoLoop/ │ │ │ │ └── LogoLoop.tsx │ │ │ ├── MagicRings/ │ │ │ │ └── MagicRings.tsx │ │ │ ├── Magnet/ │ │ │ │ └── Magnet.tsx │ │ │ ├── MagnetLines/ │ │ │ │ └── MagnetLines.tsx │ │ │ ├── MetaBalls/ │ │ │ │ └── MetaBalls.tsx │ │ │ ├── MetallicPaint/ │ │ │ │ └── MetallicPaint.tsx │ │ │ ├── Noise/ │ │ │ │ └── Noise.tsx │ │ │ ├── OrbitImages/ │ │ │ │ └── OrbitImages.tsx │ │ │ ├── PixelTrail/ │ │ │ │ └── PixelTrail.tsx │ │ │ ├── PixelTransition/ │ │ │ │ └── PixelTransition.tsx │ │ │ ├── Ribbons/ │ │ │ │ └── Ribbons.tsx │ │ │ ├── ShapeBlur/ │ │ │ │ └── ShapeBlur.tsx │ │ │ ├── SplashCursor/ │ │ │ │ └── SplashCursor.tsx │ │ │ ├── StarBorder/ │ │ │ │ └── StarBorder.tsx │ │ │ ├── StickerPeel/ │ │ │ │ └── StickerPeel.tsx │ │ │ └── TargetCursor/ │ │ │ └── TargetCursor.tsx │ │ ├── Backgrounds/ │ │ │ ├── Aurora/ │ │ │ │ └── Aurora.tsx │ │ │ ├── Balatro/ │ │ │ │ └── Balatro.tsx │ │ │ ├── Ballpit/ │ │ │ │ └── Ballpit.tsx │ │ │ ├── Beams/ │ │ │ │ └── Beams.tsx │ │ │ ├── ColorBends/ │ │ │ │ └── ColorBends.tsx │ │ │ ├── DarkVeil/ │ │ │ │ └── DarkVeil.tsx │ │ │ ├── Dither/ │ │ │ │ └── Dither.tsx │ │ │ ├── DotGrid/ │ │ │ │ └── DotGrid.tsx │ │ │ ├── EvilEye/ │ │ │ │ └── EvilEye.tsx │ │ │ ├── FaultyTerminal/ │ │ │ │ └── FaultyTerminal.tsx │ │ │ ├── FloatingLines/ │ │ │ │ └── FloatingLines.tsx │ │ │ ├── Galaxy/ │ │ │ │ └── Galaxy.tsx │ │ │ ├── GradientBlinds/ │ │ │ │ └── GradientBlinds.tsx │ │ │ ├── Grainient/ │ │ │ │ └── Grainient.tsx │ │ │ ├── GridDistortion/ │ │ │ │ └── GridDistortion.tsx │ │ │ ├── GridMotion/ │ │ │ │ └── GridMotion.tsx │ │ │ ├── GridScan/ │ │ │ │ └── GridScan.tsx │ │ │ ├── Hyperspeed/ │ │ │ │ ├── HyperSpeedPresets.ts │ │ │ │ └── Hyperspeed.tsx │ │ │ ├── Iridescence/ │ │ │ │ └── Iridescence.tsx │ │ │ ├── LetterGlitch/ │ │ │ │ └── LetterGlitch.tsx │ │ │ ├── LightPillar/ │ │ │ │ └── LightPillar.tsx │ │ │ ├── LightRays/ │ │ │ │ └── LightRays.tsx │ │ │ ├── Lightning/ │ │ │ │ └── Lightning.tsx │ │ │ ├── LineWaves/ │ │ │ │ └── LineWaves.tsx │ │ │ ├── LiquidChrome/ │ │ │ │ └── LiquidChrome.tsx │ │ │ ├── LiquidEther/ │ │ │ │ └── LiquidEther.tsx │ │ │ ├── Orb/ │ │ │ │ └── Orb.tsx │ │ │ ├── Particles/ │ │ │ │ └── Particles.tsx │ │ │ ├── PixelBlast/ │ │ │ │ └── PixelBlast.tsx │ │ │ ├── PixelSnow/ │ │ │ │ └── PixelSnow.tsx │ │ │ ├── Plasma/ │ │ │ │ └── Plasma.tsx │ │ │ ├── Prism/ │ │ │ │ └── Prism.tsx │ │ │ ├── PrismaticBurst/ │ │ │ │ └── PrismaticBurst.tsx │ │ │ ├── Radar/ │ │ │ │ └── Radar.tsx │ │ │ ├── RippleGrid/ │ │ │ │ └── RippleGrid.tsx │ │ │ ├── ShapeGrid/ │ │ │ │ └── ShapeGrid.tsx │ │ │ ├── Silk/ │ │ │ │ └── Silk.tsx │ │ │ ├── SoftAurora/ │ │ │ │ └── SoftAurora.tsx │ │ │ ├── Threads/ │ │ │ │ └── Threads.tsx │ │ │ └── Waves/ │ │ │ └── Waves.tsx │ │ ├── Components/ │ │ │ ├── AnimatedList/ │ │ │ │ └── AnimatedList.tsx │ │ │ ├── BorderGlow/ │ │ │ │ └── BorderGlow.tsx │ │ │ ├── BounceCards/ │ │ │ │ └── BounceCards.tsx │ │ │ ├── BubbleMenu/ │ │ │ │ └── BubbleMenu.tsx │ │ │ ├── CardNav/ │ │ │ │ └── CardNav.tsx │ │ │ ├── CardSwap/ │ │ │ │ └── CardSwap.tsx │ │ │ ├── Carousel/ │ │ │ │ └── Carousel.tsx │ │ │ ├── ChromaGrid/ │ │ │ │ └── ChromaGrid.tsx │ │ │ ├── CircularGallery/ │ │ │ │ └── CircularGallery.tsx │ │ │ ├── Counter/ │ │ │ │ └── Counter.tsx │ │ │ ├── DecayCard/ │ │ │ │ └── DecayCard.tsx │ │ │ ├── Dock/ │ │ │ │ └── Dock.tsx │ │ │ ├── DomeGallery/ │ │ │ │ └── DomeGallery.tsx │ │ │ ├── ElasticSlider/ │ │ │ │ └── ElasticSlider.tsx │ │ │ ├── FlowingMenu/ │ │ │ │ └── FlowingMenu.tsx │ │ │ ├── FluidGlass/ │ │ │ │ └── FluidGlass.tsx │ │ │ ├── FlyingPosters/ │ │ │ │ └── FlyingPosters.tsx │ │ │ ├── Folder/ │ │ │ │ └── Folder.tsx │ │ │ ├── GlassIcons/ │ │ │ │ └── GlassIcons.tsx │ │ │ ├── GlassSurface/ │ │ │ │ └── GlassSurface.tsx │ │ │ ├── GooeyNav/ │ │ │ │ └── GooeyNav.tsx │ │ │ ├── InfiniteMenu/ │ │ │ │ └── InfiniteMenu.tsx │ │ │ ├── Lanyard/ │ │ │ │ ├── Lanyard.tsx │ │ │ │ └── card.glb │ │ │ ├── MagicBento/ │ │ │ │ └── MagicBento.tsx │ │ │ ├── Masonry/ │ │ │ │ └── Masonry.tsx │ │ │ ├── ModelViewer/ │ │ │ │ └── ModelViewer.tsx │ │ │ ├── PillNav/ │ │ │ │ └── PillNav.tsx │ │ │ ├── PixelCard/ │ │ │ │ └── PixelCard.tsx │ │ │ ├── ProfileCard/ │ │ │ │ └── ProfileCard.tsx │ │ │ ├── ReflectiveCard/ │ │ │ │ └── ReflectiveCard.tsx │ │ │ ├── ScrollStack/ │ │ │ │ └── ScrollStack.tsx │ │ │ ├── SpotlightCard/ │ │ │ │ └── SpotlightCard.tsx │ │ │ ├── Stack/ │ │ │ │ └── Stack.tsx │ │ │ ├── StaggeredMenu/ │ │ │ │ └── StaggeredMenu.tsx │ │ │ ├── Stepper/ │ │ │ │ └── Stepper.tsx │ │ │ └── TiltedCard/ │ │ │ └── TiltedCard.tsx │ │ └── TextAnimations/ │ │ ├── ASCIIText/ │ │ │ └── ASCIIText.tsx │ │ ├── BlurText/ │ │ │ └── BlurText.tsx │ │ ├── CircularText/ │ │ │ └── CircularText.tsx │ │ ├── CountUp/ │ │ │ └── CountUp.tsx │ │ ├── CurvedLoop/ │ │ │ └── CurvedLoop.tsx │ │ ├── DecryptedText/ │ │ │ └── DecryptedText.tsx │ │ ├── FallingText/ │ │ │ └── FallingText.tsx │ │ ├── FuzzyText/ │ │ │ └── FuzzyText.tsx │ │ ├── GlitchText/ │ │ │ └── GlitchText.tsx │ │ ├── GradientText/ │ │ │ └── GradientText.tsx │ │ ├── RotatingText/ │ │ │ └── RotatingText.tsx │ │ ├── ScrambledText/ │ │ │ └── ScrambledText.tsx │ │ ├── ScrollFloat/ │ │ │ └── ScrollFloat.tsx │ │ ├── ScrollReveal/ │ │ │ └── ScrollReveal.tsx │ │ ├── ScrollVelocity/ │ │ │ └── ScrollVelocity.tsx │ │ ├── ShinyText/ │ │ │ └── ShinyText.tsx │ │ ├── Shuffle/ │ │ │ └── Shuffle.tsx │ │ ├── SplitText/ │ │ │ └── SplitText.tsx │ │ ├── TextCursor/ │ │ │ └── TextCursor.tsx │ │ ├── TextPressure/ │ │ │ └── TextPressure.tsx │ │ ├── TextType/ │ │ │ └── TextType.tsx │ │ ├── TrueFocus/ │ │ │ └── TrueFocus.tsx │ │ └── VariableProximity/ │ │ └── VariableProximity.tsx │ ├── utils/ │ │ ├── animationUtils.js │ │ ├── cli.js │ │ ├── codeGeneration.js │ │ ├── codeTheme.js │ │ ├── customTheme.js │ │ ├── favorites.js │ │ ├── fuzzy.js │ │ └── utils.js │ └── vite-env.d.ts ├── tsconfig.json ├── vite.config.js └── wrangler.jsonc
SYMBOL INDEX (2 symbols across 1 files)
FILE: jsrepo.config.ts
constant MANUAL_ASSETS (line 7) | const MANUAL_ASSETS: Record<string, { path: string; dependencyResolution...
function defineComponent (line 72) | function defineComponent({
Copy disabled (too large)
Download .json
Condensed preview — 1808 files, each showing path, character count, and a content snippet. Download the .json file for the full structured content (18,591K chars).
[
{
"path": ".assetsignore",
"chars": 28,
"preview": "default/**\ntailwind/**\nts/**"
},
{
"path": ".context/new-component.md",
"chars": 10603,
"preview": "# React Bits – New Component Creation Context\n\nThis file provides complete, concrete context for an AI agent to reliably"
},
{
"path": ".eslintrc.cjs",
"chars": 638,
"preview": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plu"
},
{
"path": ".github/FUNDING.yml",
"chars": 847,
"preview": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [u"
},
{
"path": ".github/ISSUE_TEMPLATE/1-bug-report.yml",
"chars": 1539,
"preview": "name: 🐞 Bug report\ndescription: Help improve React Bits.\nlabels: ['bug']\ntitle: '[BUG]: '\nbody:\n - type: markdown\n a"
},
{
"path": ".github/ISSUE_TEMPLATE/2-feature-request.yml",
"chars": 879,
"preview": "name: 💡 Feature Request\ndescription: Suggest something for React Bits.\nlabels: ['enhancement']\ntitle: '[FEAT]: '\nbody:\n "
},
{
"path": ".gitignore",
"chars": 392,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\ncomponents-mcp.json\nsc"
},
{
"path": ".prettierignore",
"chars": 346,
"preview": "# Dependencies\nnode_modules/\n\n# Build outputs\ndist/\nbuild/\npublic/\n\n# OS files\n.DS_Store\nThumbs.db\n\n# IDE files\n.vscode/"
},
{
"path": ".prettierrc",
"chars": 320,
"preview": "{\n \"semi\": true,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"none\",\n \"printWidth\": 120,\n \"bracketSpac"
},
{
"path": "CONTRIBUTING.md",
"chars": 2669,
"preview": "# Contributing to React Bits\n\nThank you for considering contributing to React Bits! I appreciate your interest in making"
},
{
"path": "LICENSE.md",
"chars": 1303,
"preview": "MIT + Commons Clause License Condition v1.0\n\nCopyright (c) 2026 David Haz\n\nPermission is hereby granted, free of charge,"
},
{
"path": "README.md",
"chars": 7422,
"preview": "<div align=\"center\">\n\t<br>\n\t<br>\n <picture>\n <source media=\"(prefers-color-scheme: light)\" srcset=\"src/assets/lo"
},
{
"path": "index.html",
"chars": 5101,
"preview": "<!doctype html>\n<html lang=\"en\" style=\"background: #060010\">\n <head>\n <!-- Google tag (gtag.js) -->\n <script asyn"
},
{
"path": "jsrepo.config.ts",
"chars": 4793,
"preview": "import { defineConfig, type RegistryItem } from 'jsrepo';\nimport { output } from '@jsrepo/shadcn';\nimport { type Categor"
},
{
"path": "package.json",
"chars": 2437,
"preview": "{\n \"name\": \"react-bits\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"concur"
},
{
"path": "public/README.md",
"chars": 284,
"preview": "<div align=\"center\"> <img src=\"https://github.com/EnderRomantice/react-bits/blob/main/public/favicon-32x32.png\" alt=\""
},
{
"path": "public/llms.txt",
"chars": 22098,
"preview": "# React Bits\n\n> React Bits is an open source collection of memorable UI elements - Components, Animations, Backgrounds, "
},
{
"path": "public/r/ASCIIText-JS-CSS.json",
"chars": 15982,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ASCIIText-JS-CSS\",\n\t\"title\": \"ASCIIText\",\n\t\"d"
},
{
"path": "public/r/ASCIIText-JS-TW.json",
"chars": 15919,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ASCIIText-JS-TW\",\n\t\"title\": \"ASCIIText\",\n\t\"de"
},
{
"path": "public/r/ASCIIText-TS-CSS.json",
"chars": 18414,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ASCIIText-TS-CSS\",\n\t\"title\": \"ASCIIText\",\n\t\"d"
},
{
"path": "public/r/ASCIIText-TS-TW.json",
"chars": 18486,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ASCIIText-TS-TW\",\n\t\"title\": \"ASCIIText\",\n\t\"de"
},
{
"path": "public/r/AnimatedContent-JS-CSS.json",
"chars": 3110,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedContent-JS-CSS\",\n\t\"title\": \"AnimatedC"
},
{
"path": "public/r/AnimatedContent-JS-TW.json",
"chars": 3091,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedContent-JS-TW\",\n\t\"title\": \"AnimatedCo"
},
{
"path": "public/r/AnimatedContent-TS-CSS.json",
"chars": 3775,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedContent-TS-CSS\",\n\t\"title\": \"AnimatedC"
},
{
"path": "public/r/AnimatedContent-TS-TW.json",
"chars": 3734,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedContent-TS-TW\",\n\t\"title\": \"AnimatedCo"
},
{
"path": "public/r/AnimatedList-JS-CSS.json",
"chars": 6770,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedList-JS-CSS\",\n\t\"title\": \"AnimatedList"
},
{
"path": "public/r/AnimatedList-JS-TW.json",
"chars": 6208,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedList-JS-TW\",\n\t\"title\": \"AnimatedList\""
},
{
"path": "public/r/AnimatedList-TS-CSS.json",
"chars": 7552,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedList-TS-CSS\",\n\t\"title\": \"AnimatedList"
},
{
"path": "public/r/AnimatedList-TS-TW.json",
"chars": 6954,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"AnimatedList-TS-TW\",\n\t\"title\": \"AnimatedList\""
},
{
"path": "public/r/Antigravity-JS-CSS.json",
"chars": 6218,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Antigravity-JS-CSS\",\n\t\"title\": \"Antigravity\","
},
{
"path": "public/r/Antigravity-JS-TW.json",
"chars": 6217,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Antigravity-JS-TW\",\n\t\"title\": \"Antigravity\",\n"
},
{
"path": "public/r/Antigravity-TS-CSS.json",
"chars": 6700,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Antigravity-TS-CSS\",\n\t\"title\": \"Antigravity\","
},
{
"path": "public/r/Antigravity-TS-TW.json",
"chars": 6699,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Antigravity-TS-TW\",\n\t\"title\": \"Antigravity\",\n"
},
{
"path": "public/r/Aurora-JS-CSS.json",
"chars": 6377,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Aurora-JS-CSS\",\n\t\"title\": \"Aurora\",\n\t\"descrip"
},
{
"path": "public/r/Aurora-JS-TW.json",
"chars": 6199,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Aurora-JS-TW\",\n\t\"title\": \"Aurora\",\n\t\"descript"
},
{
"path": "public/r/Aurora-TS-CSS.json",
"chars": 6583,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Aurora-TS-CSS\",\n\t\"title\": \"Aurora\",\n\t\"descrip"
},
{
"path": "public/r/Aurora-TS-TW.json",
"chars": 6405,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Aurora-TS-TW\",\n\t\"title\": \"Aurora\",\n\t\"descript"
},
{
"path": "public/r/Balatro-JS-CSS.json",
"chars": 6999,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Balatro-JS-CSS\",\n\t\"title\": \"Balatro\",\n\t\"descr"
},
{
"path": "public/r/Balatro-JS-TW.json",
"chars": 6816,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Balatro-JS-TW\",\n\t\"title\": \"Balatro\",\n\t\"descri"
},
{
"path": "public/r/Balatro-TS-CSS.json",
"chars": 7428,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Balatro-TS-CSS\",\n\t\"title\": \"Balatro\",\n\t\"descr"
},
{
"path": "public/r/Balatro-TS-TW.json",
"chars": 7245,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Balatro-TS-TW\",\n\t\"title\": \"Balatro\",\n\t\"descri"
},
{
"path": "public/r/Ballpit-JS-CSS.json",
"chars": 21545,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Ballpit-JS-CSS\",\n\t\"title\": \"Ballpit\",\n\t\"descr"
},
{
"path": "public/r/Ballpit-JS-TW.json",
"chars": 21521,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Ballpit-JS-TW\",\n\t\"title\": \"Ballpit\",\n\t\"descri"
},
{
"path": "public/r/Ballpit-TS-CSS.json",
"chars": 29026,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Ballpit-TS-CSS\",\n\t\"title\": \"Ballpit\",\n\t\"descr"
},
{
"path": "public/r/Ballpit-TS-TW.json",
"chars": 28754,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Ballpit-TS-TW\",\n\t\"title\": \"Ballpit\",\n\t\"descri"
},
{
"path": "public/r/Beams-JS-CSS.json",
"chars": 11359,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Beams-JS-CSS\",\n\t\"title\": \"Beams\",\n\t\"descripti"
},
{
"path": "public/r/Beams-JS-TW.json",
"chars": 11172,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Beams-JS-TW\",\n\t\"title\": \"Beams\",\n\t\"descriptio"
},
{
"path": "public/r/Beams-TS-CSS.json",
"chars": 13253,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Beams-TS-CSS\",\n\t\"title\": \"Beams\",\n\t\"descripti"
},
{
"path": "public/r/Beams-TS-TW.json",
"chars": 13066,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Beams-TS-TW\",\n\t\"title\": \"Beams\",\n\t\"descriptio"
},
{
"path": "public/r/BlobCursor-JS-CSS.json",
"chars": 4501,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlobCursor-JS-CSS\",\n\t\"title\": \"BlobCursor\",\n\t"
},
{
"path": "public/r/BlobCursor-JS-TW.json",
"chars": 4099,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlobCursor-JS-TW\",\n\t\"title\": \"BlobCursor\",\n\t\""
},
{
"path": "public/r/BlobCursor-TS-CSS.json",
"chars": 5223,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlobCursor-TS-CSS\",\n\t\"title\": \"BlobCursor\",\n\t"
},
{
"path": "public/r/BlobCursor-TS-TW.json",
"chars": 4821,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlobCursor-TS-TW\",\n\t\"title\": \"BlobCursor\",\n\t\""
},
{
"path": "public/r/BlurText-JS-CSS.json",
"chars": 3404,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlurText-JS-CSS\",\n\t\"title\": \"BlurText\",\n\t\"des"
},
{
"path": "public/r/BlurText-JS-TW.json",
"chars": 3387,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlurText-JS-TW\",\n\t\"title\": \"BlurText\",\n\t\"desc"
},
{
"path": "public/r/BlurText-TS-CSS.json",
"chars": 4120,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlurText-TS-CSS\",\n\t\"title\": \"BlurText\",\n\t\"des"
},
{
"path": "public/r/BlurText-TS-TW.json",
"chars": 4107,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BlurText-TS-TW\",\n\t\"title\": \"BlurText\",\n\t\"desc"
},
{
"path": "public/r/BorderGlow-JS-CSS.json",
"chars": 12143,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BorderGlow-JS-CSS\",\n\t\"title\": \"BorderGlow\",\n\t"
},
{
"path": "public/r/BorderGlow-JS-TW.json",
"chars": 10210,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BorderGlow-JS-TW\",\n\t\"title\": \"BorderGlow\",\n\t\""
},
{
"path": "public/r/BorderGlow-TS-CSS.json",
"chars": 13054,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BorderGlow-TS-CSS\",\n\t\"title\": \"BorderGlow\",\n\t"
},
{
"path": "public/r/BorderGlow-TS-TW.json",
"chars": 11119,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BorderGlow-TS-TW\",\n\t\"title\": \"BorderGlow\",\n\t\""
},
{
"path": "public/r/BounceCards-JS-CSS.json",
"chars": 4938,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BounceCards-JS-CSS\",\n\t\"title\": \"BounceCards\","
},
{
"path": "public/r/BounceCards-JS-TW.json",
"chars": 4530,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BounceCards-JS-TW\",\n\t\"title\": \"BounceCards\",\n"
},
{
"path": "public/r/BounceCards-TS-CSS.json",
"chars": 5265,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BounceCards-TS-CSS\",\n\t\"title\": \"BounceCards\","
},
{
"path": "public/r/BounceCards-TS-TW.json",
"chars": 4892,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BounceCards-TS-TW\",\n\t\"title\": \"BounceCards\",\n"
},
{
"path": "public/r/BubbleMenu-JS-CSS.json",
"chars": 12453,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BubbleMenu-JS-CSS\",\n\t\"title\": \"BubbleMenu\",\n\t"
},
{
"path": "public/r/BubbleMenu-JS-TW.json",
"chars": 12483,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BubbleMenu-JS-TW\",\n\t\"title\": \"BubbleMenu\",\n\t\""
},
{
"path": "public/r/BubbleMenu-TS-CSS.json",
"chars": 13217,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BubbleMenu-TS-CSS\",\n\t\"title\": \"BubbleMenu\",\n\t"
},
{
"path": "public/r/BubbleMenu-TS-TW.json",
"chars": 13318,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"BubbleMenu-TS-TW\",\n\t\"title\": \"BubbleMenu\",\n\t\""
},
{
"path": "public/r/CardNav-JS-CSS.json",
"chars": 9873,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardNav-JS-CSS\",\n\t\"title\": \"CardNav\",\n\t\"descr"
},
{
"path": "public/r/CardNav-JS-TW.json",
"chars": 8152,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardNav-JS-TW\",\n\t\"title\": \"CardNav\",\n\t\"descri"
},
{
"path": "public/r/CardNav-TS-CSS.json",
"chars": 10349,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardNav-TS-CSS\",\n\t\"title\": \"CardNav\",\n\t\"descr"
},
{
"path": "public/r/CardNav-TS-TW.json",
"chars": 8628,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardNav-TS-TW\",\n\t\"title\": \"CardNav\",\n\t\"descri"
},
{
"path": "public/r/CardSwap-JS-CSS.json",
"chars": 6167,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardSwap-JS-CSS\",\n\t\"title\": \"CardSwap\",\n\t\"des"
},
{
"path": "public/r/CardSwap-JS-TW.json",
"chars": 5823,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardSwap-JS-TW\",\n\t\"title\": \"CardSwap\",\n\t\"desc"
},
{
"path": "public/r/CardSwap-TS-CSS.json",
"chars": 6995,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardSwap-TS-CSS\",\n\t\"title\": \"CardSwap\",\n\t\"des"
},
{
"path": "public/r/CardSwap-TS-TW.json",
"chars": 6649,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CardSwap-TS-TW\",\n\t\"title\": \"CardSwap\",\n\t\"desc"
},
{
"path": "public/r/Carousel-JS-CSS.json",
"chars": 11075,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Carousel-JS-CSS\",\n\t\"title\": \"Carousel\",\n\t\"des"
},
{
"path": "public/r/Carousel-JS-TW.json",
"chars": 9368,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Carousel-JS-TW\",\n\t\"title\": \"Carousel\",\n\t\"desc"
},
{
"path": "public/r/Carousel-TS-CSS.json",
"chars": 11772,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Carousel-TS-CSS\",\n\t\"title\": \"Carousel\",\n\t\"des"
},
{
"path": "public/r/Carousel-TS-TW.json",
"chars": 10095,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Carousel-TS-TW\",\n\t\"title\": \"Carousel\",\n\t\"desc"
},
{
"path": "public/r/ChromaGrid-JS-CSS.json",
"chars": 9306,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ChromaGrid-JS-CSS\",\n\t\"title\": \"ChromaGrid\",\n\t"
},
{
"path": "public/r/ChromaGrid-JS-TW.json",
"chars": 7602,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ChromaGrid-JS-TW\",\n\t\"title\": \"ChromaGrid\",\n\t\""
},
{
"path": "public/r/ChromaGrid-TS-CSS.json",
"chars": 10109,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ChromaGrid-TS-CSS\",\n\t\"title\": \"ChromaGrid\",\n\t"
},
{
"path": "public/r/ChromaGrid-TS-TW.json",
"chars": 8385,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ChromaGrid-TS-TW\",\n\t\"title\": \"ChromaGrid\",\n\t\""
},
{
"path": "public/r/CircularGallery-JS-CSS.json",
"chars": 17205,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularGallery-JS-CSS\",\n\t\"title\": \"CircularG"
},
{
"path": "public/r/CircularGallery-JS-TW.json",
"chars": 16959,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularGallery-JS-TW\",\n\t\"title\": \"CircularGa"
},
{
"path": "public/r/CircularGallery-TS-CSS.json",
"chars": 21078,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularGallery-TS-CSS\",\n\t\"title\": \"CircularG"
},
{
"path": "public/r/CircularGallery-TS-TW.json",
"chars": 20876,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularGallery-TS-TW\",\n\t\"title\": \"CircularGa"
},
{
"path": "public/r/CircularText-JS-CSS.json",
"chars": 3992,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularText-JS-CSS\",\n\t\"title\": \"CircularText"
},
{
"path": "public/r/CircularText-JS-TW.json",
"chars": 3573,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularText-JS-TW\",\n\t\"title\": \"CircularText\""
},
{
"path": "public/r/CircularText-TS-CSS.json",
"chars": 4250,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularText-TS-CSS\",\n\t\"title\": \"CircularText"
},
{
"path": "public/r/CircularText-TS-TW.json",
"chars": 3913,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CircularText-TS-TW\",\n\t\"title\": \"CircularText\""
},
{
"path": "public/r/ClickSpark-JS-CSS.json",
"chars": 4362,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ClickSpark-JS-CSS\",\n\t\"title\": \"ClickSpark\",\n\t"
},
{
"path": "public/r/ClickSpark-JS-TW.json",
"chars": 4104,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ClickSpark-JS-TW\",\n\t\"title\": \"ClickSpark\",\n\t\""
},
{
"path": "public/r/ClickSpark-TS-CSS.json",
"chars": 4813,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ClickSpark-TS-CSS\",\n\t\"title\": \"ClickSpark\",\n\t"
},
{
"path": "public/r/ClickSpark-TS-TW.json",
"chars": 4649,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ClickSpark-TS-TW\",\n\t\"title\": \"ClickSpark\",\n\t\""
},
{
"path": "public/r/ColorBends-JS-CSS.json",
"chars": 10730,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ColorBends-JS-CSS\",\n\t\"title\": \"ColorBends\",\n\t"
},
{
"path": "public/r/ColorBends-JS-TW.json",
"chars": 10574,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ColorBends-JS-TW\",\n\t\"title\": \"ColorBends\",\n\t\""
},
{
"path": "public/r/ColorBends-TS-CSS.json",
"chars": 11336,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ColorBends-TS-CSS\",\n\t\"title\": \"ColorBends\",\n\t"
},
{
"path": "public/r/ColorBends-TS-TW.json",
"chars": 11119,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ColorBends-TS-TW\",\n\t\"title\": \"ColorBends\",\n\t\""
},
{
"path": "public/r/CountUp-JS-CSS.json",
"chars": 3050,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CountUp-JS-CSS\",\n\t\"title\": \"CountUp\",\n\t\"descr"
},
{
"path": "public/r/CountUp-JS-TW.json",
"chars": 3049,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CountUp-JS-TW\",\n\t\"title\": \"CountUp\",\n\t\"descri"
},
{
"path": "public/r/CountUp-TS-CSS.json",
"chars": 3440,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CountUp-TS-CSS\",\n\t\"title\": \"CountUp\",\n\t\"descr"
},
{
"path": "public/r/CountUp-TS-TW.json",
"chars": 3439,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CountUp-TS-TW\",\n\t\"title\": \"CountUp\",\n\t\"descri"
},
{
"path": "public/r/Counter-JS-CSS.json",
"chars": 4751,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Counter-JS-CSS\",\n\t\"title\": \"Counter\",\n\t\"descr"
},
{
"path": "public/r/Counter-JS-TW.json",
"chars": 4515,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Counter-JS-TW\",\n\t\"title\": \"Counter\",\n\t\"descri"
},
{
"path": "public/r/Counter-TS-CSS.json",
"chars": 5843,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Counter-TS-CSS\",\n\t\"title\": \"Counter\",\n\t\"descr"
},
{
"path": "public/r/Counter-TS-TW.json",
"chars": 5844,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Counter-TS-TW\",\n\t\"title\": \"Counter\",\n\t\"descri"
},
{
"path": "public/r/Crosshair-JS-CSS.json",
"chars": 6523,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Crosshair-JS-CSS\",\n\t\"title\": \"Crosshair\",\n\t\"d"
},
{
"path": "public/r/Crosshair-JS-TW.json",
"chars": 5969,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Crosshair-JS-TW\",\n\t\"title\": \"Crosshair\",\n\t\"de"
},
{
"path": "public/r/Crosshair-TS-CSS.json",
"chars": 7360,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Crosshair-TS-CSS\",\n\t\"title\": \"Crosshair\",\n\t\"d"
},
{
"path": "public/r/Crosshair-TS-TW.json",
"chars": 6919,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Crosshair-TS-TW\",\n\t\"title\": \"Crosshair\",\n\t\"de"
},
{
"path": "public/r/Cubes-JS-CSS.json",
"chars": 11502,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Cubes-JS-CSS\",\n\t\"title\": \"Cubes\",\n\t\"descripti"
},
{
"path": "public/r/Cubes-JS-TW.json",
"chars": 12183,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Cubes-JS-TW\",\n\t\"title\": \"Cubes\",\n\t\"descriptio"
},
{
"path": "public/r/Cubes-TS-CSS.json",
"chars": 12595,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Cubes-TS-CSS\",\n\t\"title\": \"Cubes\",\n\t\"descripti"
},
{
"path": "public/r/Cubes-TS-TW.json",
"chars": 13276,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Cubes-TS-TW\",\n\t\"title\": \"Cubes\",\n\t\"descriptio"
},
{
"path": "public/r/CurvedLoop-JS-CSS.json",
"chars": 5302,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CurvedLoop-JS-CSS\",\n\t\"title\": \"CurvedLoop\",\n\t"
},
{
"path": "public/r/CurvedLoop-JS-TW.json",
"chars": 4861,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CurvedLoop-JS-TW\",\n\t\"title\": \"CurvedLoop\",\n\t\""
},
{
"path": "public/r/CurvedLoop-TS-CSS.json",
"chars": 5656,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CurvedLoop-TS-CSS\",\n\t\"title\": \"CurvedLoop\",\n\t"
},
{
"path": "public/r/CurvedLoop-TS-TW.json",
"chars": 5225,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"CurvedLoop-TS-TW\",\n\t\"title\": \"CurvedLoop\",\n\t\""
},
{
"path": "public/r/DarkVeil-JS-CSS.json",
"chars": 12247,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DarkVeil-JS-CSS\",\n\t\"title\": \"DarkVeil\",\n\t\"des"
},
{
"path": "public/r/DarkVeil-JS-TW.json",
"chars": 12054,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DarkVeil-JS-TW\",\n\t\"title\": \"DarkVeil\",\n\t\"desc"
},
{
"path": "public/r/DarkVeil-TS-CSS.json",
"chars": 12515,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DarkVeil-TS-CSS\",\n\t\"title\": \"DarkVeil\",\n\t\"des"
},
{
"path": "public/r/DarkVeil-TS-TW.json",
"chars": 12322,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DarkVeil-TS-TW\",\n\t\"title\": \"DarkVeil\",\n\t\"desc"
},
{
"path": "public/r/DecayCard-JS-CSS.json",
"chars": 5359,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecayCard-JS-CSS\",\n\t\"title\": \"DecayCard\",\n\t\"d"
},
{
"path": "public/r/DecayCard-JS-TW.json",
"chars": 5001,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecayCard-JS-TW\",\n\t\"title\": \"DecayCard\",\n\t\"de"
},
{
"path": "public/r/DecayCard-TS-CSS.json",
"chars": 5877,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecayCard-TS-CSS\",\n\t\"title\": \"DecayCard\",\n\t\"d"
},
{
"path": "public/r/DecayCard-TS-TW.json",
"chars": 5537,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecayCard-TS-TW\",\n\t\"title\": \"DecayCard\",\n\t\"de"
},
{
"path": "public/r/DecryptedText-JS-CSS.json",
"chars": 11998,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecryptedText-JS-CSS\",\n\t\"title\": \"DecryptedTe"
},
{
"path": "public/r/DecryptedText-JS-TW.json",
"chars": 11711,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecryptedText-JS-TW\",\n\t\"title\": \"DecryptedTex"
},
{
"path": "public/r/DecryptedText-TS-CSS.json",
"chars": 12870,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecryptedText-TS-CSS\",\n\t\"title\": \"DecryptedTe"
},
{
"path": "public/r/DecryptedText-TS-TW.json",
"chars": 12593,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DecryptedText-TS-TW\",\n\t\"title\": \"DecryptedTex"
},
{
"path": "public/r/Dither-JS-CSS.json",
"chars": 10032,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dither-JS-CSS\",\n\t\"title\": \"Dither\",\n\t\"descrip"
},
{
"path": "public/r/Dither-JS-TW.json",
"chars": 9840,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dither-JS-TW\",\n\t\"title\": \"Dither\",\n\t\"descript"
},
{
"path": "public/r/Dither-TS-CSS.json",
"chars": 11422,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dither-TS-CSS\",\n\t\"title\": \"Dither\",\n\t\"descrip"
},
{
"path": "public/r/Dither-TS-TW.json",
"chars": 11240,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dither-TS-TW\",\n\t\"title\": \"Dither\",\n\t\"descript"
},
{
"path": "public/r/Dock-JS-CSS.json",
"chars": 5468,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dock-JS-CSS\",\n\t\"title\": \"Dock\",\n\t\"description"
},
{
"path": "public/r/Dock-JS-TW.json",
"chars": 4615,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dock-JS-TW\",\n\t\"title\": \"Dock\",\n\t\"description\""
},
{
"path": "public/r/Dock-TS-CSS.json",
"chars": 6610,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dock-TS-CSS\",\n\t\"title\": \"Dock\",\n\t\"description"
},
{
"path": "public/r/Dock-TS-TW.json",
"chars": 5730,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Dock-TS-TW\",\n\t\"title\": \"Dock\",\n\t\"description\""
},
{
"path": "public/r/DomeGallery-JS-CSS.json",
"chars": 30398,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DomeGallery-JS-CSS\",\n\t\"title\": \"DomeGallery\","
},
{
"path": "public/r/DomeGallery-JS-TW.json",
"chars": 33551,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DomeGallery-JS-TW\",\n\t\"title\": \"DomeGallery\",\n"
},
{
"path": "public/r/DomeGallery-TS-CSS.json",
"chars": 32157,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DomeGallery-TS-CSS\",\n\t\"title\": \"DomeGallery\","
},
{
"path": "public/r/DomeGallery-TS-TW.json",
"chars": 35138,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DomeGallery-TS-TW\",\n\t\"title\": \"DomeGallery\",\n"
},
{
"path": "public/r/DotGrid-JS-CSS.json",
"chars": 8807,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DotGrid-JS-CSS\",\n\t\"title\": \"DotGrid\",\n\t\"descr"
},
{
"path": "public/r/DotGrid-JS-TW.json",
"chars": 8430,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DotGrid-JS-TW\",\n\t\"title\": \"DotGrid\",\n\t\"descri"
},
{
"path": "public/r/DotGrid-TS-CSS.json",
"chars": 9505,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DotGrid-TS-CSS\",\n\t\"title\": \"DotGrid\",\n\t\"descr"
},
{
"path": "public/r/DotGrid-TS-TW.json",
"chars": 9118,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"DotGrid-TS-TW\",\n\t\"title\": \"DotGrid\",\n\t\"descri"
},
{
"path": "public/r/ElasticSlider-JS-CSS.json",
"chars": 7353,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElasticSlider-JS-CSS\",\n\t\"title\": \"ElasticSlid"
},
{
"path": "public/r/ElasticSlider-JS-TW.json",
"chars": 6119,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElasticSlider-JS-TW\",\n\t\"title\": \"ElasticSlide"
},
{
"path": "public/r/ElasticSlider-TS-CSS.json",
"chars": 8138,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElasticSlider-TS-CSS\",\n\t\"title\": \"ElasticSlid"
},
{
"path": "public/r/ElasticSlider-TS-TW.json",
"chars": 6906,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElasticSlider-TS-TW\",\n\t\"title\": \"ElasticSlide"
},
{
"path": "public/r/ElectricBorder-JS-CSS.json",
"chars": 10787,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElectricBorder-JS-CSS\",\n\t\"title\": \"ElectricBo"
},
{
"path": "public/r/ElectricBorder-JS-TW.json",
"chars": 10128,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElectricBorder-JS-TW\",\n\t\"title\": \"ElectricBor"
},
{
"path": "public/r/ElectricBorder-TS-CSS.json",
"chars": 11163,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElectricBorder-TS-CSS\",\n\t\"title\": \"ElectricBo"
},
{
"path": "public/r/ElectricBorder-TS-TW.json",
"chars": 10904,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"ElectricBorder-TS-TW\",\n\t\"title\": \"ElectricBor"
},
{
"path": "public/r/EvilEye-JS-CSS.json",
"chars": 9018,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"EvilEye-JS-CSS\",\n\t\"title\": \"EvilEye\",\n\t\"descr"
},
{
"path": "public/r/EvilEye-JS-TW.json",
"chars": 8835,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"EvilEye-JS-TW\",\n\t\"title\": \"EvilEye\",\n\t\"descri"
},
{
"path": "public/r/EvilEye-TS-CSS.json",
"chars": 9473,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"EvilEye-TS-CSS\",\n\t\"title\": \"EvilEye\",\n\t\"descr"
},
{
"path": "public/r/EvilEye-TS-TW.json",
"chars": 9290,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"EvilEye-TS-TW\",\n\t\"title\": \"EvilEye\",\n\t\"descri"
},
{
"path": "public/r/FadeContent-JS-CSS.json",
"chars": 2779,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FadeContent-JS-CSS\",\n\t\"title\": \"FadeContent\","
},
{
"path": "public/r/FadeContent-JS-TW.json",
"chars": 2725,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FadeContent-JS-TW\",\n\t\"title\": \"FadeContent\",\n"
},
{
"path": "public/r/FadeContent-TS-CSS.json",
"chars": 3266,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FadeContent-TS-CSS\",\n\t\"title\": \"FadeContent\","
},
{
"path": "public/r/FadeContent-TS-TW.json",
"chars": 3212,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FadeContent-TS-TW\",\n\t\"title\": \"FadeContent\",\n"
},
{
"path": "public/r/FallingText-JS-CSS.json",
"chars": 6811,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FallingText-JS-CSS\",\n\t\"title\": \"FallingText\","
},
{
"path": "public/r/FallingText-JS-TW.json",
"chars": 6178,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FallingText-JS-TW\",\n\t\"title\": \"FallingText\",\n"
},
{
"path": "public/r/FallingText-TS-CSS.json",
"chars": 7233,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FallingText-TS-CSS\",\n\t\"title\": \"FallingText\","
},
{
"path": "public/r/FallingText-TS-TW.json",
"chars": 6595,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FallingText-TS-TW\",\n\t\"title\": \"FallingText\",\n"
},
{
"path": "public/r/FaultyTerminal-JS-CSS.json",
"chars": 12033,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FaultyTerminal-JS-CSS\",\n\t\"title\": \"FaultyTerm"
},
{
"path": "public/r/FaultyTerminal-JS-TW.json",
"chars": 11808,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FaultyTerminal-JS-TW\",\n\t\"title\": \"FaultyTermi"
},
{
"path": "public/r/FaultyTerminal-TS-CSS.json",
"chars": 12756,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FaultyTerminal-TS-CSS\",\n\t\"title\": \"FaultyTerm"
},
{
"path": "public/r/FaultyTerminal-TS-TW.json",
"chars": 12531,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FaultyTerminal-TS-TW\",\n\t\"title\": \"FaultyTermi"
},
{
"path": "public/r/FloatingLines-JS-CSS.json",
"chars": 14754,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FloatingLines-JS-CSS\",\n\t\"title\": \"FloatingLin"
},
{
"path": "public/r/FloatingLines-JS-TW.json",
"chars": 14545,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FloatingLines-JS-TW\",\n\t\"title\": \"FloatingLine"
},
{
"path": "public/r/FloatingLines-TS-CSS.json",
"chars": 15512,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FloatingLines-TS-CSS\",\n\t\"title\": \"FloatingLin"
},
{
"path": "public/r/FloatingLines-TS-TW.json",
"chars": 15304,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FloatingLines-TS-TW\",\n\t\"title\": \"FloatingLine"
},
{
"path": "public/r/FlowingMenu-JS-CSS.json",
"chars": 7669,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlowingMenu-JS-CSS\",\n\t\"title\": \"FlowingMenu\","
},
{
"path": "public/r/FlowingMenu-JS-TW.json",
"chars": 5908,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlowingMenu-JS-TW\",\n\t\"title\": \"FlowingMenu\",\n"
},
{
"path": "public/r/FlowingMenu-TS-CSS.json",
"chars": 8255,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlowingMenu-TS-CSS\",\n\t\"title\": \"FlowingMenu\","
},
{
"path": "public/r/FlowingMenu-TS-TW.json",
"chars": 6745,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlowingMenu-TS-TW\",\n\t\"title\": \"FlowingMenu\",\n"
},
{
"path": "public/r/FluidGlass-JS-CSS.json",
"chars": 8885,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FluidGlass-JS-CSS\",\n\t\"title\": \"FluidGlass\",\n\t"
},
{
"path": "public/r/FluidGlass-JS-TW.json",
"chars": 8884,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FluidGlass-JS-TW\",\n\t\"title\": \"FluidGlass\",\n\t\""
},
{
"path": "public/r/FluidGlass-TS-CSS.json",
"chars": 10127,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FluidGlass-TS-CSS\",\n\t\"title\": \"FluidGlass\",\n\t"
},
{
"path": "public/r/FluidGlass-TS-TW.json",
"chars": 10126,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FluidGlass-TS-TW\",\n\t\"title\": \"FluidGlass\",\n\t\""
},
{
"path": "public/r/FlyingPosters-JS-CSS.json",
"chars": 14570,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlyingPosters-JS-CSS\",\n\t\"title\": \"FlyingPoste"
},
{
"path": "public/r/FlyingPosters-JS-TW.json",
"chars": 14267,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlyingPosters-JS-TW\",\n\t\"title\": \"FlyingPoster"
},
{
"path": "public/r/FlyingPosters-TS-CSS.json",
"chars": 17027,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlyingPosters-TS-CSS\",\n\t\"title\": \"FlyingPoste"
},
{
"path": "public/r/FlyingPosters-TS-TW.json",
"chars": 16719,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FlyingPosters-TS-TW\",\n\t\"title\": \"FlyingPoster"
},
{
"path": "public/r/Folder-JS-CSS.json",
"chars": 6290,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Folder-JS-CSS\",\n\t\"title\": \"Folder\",\n\t\"descrip"
},
{
"path": "public/r/Folder-JS-TW.json",
"chars": 6048,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Folder-JS-TW\",\n\t\"title\": \"Folder\",\n\t\"descript"
},
{
"path": "public/r/Folder-TS-CSS.json",
"chars": 6679,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Folder-TS-CSS\",\n\t\"title\": \"Folder\",\n\t\"descrip"
},
{
"path": "public/r/Folder-TS-TW.json",
"chars": 6422,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Folder-TS-TW\",\n\t\"title\": \"Folder\",\n\t\"descript"
},
{
"path": "public/r/FuzzyText-JS-CSS.json",
"chars": 11873,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FuzzyText-JS-CSS\",\n\t\"title\": \"FuzzyText\",\n\t\"d"
},
{
"path": "public/r/FuzzyText-JS-TW.json",
"chars": 10550,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FuzzyText-JS-TW\",\n\t\"title\": \"FuzzyText\",\n\t\"de"
},
{
"path": "public/r/FuzzyText-TS-CSS.json",
"chars": 11336,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FuzzyText-TS-CSS\",\n\t\"title\": \"FuzzyText\",\n\t\"d"
},
{
"path": "public/r/FuzzyText-TS-TW.json",
"chars": 11335,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"FuzzyText-TS-TW\",\n\t\"title\": \"FuzzyText\",\n\t\"de"
},
{
"path": "public/r/Galaxy-JS-CSS.json",
"chars": 10737,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Galaxy-JS-CSS\",\n\t\"title\": \"Galaxy\",\n\t\"descrip"
},
{
"path": "public/r/Galaxy-JS-TW.json",
"chars": 10547,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Galaxy-JS-TW\",\n\t\"title\": \"Galaxy\",\n\t\"descript"
},
{
"path": "public/r/Galaxy-TS-CSS.json",
"chars": 11268,
"preview": "{\n\t\"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n\t\"name\": \"Galaxy-TS-CSS\",\n\t\"title\": \"Galaxy\",\n\t\"descrip"
}
]
// ... and 1608 more files (download for full content)
About this extraction
This page contains the full source code of the DavidHDev/react-bits GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 1808 files (25.8 MB), approximately 4.4M tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.