React Bits Component Skill

Use this skill when implementing animated, high-polish visual micro-interactions and interactive backgrounds in React, Next.js, and Tailwind projects.

Component Categories

1. Text Animations:

   • SplitText: Smooth character/word staggered reveal
   • BlurText: Cinematic blur-to-sharp focus
   • ShinyText: Subtle chromatic light sweep across text
   • DecryptedText: Cyberpunk character unscramble effect
   • VariableProximity: Fluid font-weight changes based on cursor proximity

2. Interactive Backgrounds:

   • Hyperspeed: High-speed warp tunnel / light streaks
   • Waves: Interactive audio-wave / ocean canvas
   • Ballpit: Canvas physics simulation of bouncing particles
   • GridDistortion: Mouse-driven fluid warp grid
   • Iridescence: Dynamic glowing oil-slick shader

3. UI Micro-Components:

   • TiltedCard: 3D perspective hover cards with glare
   • SpotlightCard: Dynamic flashlight mouse tracking on borders
   • FluidGlass: Glassmorphic refractive elements
   • ElasticSlider: Spring-physics drag controls

How to Integrate

• Check component sources in ./src/ or view component documentation in README.md.
• Copy component code and dependencies (e.g. framer-motion, gsap, or @react-spring/web).
• Drop directly into your React / Next.js project.