React Bits components

An open source collection of animated, interactive & fully customizable React components for building memorable websites.

Components: 218
Framework: React
Stack: React, JavaScript, CSS
License: Commons-Clause+MIT
GitHub stars: 48,326
Source: https://github.com/DavidHDev/react-bits
Website: https://reactbits.dev
Install: npx shadcn@latest add @react-bits/{name}

All React Bits components

Asciitext: Renders text with an animated ASCII background for a retro feel.
Accordion Gallery: Panels expand on hover or focus, revealing parallax imagery and captions.
Acid Squares: A crystalline corridor of stacked squares receding into depth.
Aero Shards: A GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer interactions.
Animated Content: Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
Animated List: List items enter with staggered motion variants for polished reveals.
Antigravity: 3D antigravity particle field that repels from the cursor with smooth motion.
Aurora: Flowing aurora gradient background.
Balatro: The balatro shader, fully customizalbe and interactive.
Ballpit: Physics ball pit simulation with bouncing colorful spheres.
Beams: Crossing animated ribbons with customizable properties.
Bell Toggle: Pill toggle that answers a press at three tempos: the bell rings on damped keyframes, the label blur-crossfades, and the pill unfurls to…
Blob Cursor: Custom cursor made of gooey blobs that trail the pointer with a delay.
Blur Text: Text starts blurred then crisply resolves for a soft-focus reveal effect.
Border Glow: Glowing mesh-gradient border that follows cursor direction and intensifies near edges.
Bounce Cards: Cards bounce that bounce in on mount.
Branched Menu: Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and…
Bubble Menu: Navigation bar of round bubbles (logo and toggle) that opens a full-screen overlay of pill-shaped menu links popping in.
Crtwarp: Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.
Call Chip: Inline tool-call chip whose fill wipes across while a live ms counter ticks, completing with a green wash on success or stopping short and…
Card Nav: Expandable navigation bar with card panels revealing nested links.
Card Swap: Cards animate position swapping with smooth layout transitions.
Carousel: Responsive carousel with touch gestures, looping and transitions.
Chroma Grid: A responsive grid of grayscale tiles. Hovering the grid reaveals their colors.
Circular Carousel: A 3D ring of images with four layouts, bendable cards, depth fade, momentum drag, snapping and click to focus.
Circular Gallery: Circular orbit gallery rotating images.
Circular Text: Layouts characters around a circle with optional rotation animation.
Click Spark: Creates particle spark bursts at click position.
Code Slots: One-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on one spring: the…
Color Bends: Vibrant color bends with smooth flowing animation.
Comet Dial: Tick-ring dial you flick by angle: the reading launches on a spring and a velocity-driven comet streaks behind the lit head, trailing the…
Count Up: Animated number counter supporting formatting and decimals.
Counter: Flexible animated counter supporting increments + easing.
Crosshair: Custom crosshair cursor with tracking, and link hover effects.
Crystalized Ball
Cubes: 3D rotating cube cluster. Supports auto-rotation or hover interaction.
Cursor Grid: Canvas grid background whose cells light up within a radius of the cursor and fade out afterwards.
Curved Input: Arc-bent input bar with text, caret and submit button all following the curve.
Curved Loop: Flowing looping text path along a customizable curve with drag interaction.
Dark Veil: Subtle dark background with a smooth animation and postprocessing.
Decay Card: Hover parallax effect that disintegrates the content of a card.
Decrypted Text: Hacker-style decryption cycling random glyphs until resolving to real text.
Depth Carousel: Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance.
Depth Text: Layered extruded type with parallax that shifts against the pointer.
Dither: Retro dithered noise shader background.
Dither Veil: A photo printed as a 1-bit dither that the cursor burns through to full colour, leaving a trail that knits back cell by cell.
Dock: macOS style magnifying dock with proximity scaling of icons.
Dodge Field: Wrapper that makes any child flee the pointer inside a bounded field, dodges once per approach, then relents after a few tries and glides…
Dome Gallery: Immersive 3D dome gallery projecting images on a hemispheric surface.
Dot Field: Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.
Dot Grid: Animated dot grid with cursor interactions.
Drift Wall: An endless perspective wall of tiles drifting past, lifting on hover.
Echo Text: Ghosted copies trail behind the text and settle into a single word.
Elastic Mesh: Spring-mesh surface that stretches under the pointer and settles back with damped physics.
Elastic Slider: Slider handle stretches elastically then snaps with spring physics.
Electric Border: Jittery electric energy border with animated arcs, glow and adjustable intensity.
Electric Logo
Evil Eye: Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow.
Fade Content: Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
Falling Text: Characters fall with gravity + bounce creating a playful entrance.
Faulty Terminal: Terminal CRT scanline squares effect with flicker + noise.
Ferrofluid: A churning magnetic fluid traced by glowing contour lines, with a cursor magnet.
Flex Carousel: An infinite image row that flows through invisible liquid glass at its edges, with four bend presets, five entrances, a speed squeeze and…
Flip Card: Two-faced card that flips in 3D on a click, a drag or a flick, settling on a spring that carries your release velocity, with an optional…
Floating Lines: 3D floating lines that react to cursor movement.
Flowing Menu: Full-height menu of large links; hovering one slides in a marquee strip of text and images from the edge the pointer entered.
Fluid Glass: Glassmorphism container with animated liquid distortion refraction.
Flux Lines
Flying Button
Flying Posters: 3D posters rotate on scroll infinitely.
Fold Text: Lines unfold into place like creased paper opening flat.
Folder: Interactive folder opens to reveal nested content smooth motion.
Folder Float: Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a…
Fuse Button: Action button whose done state carries its own undo on a burning fuse: press, the label crossfades to Undo, a hairline burns for the undo…
Fuzzy Text: Vibrating fuzzy text with controllable hover intensity.
Galaxy: Parallax realistic starfield with pointer interactions.
Ghost Cursor: WebGL smoky trail that follows the pointer with inertia, bloom and film grain.
Ghost Fibers: A deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow.
Glare Hover: Adds a realistic moving glare highlight on hover over any element.
Glass Icons: Icon set styled with frosted glass blur.
Glass Surface: Advanced Apple-style glass surface with real-time distortion + lighting.
Glide Select: Select chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so…
Glitch Text: RGB split and distortion glitch effect with jitter effects.
Glow Cursor: WebGL glowing trail drawn through the recent pointer positions, over the content.
Gooey Nav: Navigation indicator morphs with gooey blob transitions between items.
Gradient Ascii
Gradient Blinds: Layered gradient blinds with spotlight and noise distortion.
Gradient Text: Animated gradient sweep across live text with speed and color control.
Gradient Waves: Raymarched sine waves rolling toward a soft, hazy horizon.
Gradual Blur: Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
Grainient: Grainy gradient swirls with soft wave distortion.
Grid Distortion: Warped grid mesh distorts smoothly reacting to cursor.
Grid Motion: Perspective moving grid lines based on cusror position.
Grid Scan: Animated grid room 3D scan effect and cool interactions.
Halftone Reveal: Print-style halftone dot matrix that resolves into sharp content around the cursor.
Hold Button: Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the…
Holo Card
Hyperspeed: Animated lines continuously moving to simulate hyperspace travel on click hold.
Image Trail: Cursor-based image trail with several built-in variants.
Infinite Menu: Horizontally looping menu effect that scrolls endlessly with seamless wrap.
Infinite Spiral: An endlessly looping 3D helix of images with customizable motion, depth, spacing and interaction.
Iridescence: Slick iridescent shader with shifting waves.
Jelly Radio: Radio group of labelled chips where the chosen one swells wide-then-tall on two springs and barges its neighbours outward with a…
Lanyard: Swinging 3D lanyard / badge card with realistic inertial motion.
Laser Flow: Dynamic laser light that flows onto a surface, customizable effect.
Lattice Loader: Small loading indicator: a 3x3 or 4x4 grid of cells lit in a looping pattern (orbit, snake, ripple, pulse) that settles into a done or…
Letter Glitch: Matrix style letter animation.
Light Pillar: Vertical pillar of light with glow effects.
Light Rays: Volumetric light rays/beams with customizable direction.
Light Tunnel: A radial fibre-optic tunnel with light pulses racing into depth.
Lightfall: Colorful light streaks raining down a glowing tunnel with a cursor light.
Lightning: Procedural lightning bolts with branching and glow flicker.
Line Sidebar: Static list navigation with a cursor-proximity effect that shifts and highlights nearby items.
Line Waves: Animated line wave pattern with colorful warped distortion.
Liquid Chrome: Liquid metallic chrome shader with flowing reflective surface.
Liquid Ether: Interactive liquid shader with flowing distortion and customizable colors.
Logo Loop: Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.
Magic Bento: Interactive bento grid tiles expand + animate with various options.
Magic Rings: Interactive magic rings effect with customizable parameters.
Magnet: Wrapper that pulls its child toward the mouse cursor while the pointer is within a padding distance, and lets it return when the pointer…
Magnet Lines: Animated field lines bend toward the cursor.
Masked Heading: Heading revealed word by word through a clip-path mask that wipes across, with a stagger.
Masonry: Responsive masonry layout with animated reflow + gaps optimization.
Meta Balls: Liquid metaball blobs that merge and separate with smooth implicit surface animation.
Metallic Paint: Liquid metallic paint shader which can be applied to SVG elements.
Micro Slats: A wall of tiny slats that becomes a rolling sea in perspective, with glinting crests, four presets, a real fluid the cursor stirs and an…
Model Viewer: Three.js model viewer with orbit controls and lighting presets.
Molten Metal: Swirling caustic plasma filaments with molten, white-hot cores.
Morph Slider: WebGL slider that melts between images with a displacement transition.
Noise: Animated film grain / noise overlay adding subtle texture and motion.
Option Wheel: Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection.
Orb: Floating energy orb with customizable hover effect.
Orbit Images: SVG Path customizable orbiting images effect
Paper Crumple: An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball…
Particle Text: Text assembles from drifting particles that scatter and reform on demand.
Particles: WebGL background of floating particles that can drift with the pointer.
Pattern Waves: A lit halftone surface of dots, lines, crosses or glyphs that moves like draped silk, rolling swells or ripples, with six presets…
Peek Rating: Star rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a tip hops along with…
Pill Nav: Minimal pill nav with sliding active highlight + smooth easing.
Pixel Blast: Exploding pixel particle bursts with optional liquid postprocessing.
Pixel Card: Card content revealed through pixel expansion transition.
Pixel Snow: Falling pixelated snow effect with customizable density and speed.
Pixel Swap: Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers.
Pixel Trail: Pixelated cursor trail emitting fading squares with retro digital feel.
Pixel Transition: Pixel dissolve transition for content reveal on hover.
Plasma: Organic plasma gradients swirl + morph with smooth turbulence.
Plasma Wave: Raymarched plasma waves with dual-wave interference and OGL.
Prism: Rotating prism with configurable intensity, size, and colors.
Prismatic Burst: Burst of light rays with controllable color, distortion, amount.
Profile Card: Animated profile card glare with 3D hover effect.
Prompt Bar: Chat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the…
Pulse Heart: Like button that contracts to a dot, flips colour at its smallest frame and pulses back while the count swaps one glyph.
Radar: Radar sweep effect with concentric rings, radial spokes, and a rotating beam.
Refine Frame: Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur…
Reflective Card: Card with dynamic webcam reflection and glare effects that respond to cursor movement.
Ribbons: Flowing responsive ribbons/cursor trail driven by physics and pointer motion.
Ripple Distortion: Pointer-driven water displacement that warps content and leaves a decaying wake.
Ripple Grid: A grid that continuously animates with a ripple effect.
Rotating Text: Cycles through multiple phrases with 3D rotate / flip transitions.
Rubber Segment: Segmented control with a rubber thumb: taps stretch it across the gap and squash it onto the target, and you can grab, drag and flick it…
Scanner: Calm interference bands sweeping across the screen like an oscilloscope.
Scrambled Text: Detects cursor position and applies a distortion effect to text.
Scroll Expand: A rounded media frame that grows to full bleed as it scrolls through the viewport.
Scroll Float: Text gently floats / parallax shifts on scroll.
Scroll Reveal: Text gently unblurs and reveals on scroll.
Scroll Stack: Overlapping card stack reveals on scroll with depth layering.
Scroll Velocity: Text marquee animatio - speed and distortion scale with user's scroll velocity.
Scrub Field: Number chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without moving opens it for…
Shape Blur: Morphing blurred geometric shape. The effect occurs on hover.
Shape Grid: Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization.
Shape Waves: A WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text cutout the waves flow…
Shiny Text: Metallic sheen sweeps across text producing a reflective highlight.
Shredder: A list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and cut it into strips…
Shuffle: Animated text reveal where characters shuffle before settling.
Side Rays: Animated light rays emanating from the side with customizable colors and speed.
Silk: Smooth waves background with soft lighting.
Sliced Waves: A grid of soft glowing bars rippling like a slatted equalizer.
Slide Commit: Slide-to-confirm handle that plants with a spinner while your action runs, unfurls into a done pill on success and springs home with a…
Sling Button: Send button you pull back like a slingshot: the band stretches, a power arc arms it, and releasing fires the action with the flick\
Slosh Gauge: Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a…
Soft Aurora: Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes.
Specular Button: Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor.
Splash Cursor: Full-screen WebGL fluid simulation: moving the pointer splashes coloured ink that swirls and dissipates.
Split Flap Text: Mechanical split-flap departure board that clacks through to each new phrase.
Split Text: Splits a text into characters, words or lines and animates them in one after another with a stagger when it scrolls into view (GSAP…
Spotlight Card: Dynamic spotlight follows cursor casting gradient illumination.
Spring Check: Checkbox row where a single spring fills the box, draws the tick, strikes the label and dims the words in one press.
Squish Switch: Drag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the track end on a flick.
Stack: Layered stack with swipe animations, autoplay and smooth transitions.
Staggered Menu: Side menu panel that slides in over coloured layers, with the links animating in one after another.
Star Border: Animated star / sparkle border orbiting content with twinkle pulses.
Status Mark: A 20px status glyph for agent task lists that morphs in place from a dashed idle ring to a spinning or real-progress arc, then draws a…
Stepper: Animated multi-step progress indicator with active state transitions.
Sticker Peel: Sticker corner lift + peel interaction using 3D transform and shadow depth.
Strands: Glowing ribbon-like strands that ripple and weave across a transparent canvas.
Stroke Text: Outlined letterforms draw themselves on, then flood with fill.
Swarm Cursor: WebGL swarm of particles that flock around the pointer.
Swipe Row: List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across…
Swipe Toast: Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its…
Target Cursor: Custom cursor shaped as a dot with four spinning corner brackets that snap around any element marked as a target on hover.
Tear Ticket: Ticket whose perforated stub tears off by hand: paper bridges stretch into fibres and snap one by one from the far end, the torn edges are…
Tech Text: A wordmark whose letters turn into dashed vector paths under the cursor. Grab any letter to drag it off the baseline and it springs back…
Text Cursor: Leaves a trail of a repeated text or emoji along the path of the mouse; the items float and fade out.
Text Loop: A seamless text marquee that flows along curved SVG paths.
Text Pressure: Characters scale / warp interactively based on pointer pressure zone.
Text Type: Typewriter effect with blinking cursor and adjustable typing cadence.
Thought Line: Reasoning-trace header: a glyph and a label breathe beside a live clock while steps appear beneath, then the line settles on one beat into…
Threads: Animated pattern of lines forming a fabric-like motion.
Tilted Card: 3D perspective tilt card reacting to pointer.
Topography: A living contour map with glowing, elevation-tinted lines.
True Focus: Applies dynamic blur / clarity based over a series of words in order.
Variable Proximity: Letter styling changes continuously with pointer distance mapping.
Voice Pill: Mic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or toggled, then relaxes back…
Wake Slider: Range slider drawn as thin bars with no thumb: drag speed raises a wake that trails behind the handle and flattens again at rest.
Warm Tooltip: Tooltip group with one shared delay: the first label waits and pops from its trigger, then siblings open instantly while the group is…
Warp Text: WebGL warp that bends and refracts the text around the pointer.
Waves: Layered lines that form smooth wave patterns with animation.
Web Threads: Glowing sine threads woven through a luminous convergence point.

React Bits components

All React Bits components

Browse by category