# React Bytes

> React Bytes is an open source showcase of creative React components - Text Animations, Carousels, Cards, Cursors, Backgrounds - 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: Text Animations, Carousels, Cards, Cursors, Backgrounds.
- Each component has 4 variants. All variants are kept in sync when updated.
- Dependencies vary by component (e.g., gsap, motion). Always check and install dependencies before usage.
- This file is auto-generated from src/constants/Information.js. Do not edit it by hand — run `npm run llms` instead.

## Docs
- [Homepage](https://reactbytes.online): Landing page, quick presentation of the library.
- [Introduction](https://reactbytes.online/get-started/introduction): Project mission and principles.
- [Installation](https://reactbytes.online/get-started/installation): Manual copy and CLI commands (jsrepo, shadcn).
- [MCP Setup](https://reactbytes.online/get-started/mcp): Set up a MCP server to help you with development.
- [All Components](https://reactbytes.online/get-started/all-components): Full browsable list of every component.

## CLI
- shadcn: `npx shadcn@latest add https://reactbytes.online/r/<Component>-<LANG>-<STYLE>`
  - <LANG>: JS | TS; <STYLE>: CSS | TW
  - Example: npx shadcn@latest add https://reactbytes.online/r/MagneticText-JS-CSS
- jsrepo: `npx jsrepo@latest add shadcn:https://reactbytes.online/r/<Component>-<LANG>-<STYLE>`
  - <LANG>: JS | TS; <STYLE>: CSS | TW
  - Example: npx jsrepo@latest add shadcn:https://reactbytes.online/r/MagneticText-JS-CSS

Notes:
- Component page URLs use kebab-case paths like /text-animations/magnetic-text.
- CLI component identifiers use PascalCase, e.g. MagneticText.

## Text Animations
- [MagneticText](https://reactbytes.online/text-animations/magnetic-text): A customizable React magnetic text animation powered by GSAP, featuring interactive cursor attraction, smooth color transitions, responsive sizing, and configurable entrance effects for modern UI designs.
- [CurtainText](https://reactbytes.online/text-animations/curtain-text): A customizable React text animation where each character slides away on hover to reveal a second text layer, creating a smooth curtain-style reveal effect for modern interfaces.
- [CursorTrail](https://reactbytes.online/text-animations/cursor-trail): A customizable React cursor trail component that creates animated floating text or symbol particles with configurable colors, motion styles, particle sizing, and interactive mouse effects.
- [BlurText](https://reactbytes.online/text-animations/blur-text): A customizable React text animation powered by GSAP, featuring smooth blur, scale, and staggered letter or word reveals with adjustable timing, gradients, and repeat controls.
- [MeltGlitchText](https://reactbytes.online/text-animations/meltglitch-text): A customizable React hover text animation featuring GSAP-powered melt effects, RGB glitch layers, interactive mouse tracking, smooth character distortion, and configurable colors, typography, and motion.
- [NeonFlicker](https://reactbytes.online/text-animations/neon-flicker): A customizable React neon text animation featuring GSAP-powered flicker effects, glowing shadows, per-character animations, adjustable glow intensity, custom colors, and looping neon sign effects for modern UI designs.
- [SmokeAway](https://reactbytes.online/text-animations/smoke-away): A customizable React smoke text animation featuring GSAP-powered hover effects, character-by-character disappearance, blur transitions, scaling, vertical motion, and smooth restoration for modern UI designs.
- [SpotlightText](https://reactbytes.online/text-animations/spotlight-text): A customizable React spotlight text animation featuring GSAP-powered sequential character highlights, smooth color transitions, adjustable timing, opacity controls, and looping effects for modern UI and hero sections.
- [StaticNoiseText](https://reactbytes.online/text-animations/staticnoise-text): A customizable React static noise text animation featuring animated scanline distortion, glitch-inspired effects, adjustable intensity, responsive canvas rendering, and configurable typography for modern UI designs.
- [RainDropText](https://reactbytes.online/text-animations/raindrop-text): A customizable React raindrop text animation featuring GSAP-powered falling character reveals, bounce effects, staggered timing, repeat controls, and responsive typography for modern UI and hero sections.
- [ShatterText](https://reactbytes.online/text-animations/shatter-text): A customizable React shatter text animation featuring GSAP-powered physics effects, randomized character motion, hover or click triggers, bounce reassembly, and fully adjustable animation controls for modern UI designs.
- [Letter3DSwap](https://reactbytes.online/text-animations/letter3d-swap): A free React 3D Letter Swap animation powered by GSAP, featuring smooth letter flip transitions, customizable flip directions, staggered animations, hover or programmatic triggers, and realistic 3D effects.
- [TextPressure](https://reactbytes.online/text-animations/text-pressure): A free open-source React interactive typography component featuring pressure-style hover animations, dynamic font weight, width expansion, scaling, italics, opacity effects, and Tailwind CSS-powered transitions for modern websites and UI designs.
- [WavePathText](https://reactbytes.online/text-animations/wavepath-text): A customizable React wave-path text animation powered by GSAP, featuring SVG curved-path scrolling, seamless infinite looping with zero visible restart, adjustable wave shapes, responsive Tailwind CSS typography, and smooth marquee-style motion for banners, headers, and modern UI designs.
- [ParticleText](https://reactbytes.online/text-animations/particle-text): A free open-source React particle text animation featuring interactive mouse effects, physics-based particle motion, customizable colors, responsive canvas rendering, auto-fit typography, and high-performance animations for modern websites and UI designs.
- [BlurHighlight](https://reactbytes.online/text-animations/blur-highlight): A free open-source React text highlight animation featuring GSAP-powered blur effects, animated highlight wipes, customizable reveal directions, staggered animations, scroll-triggered viewport detection, and responsive typography for modern websites and UI designs.
- [CurvedMarquee](https://reactbytes.online/text-animations/curved-marquee): A free open-source React curved marquee component featuring SVG path-based text animations, smooth infinite scrolling, draggable interactions, customizable curve depth, fade edge effects, responsive typography, and high-performance animations for modern websites and UI designs.

## Carousels
- [RotatingCards](https://reactbytes.online/carousels/rotating-cards): A customizable React rotating card carousel powered by GSAP, featuring smooth orbit animations, draggable controls, autoplay, hover effects, mouse wheel navigation, and animated card entrances.
- [RotatingCarousel](https://reactbytes.online/carousels/rotating-carousel): A customizable React 3D carousel component featuring GSAP-powered rotation, draggable interactions, inertia physics, autoplay, responsive image cards, hover effects, dynamic shading, and configurable entrance animations for modern UI designs.
- [ScrollStack](https://reactbytes.online/carousels/scroll-stack): A customizable React scroll stack component featuring GSAP ScrollTrigger-powered card stacking, pinning, scaling, rotation, blur effects, responsive layouts, and smooth scroll-driven animations for modern UI designs.
- [SpectraSlider](https://reactbytes.online/carousels/spectra-slider): A customizable React card slider featuring GSAP-powered 3D animations, draggable interactions, smooth mouse wheel navigation, autoplay, curved layouts, responsive card positioning, and interactive transitions for modern UI designs.
- [SpiralImages](https://reactbytes.online/carousels/spiral-images): A free open-source React spiral image gallery featuring animated Archimedean spiral layouts, infinite image flow, Canvas-powered rendering, customizable spacing, fade transitions, responsive scaling, and high-performance animations for modern websites and UI designs.

## Cards
- [ImageCardHover](https://reactbytes.online/cards/magecard-hover): A customizable React layered image hover component featuring GSAP-powered 3D tilt, parallax effects, stacked image layers, shape clipping, blur, rotation, color filters, and interactive hover animations for modern UI designs.

## Cursors
- [SmokeyCursorEffect](https://reactbytes.online/cards/smokeycursor-effect): A free open-source React fluid cursor effect featuring WebGL-powered fluid simulations, interactive mouse and touch splashes, customizable physics, dynamic shading, colorful particle effects, and GPU-accelerated animations for modern websites and UI designs.

## Backgrounds
- [MouseRepelDots](https://reactbytes.online/backgrounds/mouserepel-dots): A customizable React interactive dot background featuring mouse repulsion, smooth physics-based motion, animated gradients, wave effects, sparkle animations, and high-performance canvas rendering.
- [MouseRepelGrid](https://reactbytes.online/backgrounds/mouserepel-grid): A customizable WebGL-powered React grid background featuring mouse repulsion, animated waves, glowing effects, gradients, rainbow modes, ambient motion, and interactive pulse animations.
- [BlinkingSquares](https://reactbytes.online/backgrounds/blinking-squares): A customizable React animated square background featuring softly twinkling squares, directional fading, glow effects, adjustable brightness, and high-performance canvas rendering.
- [HalfTone](https://reactbytes.online/backgrounds/half-tone): A customizable React Three Fiber halftone background featuring animated dot patterns, multiple shape styles, directional wave motion, color controls, and shader-powered WebGL rendering.
- [Vortex](https://reactbytes.online/backgrounds/vortex): A customizable React Three Fiber vortex background featuring animated swirling gradients, fluid shader motion, adjustable colors, noise intensity, opacity, and WebGL-powered visual effects.
- [AsciiWave](https://reactbytes.online/backgrounds/ascii-wave): A customizable React Three Fiber ASCII shader background featuring animated wave patterns, interactive cursor effects, custom character sets, procedural noise, and optional video-to-ASCII rendering.
- [EmojiWave](https://reactbytes.online/backgrounds/emoji-wave): A customizable React Three Fiber emoji shader background featuring animated wave motion, interactive cursor effects, custom emoji sets, procedural animation, and optional video-based rendering.
- [ShapesDots](https://reactbytes.online/backgrounds/shapes-dots): A customizable React canvas background featuring animated geometric shapes, interactive cursor effects, ripple bursts, multiple animation modes, gradient colors, and responsive motion.
- [AsciiPlasmaWave](https://reactbytes.online/backgrounds/asciiplasma-wave): A customizable React ASCII plasma background featuring OGL-powered WebGL shaders, animated plasma waves, configurable ASCII characters, colorful gradients, adjustable glyph density, and high-performance rendering for modern UI designs.
- [RotatingStars](https://reactbytes.online/backgrounds/rotating-stars): A free React WebGL background component featuring rotating star rings, customizable colors, speed, thickness, blur, opacity, and smooth shader-powered animations. Perfect for modern websites, landing pages, dashboards, and hero sections. No license required.
- [PrismaticBurst](https://reactbytes.online/backgrounds/prismatic-burst): A free open-source React shader background featuring React Three Fiber-powered prismatic light bursts, customizable color gradients, animated ray effects, 3D rotation, hover interactions, WebGL rendering, and responsive visuals for modern websites and UI designs.
- [GradientBarsBackground](https://reactbytes.online/backgrounds/gradient-bars): A free open-source React animated gradient bars background featuring customizable color gradients, pulsing vertical bars, procedural noise textures, directional animations, and high-performance CSS effects for modern websites and UI designs.
- [Silk](https://reactbytes.online/backgrounds/silk): A free open-source React silk shader background featuring React Three Fiber-powered flowing fabric animations, customizable colors, procedural noise, adjustable speed, scale, rotation, and high-performance WebGL rendering for modern websites and UI designs.

## Optional
- [GitHub Repository](https://github.com/Tasin-Hossain/React-Bytes): Source code, issues, and contribution guide.
- [Sitemap](https://reactbytes.online/sitemap.xml): Full site sitemap.