# Kinetic > 119 motion components for React. Every component ships its full source, a > shadcn registry item, and a prompt written for coding agents. Each component has a prompt at https://kinetic-seven-taupe.vercel.app/prompts/.md ## Scroll - [Banded Scrollspy Rail](https://kinetic-seven-taupe.vercel.app/c/banded-scrollspy-rail): A tick rail whose active mark widens as a section crosses a 7% band through the middle of the screen. - [Batched Blur Reveal](https://kinetic-seven-taupe.vercel.app/c/batched-blur-reveal): Cards that enter together focus in as one staggered group instead of arriving as a slab. - [One Reveal Engine, Two Axes](https://kinetic-seven-taupe.vercel.app/c/container-animation-reveals): The same staggered line reveal fires for vertical sections and for panels on a horizontal track. - [Converging Flow Steps](https://kinetic-seven-taupe.vercel.app/c/converging-flow-steps): A process diagram that closes from both ends while the connectors pop in a third of the way through. - [CSS Variable Stagger Reveal](https://kinetic-seven-taupe.vercel.app/c/css-var-stagger-reveal): Groups reveal as they enter their scroll container; the stagger delay is a CSS calc over an index the JS writes once. - [Dataset-Driven Parallax](https://kinetic-seven-taupe.vercel.app/c/dataset-parallax): Layers drift at a rate written on the element itself, over the widest possible scroll window. - [Drag-Throw Scroll](https://kinetic-seven-taupe.vercel.app/c/drag-throw-scroll): Grab the page and pull it; let go mid-move and it coasts on, decaying, as far as the flick earned. - [Drag Mapped To Pin Progress](https://kinetic-seven-taupe.vercel.app/c/drag-to-pin-progress): Drag a pinned horizontal strip and it moves exactly one pixel per pixel, then throws and settles. - [Dual-Direction Scrub Entrance](https://kinetic-seven-taupe.vercel.app/c/dual-direction-scrub-entrance): Copy rises while a panel slides in from the side, both on one scrub with 600ms of lag. - [Inverse Scroll Scale](https://kinetic-seven-taupe.vercel.app/c/inverse-scroll-scale): Media enters oversized at 1.25x and settles to exactly 1.0 as it rises through the first 60% of the scroller. - [IntersectionObserver Reveal](https://kinetic-seven-taupe.vercel.app/c/io-reveal-lite): One element, one fade-and-rise on entry, no stylesheet and no library — with a single observer shared across every instance. - [Single Param Object Timeline](https://kinetic-seven-taupe.vercel.app/c/keyframe-param-object): One plain object holds every animated value; the scroll story is a table of keyframes anchored to real sections. - [Knockout Zoom Pin](https://kinetic-seven-taupe.vercel.app/c/knockout-zoom-pin): A word the size of the screen shrinks into a headline as you scroll, with the scene showing through its letters. - [Lenis On The GSAP Ticker](https://kinetic-seven-taupe.vercel.app/c/lenis-gsap-ticker): Smooth scroll and ScrollTrigger on one clock, with the lag-smoothing line everyone omits. - [Manufactured Scroll Range](https://kinetic-seven-taupe.vercel.app/c/manufactured-scroll-range): An empty box N screens tall turns a one-screen scene into a scrollable sequence, with progress as a CSS variable and the index as state. - [Mixed Scrub Depth Layers](https://kinetic-seven-taupe.vercel.app/c/mixed-scrub-depth-layers): Layers separate while you scroll and converge when you stop, because each depth has its own scrub. - [Pinned Horizontal Track](https://kinetic-seven-taupe.vercel.app/c/pinned-horizontal-track): A section pins while a strip of panels slides sideways, one scroll pixel per track pixel. - [Pre-Scatter Horizontal Gallery](https://kinetic-seven-taupe.vercel.app/c/prescatter-horizontal-gallery): A pinned strip where each item rests slightly off its slot, flies in from ahead and peels away behind. - [Scroll-Scrubbed Video](https://kinetic-seven-taupe.vercel.app/c/scroll-scrubbed-video): The scroll-to-frame mapping a scrubbed hero actually needs: smoothing, a snap, a frame quantiser and a loop that parks itself. - [Scrub Timeline Spine](https://kinetic-seven-taupe.vercel.app/c/scrub-timeline-spine): A rule that fills as you scroll, with entries alternating either side and reversing on the way back. - [Throttled Scrub To State](https://kinetic-seven-taupe.vercel.app/c/throttled-scrub-state): A scrubbed trigger fires 120x a second; a time, distance and frame gate turns that into a handful of React renders. - [Velocity-Deformed Cards](https://kinetic-seven-taupe.vercel.app/c/velocity-deform-cards): Cards skew, stretch and trail in proportion to scroll speed, then settle on their own with no easing curve anywhere. ## WebGL - [Anti-Aliased Point Discs](https://kinetic-seven-taupe.vercel.app/c/antialiased-disc-fragment): A phyllotaxis field of dots that stay the same weight at every pixel ratio, with no MSAA and no texture. - [Bayer-Quantised Plasma](https://kinetic-seven-taupe.vercel.app/c/bayer-plasma-hero): An iterated domain-warped plasma crushed to eleven grey levels, so the hero reads as a dot-matrix proof. - [Bit-Math Bayer8 Dither](https://kinetic-seven-taupe.vercel.app/c/bayer8-ordered-dither): A smooth gradient crushed to five levels through an 8x8 ordered matrix derived from six integer ops. - [Cursor-Reactive Shader Glow](https://kinetic-seven-taupe.vercel.app/c/cursor-reactive-shader-glow): A warped-noise atmosphere with a light that trails the cursor, held under a hard luminance ceiling so copy stays readable. - [Dot-Cloud Score Cylinder](https://kinetic-seven-taupe.vercel.app/c/cylinder-dot-score): Two counter-rotating cylinders of dots — rings, bar lines, notes — drawn from one buffer with no depth buffer. - [Cylinder Gallery Drum](https://kinetic-seven-taupe.vercel.app/c/cylinder-gallery): Nineteen planes wrapped around a drum in the vertex shader, spun by wheel or scroll, focus falling off from centre. - [Depth Fade And Travelling Pulse](https://kinetic-seven-taupe.vercel.app/c/depth-pulse-travelling-wave): A dot lattice on an arc: z drives alpha and point size together, and a per-column phase sweeps the pulse across the field. - [Domain-Warped FBM Fog](https://kinetic-seven-taupe.vercel.app/c/domain-warped-fbm): Slow, low-contrast fog that flows rather than fades, with a faint light that trails the cursor. - [Dual-Canvas Depth Split](https://kinetic-seven-taupe.vercel.app/c/dual-canvas-z-split): One particle field rendered twice with the depth sign flipped, so the text sits inside the field rather than on top of it. - [Fractional Render Scale](https://kinetic-seven-taupe.vercel.app/c/fractional-render-scale): A field rendered into a backing store 0.6x its box — 36% of the fragments — with a grid measured in texels so the upscale never shows. - [Fullscreen Triangle Pass](https://kinetic-seven-taupe.vercel.app/c/fullscreen-triangle-pass): One 3-vertex triangle covers the viewport and runs your fragment shader. No three, no ogl, no seam. - [GPU Cubic-Bezier Burst](https://kinetic-seven-taupe.vercel.app/c/gpu-bezier-burst): Rings of dots that burst on click, every particle solving its own cubic-bezier easing in the vertex shader. - [Instanced Quad Particles](https://kinetic-seven-taupe.vercel.app/c/instanced-quad-particles): Up to 1800 drifting particles in one draw call — quads rather than point sprites, so each one has its own size, spin and shape. - [Multipass Offscreen Composite](https://kinetic-seven-taupe.vercel.app/c/multipass-offscreen-composite): Four passes into two render targets — ramp, additive fills, half-size bloom — and one composite that writes the canvas once. - [In-Shader Mouse Bulge](https://kinetic-seven-taupe.vercel.app/c/ndc-mouse-bulge): A soft lens that follows the cursor, measured by projecting every vertex to screen space instead of raycasting. - [Single-Draw Orbit Rings](https://kinetic-seven-taupe.vercel.app/c/orbit-ring-points): Concentric rings of dots, one bright marker travelling each ring, all of it in a single draw call. - [Radial Ripple Dot Cloud](https://kinetic-seven-taupe.vercel.app/c/radial-ripple-dot-cloud): A dot field with a travelling wave running out of one off-centre point, its density drawn by hand as a B-spline. - [Realtime Cube EnvMap](https://kinetic-seven-taupe.vercel.app/c/realtime-cube-envmap): A metal knot reflecting panels that are actually orbiting it, captured six faces at a time every other frame. - [Scroll Deformation Wave](https://kinetic-seven-taupe.vercel.app/c/scroll-deform-wave): An image that ripples with scroll speed and bends the other way on the way back, from two sine terms. - [Spring Lattice Field](https://kinetic-seven-taupe.vercel.app/c/spring-lattice-field): A CPU damped-spring lattice uploaded as a texture each frame, displacing a procedural grid the cursor can push around. - [Stepped Film Grain](https://kinetic-seven-taupe.vercel.app/c/stepped-film-grain): A transparent grain overlay whose pattern jumps twelve times a second instead of every frame, so it reads as film. - [Superellipse Text Avoidance](https://kinetic-seven-taupe.vercel.app/c/superellipse-text-avoidance): A particle field that flows around the headline, held off by a 6-norm superellipse fitted to the measured text box. - [Area-Weighted Surface Particles](https://kinetic-seven-taupe.vercel.app/c/surface-sampled-particles): Any mesh becomes a particle shell of even density, assembling bottom-up, with orbit rings measured off the sampled silhouette. - [Text-Target Particle Glyphs](https://kinetic-seven-taupe.vercel.app/c/text-target-particle-glyphs): A particle cloud gathers into a word rasterised from a font already on the page, written left to right, then lets it go. - [Cover-Fit UV Maths](https://kinetic-seven-taupe.vercel.app/c/uv-cover-fit): object-fit: cover for a textured quad, solved in UV space so the crop follows a frame that reshapes every frame. - [Velocity Afterimage Pass](https://kinetic-seven-taupe.vercel.app/c/velocity-afterimage-pass): Marks that smear into a tail when the pointer moves fast and stay crisp when it slows, from two targets swapping roles. - [Vertex Shader Cylinder Bend](https://kinetic-seven-taupe.vercel.app/c/vertex-cylinder-bend): A flat plane wrapped around a cylinder on the GPU, with the curvature living in a uniform you can animate. ## Cursor - [Blend-Difference Cursor](https://kinetic-seven-taupe.vercel.app/c/blend-difference-cursor): A white dot in difference blend mode inverts whatever it crosses, growing 16 to 44 to 150px on hover. - [Cursor Clip-Path Mask](https://kinetic-seven-taupe.vercel.app/c/cursor-clip-path-mask): A disc of a second layer follows the pointer; hovering the trigger grows it until it covers the panel. - [Cursor Repulsion Burst](https://kinetic-seven-taupe.vercel.app/c/cursor-repulsion-burst): An orbiting particle field the pointer pushes out of the way, and a press detonates into a shock wave with a heat band. - [Dither Trail Image Reveal](https://kinetic-seven-taupe.vercel.app/c/dither-trail-image-reveal): A dimmed image restored through a trail of Bayer-thresholded blocks that smear in the direction the pointer moved. - [GSAP Cursor Follower](https://kinetic-seven-taupe.vercel.app/c/gsap-cursor-follower): A puck that replaces the arrow inside a panel, trailing 0.4s behind and swelling to a label over targets. - [Hover List Image Trail](https://kinetic-seven-taupe.vercel.app/c/hover-list-image-trail): Hovering a row stacks a plate into a column that follows the pointer; the oldest is culled past twenty. - [Magnetic Pointer Button](https://kinetic-seven-taupe.vercel.app/c/magnetic-button): A button that leans toward the cursor and springs back, with the label leading the box. - [Pointer Palette Sampling](https://kinetic-seven-taupe.vercel.app/c/pointer-palette-sampling): Point at the artwork and it names the colour — a clamped pixel read snapped to the nearest palette entry. - [Pointer-Variable Gradient](https://kinetic-seven-taupe.vercel.app/c/pointer-var-gradient): A soft glow tracks the pointer through two CSS custom properties. No rAF, no tween, no string rebuilding. - [Pooled Cursor Image Trail](https://kinetic-seven-taupe.vercel.app/c/pooled-image-trail): Tiles drop behind the cursor from a fixed ring of 22 reused nodes, one every 130px of travel. - [quickTo Cursor Preview](https://kinetic-seven-taupe.vercel.app/c/quickto-cursor-preview): A preview panel drifts a full second behind the pointer, driven by two reused quickTo tweens. - [Radial Mask Spotlight](https://kinetic-seven-taupe.vercel.app/c/radial-mask-spotlight): A layer masked to a soft disc follows the pointer, with a flat core that makes it read as a beam. - [Tweened Cursor Uniform](https://kinetic-seven-taupe.vercel.app/c/tweened-cursor-uniform): A shader grid with a lens under the pointer, whose position is tweened into the uniform so it settles instead of chasing. ## Transition - [A/B Layer Ping-Pong](https://kinetic-seven-taupe.vercel.app/c/ab-layer-crossfade): Two stacked layers alternate so any change crossfades, however fast you move between rows. - [Asymmetric In/Out Staggers](https://kinetic-seven-taupe.vercel.app/c/asymmetric-stagger): A list that arrives item by item after a hold and leaves twice as fast, from the last row backwards. - [Canvas Handoff Transition](https://kinetic-seven-taupe.vercel.app/c/canvas-handoff-transition): The live WebGL canvas is handed to the next page and flies to its new slot, instead of being destroyed and rebuilt. - [CSS Variable Clip-Path Tween](https://kinetic-seven-taupe.vercel.app/c/clip-path-variable-tween): One tweened custom property drives every clip-path on the panel, and reversing the timeline is the exit. - [Delayed-Unmount Loader](https://kinetic-seven-taupe.vercel.app/c/delayed-unmount-loader): A loading overlay that stays mounted 600ms past the signal so its fade can actually play before it leaves. - [Exit Warp Before Navigate](https://kinetic-seven-taupe.vercel.app/c/exit-warp-navigation): A ring of cards tears itself apart and rushes past the camera, and only then does the route change. - [Hinged Container Intro](https://kinetic-seven-taupe.vercel.app/c/hinged-container-intro): The page body swings up from below the fold, hinged on its own bottom edge, with captions following it in. - [Prefetch-On-Hover Wipe](https://kinetic-seven-taupe.vercel.app/c/hover-prefetch-wipe): Warms the next page on hover, wipes the screen on click, and navigates once the wipe has actually covered. - [Idle-Gated Page States](https://kinetic-seven-taupe.vercel.app/c/idle-gated-page-states): A page entrance that will not start until a floor delay has elapsed and the main thread has reported itself idle. - [Key-Replayed Page Reveal](https://kinetic-seven-taupe.vercel.app/c/page-reveal-overlay): An opaque overlay that fades away on every route change, replayed by nothing more than a changed React key. - [Staggered Panel Wipe](https://kinetic-seven-taupe.vercel.app/c/panel-wipe-preloader): An eased 0-100 counter, a word list and a five-column wipe, all on one timeline so they cannot drift. - [Re-Key Caption Replay](https://kinetic-seven-taupe.vercel.app/c/rekey-caption-replay): A caption block whose staggered entrance replays on every index change, restarted by a changed React key. - [Preloader That Cannot Hang](https://kinetic-seven-taupe.vercel.app/c/safe-preloader): An intro overlay with a hard ceiling, a minimum visible time and a once-per-session flag, so a stalled load cannot trap the page. - [Slab Page Transition](https://kinetic-seven-taupe.vercel.app/c/slab-page-transition): An opaque slab rises through the frame, the route changes under it, and it keeps going — nothing ever reverses. ## Text - [Asymmetric Typewriter](https://kinetic-seven-taupe.vercel.app/c/asymmetric-typewriter): Rotating phrases that delete at twice the speed they type, with a beat of nothing at the empty string. - [Char Stagger Then Scale-Up](https://kinetic-seven-taupe.vercel.app/c/char-stagger-scale-up): Characters resolve left to right, then the whole word scales up with an overshoot as the last one lands. - [Converging Headline Words](https://kinetic-seven-taupe.vercel.app/c/converging-scrub-words): Headline words slide in from opposite margins and lock into a sentence, pinned to scroll position. - [Eased Number Counter](https://kinetic-seven-taupe.vercel.app/c/eased-number-counter): A statistic that counts up on an eased curve and settles on its exact final figure without shifting the layout. - [Font-Safe Text Splitting](https://kinetic-seven-taupe.vercel.app/c/font-safe-text-split): Line splitting gated on document.fonts.ready, re-split on late fonts and on width change, debounced. - [Letter Scramble](https://kinetic-seven-taupe.vercel.app/c/morphsvg-letter-scramble): A word assembles out of noise — each character flips through wrong glyphs, decelerating onto the right one. - [Nested Split With True Restore](https://kinetic-seven-taupe.vercel.app/c/nested-splittext-restore): Splits rich markup into masked lines and restores the original innerHTML byte-for-byte on teardown. - [Scrubbed Character Colour Reveal](https://kinetic-seven-taupe.vercel.app/c/scrub-char-color-reveal): A dim paragraph resolves character by character as it crosses the viewport, tied to scroll position not a clock. - [Pixels-Per-Second Marquee](https://kinetic-seven-taupe.vercel.app/c/seamless-marquee): A marquee whose duration is derived from measured width and a px/second speed, so every strip moves at the same rate. - [Step-End Blinking Caret](https://kinetic-seven-taupe.vercel.app/c/step-end-caret): A text caret that snaps on and off instead of fading, using step-end timing and an uneven blink rhythm. - [Stroke-To-Fill Hover Rows](https://kinetic-seven-taupe.vercel.app/c/stroke-to-fill-hover): An index of outlined type where the hovered row fills in solid, drops its stroke, and steps sideways. ## Layout - [Auto-Advance Filmstrip](https://kinetic-seven-taupe.vercel.app/c/auto-advance-filmstrip): A centred strip that steps one panel every few seconds, neighbours dimmed and shrunk, on one CSS transition. - [Drag Marquee](https://kinetic-seven-taupe.vercel.app/c/drag-marquee): An endless row that drifts, takes a drag and a throw, and scatters its cards while your hand is down. - [FOV-Derived Row Spacing](https://kinetic-seven-taupe.vercel.app/c/fov-derived-row-step): A row whose item spacing is solved from a field of view and a camera distance, so it spans the frame exactly at any size. - [Height-First Media Stage](https://kinetic-seven-taupe.vercel.app/c/height-first-media-stage): A media stage sized from its height, with the width derived from the ratio, cross-fading layers and a caption that replays per index. - [Layout Lerp Scalar](https://kinetic-seven-taupe.vercel.app/c/layout-lerp-scalar): Row, stack, drum and fan are one placement function of seven numbers. Switching layout is a tween over an object. - [matchMedia Layout Teardown](https://kinetic-seven-taupe.vercel.app/c/matchmedia-layout-teardown): Two layouts behind one gsap.matchMedia block. Cross the breakpoint and the desktop branch reverts itself. - [Percent Slide Carousel](https://kinetic-seven-taupe.vercel.app/c/percent-slide-carousel): A flex track translated by -100% per slide. One CSS transition, no measurement, no library. - [Perspective Coverflow Scroller](https://kinetic-seven-taupe.vercel.app/c/perspective-coverflow-scroller): Panels turn away from the centre in real 3D as you scroll a native container — no tween, no loop. - [Proximity Snap Track](https://kinetic-seven-taupe.vercel.app/c/proximity-snap-track): A horizontal rail of variable-width cards that snaps only when you stop near one, and never skips past two at once. - [Rotary Drag Carousel](https://kinetic-seven-taupe.vercel.app/c/rotary-drag-carousel): A wheel of cards you grab and spin. Angular drag, projected inertia, and it always lands on a station. - [Wrapping Drum Carousel](https://kinetic-seven-taupe.vercel.app/c/wrapping-drum-carousel): An endless carousel that reads as a rotating drum with no 3D at all — only x, scale and fading opacity. ## Primitives - [Analytic Disc Picking](https://kinetic-seven-taupe.vercel.app/c/analytic-disc-picking): Hit-test camera-facing discs by intersecting the pointer ray with their plane. Exact, allocation-free, and correct for shader billboards. - [Browser Chrome Frame](https://kinetic-seven-taupe.vercel.app/c/browser-chrome-frame): A macOS window frame with hover-revealed traffic lights and an address pill whose check draws itself on copy. - [Chord-Synced Particle Burst](https://kinetic-seven-taupe.vercel.app/c/burst-audio-sync): Fires an arpeggio and its visual flares off one schedule, so each flash lands on its own note. - [Capture-Phase Click Swallow](https://kinetic-seven-taupe.vercel.app/c/capture-phase-click-swallow): Cancels the single click a finished drag would fire, in the capture phase, without eating the next real click or keyboard activation. - [Compound Group Hover Card](https://kinetic-seven-taupe.vercel.app/c/compound-group-hover): One hover drives four changes on three elements, each with its own duration and curve. Keyboard gets all four. - [Conic @property Border](https://kinetic-seven-taupe.vercel.app/c/conic-property-border): A gradient ring that rotates around a rounded box. Two highlights chase each other; no JavaScript runs. - [Raycaster-Free Hover Picking](https://kinetic-seven-taupe.vercel.app/c/cpu-mirror-picking): Run the GPU's transform again on the CPU and hit-test the result. No raycaster, no rect reads. - [Dotted Notepad Surface](https://kinetic-seven-taupe.vercel.app/c/dotted-notepad-surface): A tiled dot grid that dissolves at the panel edges, with a hard-stopped folded corner. - [Drag with a Dead Zone and Pointer Capture](https://kinetic-seven-taupe.vercel.app/c/drag-deadzone-capture): Captures the pointer on press but only commits to a drag past a distance threshold, so a shaky click stays a click. - [Drifting Smoke Layers](https://kinetic-seven-taupe.vercel.app/c/drifting-smoke-layers): Slow volumetric fog built from blurred radial gradients on three coprime cycles. No texture, no canvas. - [Looping Scroll Cue](https://kinetic-seven-taupe.vercel.app/c/looping-scroll-cue): The hairline that dives down a hero. One keyframe pair, a hard ease, and a seamless loop. - [Lottie Ratio Poster](https://kinetic-seven-taupe.vercel.app/c/lottie-ratio-poster): Reserves the box, holds a drawn poster, fetches the JSON only in view, then corrects the ratio from the animation's own w and h. - [Nav Dot Wave](https://kinetic-seven-taupe.vercel.app/c/nav-dot-wave): Nav dots that lift in sequence. The index is an inline custom property; CSS derives the delay. - [Pause, Don't Unmount](https://kinetic-seven-taupe.vercel.app/c/pause-dont-unmount): React 19's Activity hides a WebGL scene without losing its state. Effects still tear down, so the GL context is genuinely released. - [Relaxed Seeded Scatter](https://kinetic-seven-taupe.vercel.app/c/relaxed-seeded-scatter): Seeded angles around a ring, pushed apart until nothing collides. Ghost ticks mark where they started. - [Self-Parking RAF](https://kinetic-seven-taupe.vercel.app/c/self-parking-raf): An epsilon snap lets a damped value reach its target exactly, so the frame loop hits its exit test and dies. - [Slow Idle Float](https://kinetic-seven-taupe.vercel.app/c/slow-float-idle): A 14px rise and fall over 5 seconds, on the independent translate property so hover transforms still work. - [Spring To CSS linear()](https://kinetic-seven-taupe.vercel.app/c/spring-to-linear-easing): Solves a spring once, samples it into a CSS linear() string, and runs the whole bounce on the compositor. - [Web Audio Scheduling Kit](https://kinetic-seven-taupe.vercel.app/c/web-audio-scheduler): A lookahead sequencer: a coarse timer queues beats onto the sample-accurate audio clock, so tempo never drifts. - [Wheel Accumulator Stepper](https://kinetic-seven-taupe.vercel.app/c/wheel-accumulator-stepper): Wheel input normalised by deltaMode and accumulated to a threshold, so one flick of any device moves exactly one step. - [Shortest Signed Ring Offset](https://kinetic-seven-taupe.vercel.app/c/wrapped-ring-offset): Ten dots on a ring, each showing its wrapped offset and the raw index difference it replaces.