@remocn
remocn is a shadcn registry of 64+ production-ready Remotion video components for building product demos, changelogs, and launch videos in React. Categories: Text Animations (blur reveal, typewriter, shimmer sweep, slot machine, matrix decode, RGB glitch, kinetic type mask, infinite marquee), Backgrounds (mesh gradient, dynamic grid, spring pop-in), Transitions (chromatic aberration wipe, frosted glass wipe, directional wipe, grid pixelate, spatial push, zoom-through), UI Blocks (terminal simulator, browser flow, toast notification, animated charts, device mockup zoom, morphing modal), and full Compositions (product launch trailer, changelog bite, pricing tier focus). Built on Remotion 4.0, React 19, Tailwind v4, Next.js. Fully free, MIT license. Use for: creating animated product demo videos, changelogs, or documentation clips programmatically in React without a video editor.
Install this registry
npx shadcn@latest add https://www.remocn.dev/r/registry.json pnpm dlx shadcn@latest add https://www.remocn.dev/r/registry.json bunx shadcn@latest add https://www.remocn.dev/r/registry.json curl -s https://www.remocn.dev/r/registry.json Components
250 totalPer-character fade-in with a gentle blur and upward motion. Apple's signature hero-title reveal.
npx shadcn@latest add https://www.remocn.dev/r/soft-blur-in.json Letters slide up from below with no blur — crisp, deliberate, kinetic.
npx shadcn@latest add https://www.remocn.dev/r/per-character-rise.json Letters rise from below in a pronounced staircase, one symbol at a time, with zero blur.
npx shadcn@latest add https://www.remocn.dev/r/bottom-up-letters.json Letters descend from above in a pronounced staircase, one symbol at a time, with zero blur.
npx shadcn@latest add https://www.remocn.dev/r/top-down-letters.json Words pop in with a soft overshoot scale, like a physical spring settling into place.
npx shadcn@latest add https://www.remocn.dev/r/spring-scale-in.json A calm, tiny scale pop used as subtle premium polish for labels and headings.
npx shadcn@latest add https://www.remocn.dev/r/micro-scale-fade.json Subtle premium settle-in with a restrained scale-down fade on exit.
npx shadcn@latest add https://www.remocn.dev/r/scale-down-fade.json Words arrive clean and depart upward with increasing blur for airy exits.
npx shadcn@latest add https://www.remocn.dev/r/blur-out-up.json A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.
npx shadcn@latest add https://www.remocn.dev/r/focus-blur-resolve.json A hard cut disguised as a lens punch-in: barrel distortion, zoom blur, chromatic split and camera shake around the splice.
npx shadcn@latest add https://www.remocn.dev/r/lens-zoom.json Each line enters from the left with a staggered slide and exits to the right for a flowing paragraph reveal.
npx shadcn@latest add https://www.remocn.dev/r/line-by-line-slide.json Words gently fade into place one after another, with a short vertical drift for a calm keynote rhythm.
npx shadcn@latest add https://www.remocn.dev/r/per-word-crossfade.json Voiceover-paced phrases that build word by word — the next word looms as a blurred ghost before it resolves, then the phrase cuts away.
npx shadcn@latest add https://www.remocn.dev/r/word-stream.json A phrase builds from its first word centered: each next word drives in from the right and pushes the line left, easing into the new center.
npx shadcn@latest add https://www.remocn.dev/r/word-push.json A title glides in from the right with an exponential settle and a slow final creep to center, while a gradient sheen sweeps once through the glyphs.
npx shadcn@latest add https://www.remocn.dev/r/sheen-slide-in.json Characters appear one by one on a tight stagger; when the last one lands, every letter gap compresses as one and the word squeezes together.
npx shadcn@latest add https://www.remocn.dev/r/squeeze-in.json Display text resolves out of fog: characters sharpen from heavy blur center-out with vertical streaks dissolving above them, as if rising along the z-axis.
npx shadcn@latest add https://www.remocn.dev/r/fog-rise.json A gradient caret swells into a block that consumes the first phrase right-to-left, collapses back and types the second phrase out with a blinking caret.
npx shadcn@latest add https://www.remocn.dev/r/caret-swap.json A close-up word reveal: huge words fade into a long line while the camera rides the write head, the line streaming off-frame as the shot eases into focus.
npx shadcn@latest add https://www.remocn.dev/r/zoom-words.json Words appear sharply from below while the centered phrase pushes cumulatively closer on every beat, then clears through a soft left-to-right opacity wipe.
npx shadcn@latest add https://www.remocn.dev/r/centered-word-build.json A clipped pill expands inside a sentence, physically pushes the surrounding words apart, removes them through blur and takes over the frame with a fast camera …
npx shadcn@latest add https://www.remocn.dev/r/inline-pill-takeover.json A centered cursorless type build holds, then exits through opposing fixed-layout glyph wipes that leave the anchor visible longest.
npx shadcn@latest add https://www.remocn.dev/r/typed-split-wipe.json A line rises up and left while one dense dark shadow uncovers it and a second shadow sweeps back across it for the exit.
npx shadcn@latest add https://www.remocn.dev/r/shadow-sweep-text.json A rising lead word gives way to an outlined value that fills from left to right while both travel on one continuous track.
npx shadcn@latest add https://www.remocn.dev/r/outline-fill-track-text.json An oversized gradient reveal snaps to a separate compact blurred line that settles left while the reveal continues.
npx shadcn@latest add https://www.remocn.dev/r/gradient-scale-cut-text.json A resting white word blasts through vertical scale motion, separating into energy-conserving RGB shutter trails before the next word resolves.
npx shadcn@latest add https://www.remocn.dev/r/rush-type.json A flat word pops up out of the plane on a solid colored 3D body, no camera involved.
npx shadcn@latest add https://www.remocn.dev/r/extrude-pop.json A Material-style content transition: old fades out, new fades in with a soft delay.
npx shadcn@latest add https://www.remocn.dev/r/fade-through.json Per-word hard-cut transition with staircase timing for sharp editorial swaps.
npx shadcn@latest add https://www.remocn.dev/r/shared-axis-y.json Scale-based shared-axis transition for focus shifts and context depth.
npx shadcn@latest add https://www.remocn.dev/r/shared-axis-z.json The whole phrase glides in from the left as one compact move while words reveal in sequence through opacity.
npx shadcn@latest add https://www.remocn.dev/r/short-slide-right.json Letters lift, rotate, and softly reshape into editable phrases with sampled outline trails.
npx shadcn@latest add https://www.remocn.dev/r/kinetic-morph-text.json A coarse mesh warp bends a whole word in staccato beats, one axis per keyframe.
npx shadcn@latest add https://www.remocn.dev/r/kinetic-warp.json A word appears in the center; each new word enters from the right and pushes the line until the full phrase locks centered.
npx shadcn@latest add https://www.remocn.dev/r/kinetic-center-build.json Each new word drops in from above into its own line and pushes the stack downward until a centered three-line composition locks in place.
npx shadcn@latest add https://www.remocn.dev/r/short-slide-down.json Character-by-character text reveal with a deterministic blinking cursor.
npx shadcn@latest add https://www.remocn.dev/r/typewriter.json Animates one word inside a sentence from a base color to a brand color.
npx shadcn@latest add https://www.remocn.dev/r/inline-highlight.json Letters fly in from off-canvas and smear horizontally on the way — a vertex-lag deformation, not a scale.
npx shadcn@latest add https://www.remocn.dev/r/stretch-in.json Draws a strike line across old text then reveals new text in its place.
npx shadcn@latest add https://www.remocn.dev/r/strikethrough-replace.json Words fade in and slide up one after another with a configurable delay.
npx shadcn@latest add https://www.remocn.dev/r/staggered-fade-up.json Lines reveal upward with a soft masked feel and compact stagger.
npx shadcn@latest add https://www.remocn.dev/r/mask-reveal-up.json Letter-spacing collapses and blur clears with a springy motion.
npx shadcn@latest add https://www.remocn.dev/r/tracking-in.json Light shine sweeps across muted text via background-clip:text.
npx shadcn@latest add https://www.remocn.dev/r/shimmer-sweep.json Colored marker block draws behind a phrase as the text color shifts.
npx shadcn@latest add https://www.remocn.dev/r/marker-highlight.json Vertical reel scrolls characters from one value to another.
npx shadcn@latest add https://www.remocn.dev/r/slot-machine-roll.json Random scramble resolves left-to-right into the target text.
npx shadcn@latest add https://www.remocn.dev/r/matrix-decode.json Three RGB-offset text copies jitter for a brief glitch window.
npx shadcn@latest add https://www.remocn.dev/r/rgb-glitch-text.json Seamlessly looping horizontal text strip with optional stroke style.
npx shadcn@latest add https://www.remocn.dev/r/infinite-marquee.json WebGL mesh gradient backdrop driven per-frame for deterministic Remotion renders.
npx shadcn@latest add https://www.remocn.dev/r/shader-mesh-gradient.json Grainy multi-stop gradient that drifts slowly with film-grain texture over the blend.
npx shadcn@latest add https://www.remocn.dev/r/shader-grain-gradient.json Domain-warped color field that folds and stretches like liquid.
npx shadcn@latest add https://www.remocn.dev/r/shader-warp.json Concentric bands swirling around a center point.
npx shadcn@latest add https://www.remocn.dev/r/shader-swirl.json Caustic water-surface ripples with subtle refraction.
npx shadcn@latest add https://www.remocn.dev/r/shader-water.json Rotating spiral arms radiating from the center.
npx shadcn@latest add https://www.remocn.dev/r/shader-spiral.json Molten metallic surface with flowing specular highlights.
npx shadcn@latest add https://www.remocn.dev/r/shader-liquid-metal.json Overlapping translucent color panels sliding past each other.
npx shadcn@latest add https://www.remocn.dev/r/shader-color-panels.json Organic neural-web noise field that slowly morphs.
npx shadcn@latest add https://www.remocn.dev/r/shader-neuro-noise.json Classic Perlin noise clouds drifting across the frame.
npx shadcn@latest add https://www.remocn.dev/r/shader-perlin-noise.json Simplex noise flow field, smoother than Perlin.
npx shadcn@latest add https://www.remocn.dev/r/shader-simplex-noise.json Animated Voronoi cells shifting and re-tessellating.
npx shadcn@latest add https://www.remocn.dev/r/shader-voronoi.json Dots orbiting on concentric paths across the frame.
npx shadcn@latest add https://www.remocn.dev/r/shader-dot-orbit.json Ordered-dither shading over an animated gradient field.
npx shadcn@latest add https://www.remocn.dev/r/shader-dithering.json Volumetric light rays radiating from an off-screen source.
npx shadcn@latest add https://www.remocn.dev/r/shader-god-rays.json Soft smoke ring curling and dissipating in place.
npx shadcn@latest add https://www.remocn.dev/r/shader-smoke-ring.json Organic blobs merging and splitting like lava.
npx shadcn@latest add https://www.remocn.dev/r/shader-metaballs.json Glowing border frame that pulses around the edges.
npx shadcn@latest add https://www.remocn.dev/r/shader-pulsing-border.json Animated mouse cursor moving between waypoints with click ripple feedback.
npx shadcn@latest add https://www.remocn.dev/r/simulated-cursor.json A swirl shader transition that unwinds open and winds shut to reveal the next scene.
npx shadcn@latest add https://www.remocn.dev/r/swirl-dissolve.json A dithering shader transition that dissolves one scene into the next.
npx shadcn@latest add https://www.remocn.dev/r/dither-dissolve.json A perlin-noise shader transition that sweeps its noise threshold to dissolve one scene into the next.
npx shadcn@latest add https://www.remocn.dev/r/perlin-dissolve.json A smoke-ring shader transition that expands the ring outward to reveal the next scene.
npx shadcn@latest add https://www.remocn.dev/r/smoke-dissolve.json A grain-gradient wave that sweeps up across the frame, covering the outgoing scene and revealing the next one from below.
npx shadcn@latest add https://www.remocn.dev/r/wave-wipe.json A grain-gradient ripple transition that flies the camera through the center of the rings while the next scene approaches from the depth.
npx shadcn@latest add https://www.remocn.dev/r/ripple-zoom.json Bars fly in Tetris-style, land as a row, and melt into a word through a gooey blur-and-threshold morph.
npx shadcn@latest add https://www.remocn.dev/r/gooey-morph.json A grain-gradient shader transition that disintegrates the outgoing scene into soft grainy shapes and condenses the next scene out of the noise.
npx shadcn@latest add https://www.remocn.dev/r/grain-dissolve.json A domain-warp shader transition that melts the outgoing scene into a folding color field and straightens back out into the next.
npx shadcn@latest add https://www.remocn.dev/r/warp-dissolve.json A whip-pan transition that flies both scenes through the frame in one move with velocity-based motion blur.
npx shadcn@latest add https://www.remocn.dev/r/whip-pan.json A dolly transition that blows the outgoing scene past the camera while the next one approaches from the depth.
npx shadcn@latest add https://www.remocn.dev/r/push-through.json A rack-focus transition that defocuses the outgoing scene into a bright blur and resolves the next one into focus.
npx shadcn@latest add https://www.remocn.dev/r/focus-pull.json A depth punch-in transition that pushes the outgoing scene through the viewer while the incoming one resolves out of blur.
npx shadcn@latest add https://www.remocn.dev/r/zoom-blur.json Cycles a word through a list of values with a 3D rolodex card flip while an invisible sizer keeps the line width and baseline stable.
npx shadcn@latest add https://www.remocn.dev/r/rolodex-flip.json Swaps a value in place with a vertical slide — the old value exits up as the new one enters from below while an invisible sizer keeps the width stable.
npx shadcn@latest add https://www.remocn.dev/r/value-swap.json Two-column layout where chat shrinks and preview expands.
npx shadcn@latest add https://www.remocn.dev/r/chat-to-preview-layout.json Line chart whose SVG path draws on from left to right with a leading dot.
npx shadcn@latest add https://www.remocn.dev/r/animated-line-chart.json Bars spring up from the baseline in a staggered cascade.
npx shadcn@latest add https://www.remocn.dev/r/animated-bar-chart.json Terminal window that types out commands and rolls old lines off the top.
npx shadcn@latest add https://www.remocn.dev/r/terminal-simulator.json Camera locked to the typing cursor, dollying across a terminal as a command types at high zoom.
npx shadcn@latest add https://www.remocn.dev/r/terminal-cursor-zoom.json A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal.
npx shadcn@latest add https://www.remocn.dev/r/glass-code-block.json A camera that scans a glass code block top to bottom as it types, then pulls back to a centered hold.
npx shadcn@latest add https://www.remocn.dev/r/glass-code-walk.json A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.
npx shadcn@latest add https://www.remocn.dev/r/perspective-marquee.json Two lines of heavy type endlessly trade height while corner-pinned perspective bends the flat stack into receding planes.
npx shadcn@latest add https://www.remocn.dev/r/perspective-squeeze.json A central logo orbited by integration satellites with pulsing data lines.
npx shadcn@latest add https://www.remocn.dev/r/ecosystem-constellation.json Split-screen where typed code on the left snaps a live UI preview on the right, HMR-style.
npx shadcn@latest add https://www.remocn.dev/r/live-code-compilation.json A camera diagonally drifts across an oversized bento grid behind a soft vignette.
npx shadcn@latest add https://www.remocn.dev/r/infinite-bento-pan.json Self-drawing Sponsors heart that docks to a header, every sponsor avatar blur-staggering into a grid, then a thank-you headline and a CTA. Single seek-safe tim…
npx shadcn@latest add https://www.remocn.dev/r/github-sponsors.json Inertial fly-through of a repo's stargazers with a synced count-up odometer that locks on the total. Horizontal 16:9 or vertical 9:16.
npx shadcn@latest add https://www.remocn.dev/r/github-stars.json Mechanical odometer that rolls an integer up or down to its target, direction inferred from the values.
npx shadcn@latest add https://www.remocn.dev/r/number-wheel.json Odometer where every place rolls at its own speed, new places rising into view, settling exactly on the target value.
npx shadcn@latest add https://www.remocn.dev/r/rolling-number.json Animated X profile follow card — spring bounce-in, staggered blur-in, a synthetic cursor that clicks Follow and flips it to Following. Light/dark, horizontal o…
npx shadcn@latest add https://www.remocn.dev/r/x-follow-card.json X follow notifications cycle through as 3D flipping text — '<name> followed you · 7h' — then the total follower count pops in with a confetti burst. Hardcoded …
npx shadcn@latest add https://www.remocn.dev/r/x-followers-overview.json Animated Claude chat input — types a prompt character-by-character and the waveform button morphs into a terracotta send button the moment text appears. Warm l…
npx shadcn@latest add https://www.remocn.dev/r/claude-chat.json Animated ChatGPT composer — types a prompt into the pill input, the blue voice button morphs into a send button, and the suggestion chips fade out. Light/dark …
npx shadcn@latest add https://www.remocn.dev/r/chat-gpt.json Animated Vercel v0 composer — types a prompt into the dark textarea and the mic button morphs into a send button. Dark/light themes.
npx shadcn@latest add https://www.remocn.dev/r/v0.json Animated Claude Code CLI welcome screen — terminal window with a dashed welcome box, recent activity and what's new panels, and a prompt line that types a comm…
npx shadcn@latest add https://www.remocn.dev/r/claude-code.json Animated OpenCode TUI welcome screen — two-tone wordmark, an input box with a blue accent bar that types a query, a model status line, and command hints. Dark/…
npx shadcn@latest add https://www.remocn.dev/r/opencode.json A soft wave travels down through the type; where it crosses, the letters ripple and split into RGB fringes.
npx shadcn@latest add https://www.remocn.dev/r/chromatic-wave.json Sculptural ribbons twist into a tilted ring and sweep outward through contour echoes for an expressive product introduction.
npx shadcn@latest add https://www.remocn.dev/r/radial-burst.json Deterministic confetti burst for Remotion — seeded particles with gravity, spin, and flutter so every render is identical. Fire it on any frame as a celebrator…
npx shadcn@latest add https://www.remocn.dev/r/confetti.json Configurable full-frame background (color / gradient / image / live component) with Screen Studio-style padding and a rounded, shadowed content frame.
npx shadcn@latest add https://www.remocn.dev/r/backdrop.json A slow linear camera push-in wrapper that scales its scene from 1 to 1+grow across the sequence so no frame is ever static.
npx shadcn@latest add https://www.remocn.dev/r/drift.json Place a screenshot, recording, or long page on a perspective studio plane and direct an integrated camera across it with timeline keyframes.
npx shadcn@latest add https://www.remocn.dev/r/stage.json A stacked group of round brand chips that spring in one-by-one, then hold. Swap the logos to feature any set of marks. Horizontal or vertical stacking.
npx shadcn@latest add https://www.remocn.dev/r/logo-enter.json Handwritten text laid down letter by letter on a quantized stop-motion clock, each glyph keeping its own slant and baseline wobble.
npx shadcn@latest add https://www.remocn.dev/r/handwrite.json A hand-dragged brush underline that sweeps itself across in a few stop-motion poses, thinning to a dry tail.
npx shadcn@latest add https://www.remocn.dev/r/ink-underline.json Per-pose reshoot jitter that makes any content feel hand-placed on a desk.
npx shadcn@latest add https://www.remocn.dev/r/paper-wobble.json A hand-drawn brush arrow that sweeps itself from one point to another, thickening into the head that pops on the final poses.
npx shadcn@latest add https://www.remocn.dev/r/ink-arrow.json A taped paper chip that slaps onto the scene over two stop-motion poses, keeping a hand-placed tilt and per-pose wobble.
npx shadcn@latest add https://www.remocn.dev/r/paper-sticker.json An instant-photo frame with a handwritten caption for video, images, or live compositions.
npx shadcn@latest add https://www.remocn.dev/r/polaroid.json A number that counts up in stop-motion poses, rewritten by hand at every pose and freezing still once it lands.
npx shadcn@latest add https://www.remocn.dev/r/hand-count.json Variable-width brush ribbons for Remotion. Pressure taper, grain displacement, and spine samplers shared by the ink marks.
npx shadcn@latest add https://www.remocn.dev/r/brush.json Crushes an element into a ball of paper and throws it out of frame on an arc, leaving the scene around it running.
npx shadcn@latest add https://www.remocn.dev/r/crumple-toss.json A brush circle swept around a region of the frame, opening thin and closing thick, with grain breaking up the dry opening.
npx shadcn@latest add https://www.remocn.dev/r/scribble-circle.json A handwritten checklist that writes itself out in full, then ticks and strikes through every done item, one at a time.
npx shadcn@latest add https://www.remocn.dev/r/check-list.json The exiting scene swings up and away like a notebook page in stop-motion poses, staying above the scene it reveals.
npx shadcn@latest add https://www.remocn.dev/r/page-turn.json Quantized stop-motion clock for Remotion. Stepped frames, stepped springs, deterministic hashing, and per-pose paper jitter.
npx shadcn@latest add https://www.remocn.dev/r/stop-motion.json Dissolve one scene into the next through a drifting field of ASCII glyphs.
npx shadcn@latest add https://www.remocn.dev/r/ascii-dissolve.json Sweep a typing caret across the frame, wiping the outgoing scene into the next.
npx shadcn@latest add https://www.remocn.dev/r/caret-wipe.json Scatter a field of icons over the cut, hiding the scene swap at the field's peak.
npx shadcn@latest add https://www.remocn.dev/r/icon-scatter.json A field of refracted light — the bright filaments light makes through a rippling surface.
npx shadcn@latest add https://www.remocn.dev/r/shader-caustics.json Paper's Gem Smoke shader driven by the frame — smoke flowing behind and inside a glassy logo.
npx shadcn@latest add https://www.remocn.dev/r/shader-gem-smoke.json Fine horizontal sediment layers displaced by fbm noise, each drifting at its own depth.
npx shadcn@latest add https://www.remocn.dev/r/shader-strata.json A woven substrate of warp and weft threads crossing on a domain-warped grid, with a travelling sheen.
npx shadcn@latest add https://www.remocn.dev/r/shader-weave.json A fixed centered card where images stack on the z-axis and each blooms open over the last via a centre-out mask.
npx shadcn@latest add https://www.remocn.dev/r/reel.json The motion vocabulary scene content is built from: an exponential travel curve, a separate opacity ramp, three spring easings, and a compressing stagger.
npx shadcn@latest add https://www.remocn.dev/r/scene-motion.json A scene sequencer where the outgoing content is shoved off on an accelerating curve and the next springs in from the opposite edge, on one canvas, with no over…
npx shadcn@latest add https://www.remocn.dev/r/slide-swap.json A scene sequencer where the outgoing scene shrinks away as one group, the stage holds empty for a beat, and the next scene's items land staggered from above-1 …
npx shadcn@latest add https://www.remocn.dev/r/spring-settle.json The html-in-canvas scaffolding the canvas transitions and scene filters share: support detection, a full-screen WebGL2 shader fed either both sides of a cut or…
npx shadcn@latest add https://www.remocn.dev/r/canvas-presentation.json The outgoing frame catches fire where it is brightest, boils in the heat, chars at the rim, and blows away as sparks carrying its own colour.
npx shadcn@latest add https://www.remocn.dev/r/ember-burn.json The frame breaks into a grid of cells that shear apart into offset, colour-fringed tiles under film grain, then settle back carrying the next scene.
npx shadcn@latest add https://www.remocn.dev/r/displacement.json Play a scene as a projection: a ghost double shimmers off the image, emission lines structure it, and only what is bright enough carries through the dark volum…
npx shadcn@latest add https://www.remocn.dev/r/hologram.json Run a scene through a cheap recorder: macroblocks flatten under a starved bitrate, colour resolution collapses to half the luma, blacks crush and shadows crawl…
npx shadcn@latest add https://www.remocn.dev/r/security-cam.json End a scene the way a tube does: the picture collapses into a glowing horizontal line, the line pinches to a phosphor dot, the dot decays, and the frame is lef…
npx shadcn@latest add https://www.remocn.dev/r/tv-power-off.json Put a scene behind real glass: resolution falls off toward the corners, highlights bloom through the optics, colour fringes at the edges — a screencast that re…
npx shadcn@latest add https://www.remocn.dev/r/camera-lens.json Hold a scene under moving water: every pixel is read through a layered refraction field that closes on a whole number of cycles, with colour fringing where the…
npx shadcn@latest add https://www.remocn.dev/r/underwater-ripple.json Print a scene onto paper: each colour separates onto its own rotated screen of dots sized by the ink under them, slightly out of register the way a real press …
npx shadcn@latest add https://www.remocn.dev/r/halftone-print.json Redraw a live scene as ASCII: the frame divides into glyph cells and each one becomes the character matching the brightness of the picture inside it.
npx shadcn@latest add https://www.remocn.dev/r/ascii-render.json Cover rectangles of a scene with an opaque mosaic while the rest passes through untouched — redact keys, addresses and personal data before a demo goes out.
npx shadcn@latest add https://www.remocn.dev/r/pixelate-region.json Broadcast corruption held over a scene in scheduled bursts: slices tear sideways, channels split, and blocks fill with picture pulled from somewhere else — the…
npx shadcn@latest add https://www.remocn.dev/r/sustained-glitch.json Put a scene behind curved glass: the picture bulges out to the corners, an RGB phosphor mask and scanlines ride the curve, bright areas flood the mask, and the…
npx shadcn@latest add https://www.remocn.dev/r/crt-screen.json Hold a scene under analog tape: chroma bleeds sideways off every edge, rows wobble out of line, the bottom of the frame tears on the head switch, and luma nois…
npx shadcn@latest add https://www.remocn.dev/r/vhs-filter.json A wave travels across the frame raising the picture into a grid of solid blocks with lit tops and shaded sides, which set back down carrying the next scene.
npx shadcn@latest add https://www.remocn.dev/r/grid-wave.json The frame is ground into drifting grey dust whose specks carry real fragments of the picture, and the next scene coalesces back out of the same dust.
npx shadcn@latest add https://www.remocn.dev/r/particle-dissolve.json A broadcast-glitch hard cut: the frame tears into displaced slices with channel split and corrupted blocks, and the incoming scene takes over slice by slice at…
npx shadcn@latest add https://www.remocn.dev/r/glitch-cut.json Expanding construction circles snap into a search pill, type editable text, and reveal an abstract graphic panel.
npx shadcn@latest add https://www.remocn.dev/r/search-reveal.json A rounded triangular cursor tugs a button out of the screen edge with pulsed elastic resistance.
npx shadcn@latest add https://www.remocn.dev/r/cursor-gravity.json A readable word carries layers of fine contours, revises itself, then compresses into a clean typographic imprint.
npx shadcn@latest add https://www.remocn.dev/r/type-fossil.json Dissolve a stationary OpenShaders material to uncover the next scene.
npx shadcn@latest add https://www.remocn.dev/r/shader-seam.json Reveal words through the original OpenShaders hero shader, then settle into white type.
npx shadcn@latest add https://www.remocn.dev/r/shader-text-reveal.json Roll through words beside a fixed prefix with accelerating timing and smoothly centered width.
npx shadcn@latest add https://www.remocn.dev/r/inline-word-roll.json Fly straight through a tunnel made from the original OpenShaders hero shader.
npx shadcn@latest add https://www.remocn.dev/r/shader-light-tunnel.json Accelerate into the hero spiral and emerge through its soft center into the next scene.
npx shadcn@latest add https://www.remocn.dev/r/shader-spiral-pass.json Shared timeline-fold hook, theme context, and color math for remocn UI primitives.
npx shadcn@latest add https://www.remocn.dev/r/remocn-ui.json A deterministic spinning arc that loops on the Remotion frame — a pure motion atom with no state.
npx shadcn@latest add https://www.remocn.dev/r/spinner.json A blinking text caret — a controlled vertical bar, or a pure motion atom that blinks deterministically from useCurrentFrame.
npx shadcn@latest add https://www.remocn.dev/r/caret.json A button whose idle/hover/press/loading/success state is a pure function of the timeline; the loading state composes the Spinner motion atom.
npx shadcn@latest add https://www.remocn.dev/r/button.json A disclosure whose opened/closed state is a pure function of the timeline; the panel reveal, chevron, and background are keyframed presets.
npx shadcn@latest add https://www.remocn.dev/r/accordion.json A modal alert dialog whose opened/closed state is a pure function of the timeline; the backdrop dim and popup zoom are keyframed presets. Self-contained — pair…
npx shadcn@latest add https://www.remocn.dev/r/alert-dialog.json A modal dialog whose opened/closed state is a pure function of the timeline; the backdrop dim and popup zoom are keyframed presets, with a close button and a p…
npx shadcn@latest add https://www.remocn.dev/r/dialog.json A side panel whose opened/closed state is a pure function of the timeline; the backdrop dim and right-edge slide-in are keyframed presets, with a close button …
npx shadcn@latest add https://www.remocn.dev/r/sheet.json A bottom panel whose opened/closed state is a pure function of the timeline; the backdrop dim and bottom-edge slide-up are keyframed presets, with a drag handl…
npx shadcn@latest add https://www.remocn.dev/r/drawer.json A checkbox whose checked/unchecked state is a pure function of the timeline; the box fill, border, and checkmark draw are keyframed presets.
npx shadcn@latest add https://www.remocn.dev/r/checkbox.json A radio whose checked/unchecked state is a pure function of the timeline; the ring border and inner dot pop are keyframed presets.
npx shadcn@latest add https://www.remocn.dev/r/radio.json A switch whose checked/unchecked state is a pure function of the timeline; the track fill and sliding thumb are keyframed presets.
npx shadcn@latest add https://www.remocn.dev/r/switch.json A text input whose idle/hover/active/typing/invalid state is a pure function of the timeline; the focus ring, border, caret, and value reveal are keyframed pre…
npx shadcn@latest add https://www.remocn.dev/r/input.json A wrapper that reveals a single child with blur + opacity + a directional offset; a pure state atom, theme-independent — its context is a motion config (blur/d…
npx shadcn@latest add https://www.remocn.dev/r/blur-in.json A static layout family for composing labeled form controls, modeled on shadcn's Field: FieldGroup ▸ Field ▸ FieldLabel / FieldControl / FieldDescription. Reads…
npx shadcn@latest add https://www.remocn.dev/r/field.json A select option row whose idle/hover/press/selected state is a pure function of the timeline; the row background, label color, and check icon are keyframed pre…
npx shadcn@latest add https://www.remocn.dev/r/select-item.json A select whose opened/closed state is a pure function of the timeline; the trigger reuses the Button primitive and the reveal panel composes SelectItem rows. T…
npx shadcn@latest add https://www.remocn.dev/r/select.json A vertical option list where exactly one row is highlighted; the highlight bar and left accent slide smoothly between rows. Fully controlled via selectedIndex/…
npx shadcn@latest add https://www.remocn.dev/r/select-menu.json A dropdown menu action row whose idle/hover/press state is a pure function of the timeline; the row background and label color are keyframed presets. Composed …
npx shadcn@latest add https://www.remocn.dev/r/dropdown-menu-item.json A tabs widget whose active-tab state is a pure function of the timeline; the sliding indicator, label colors, and panel crossfade are keyframed/derived presets.
npx shadcn@latest add https://www.remocn.dev/r/tabs.json A dropdown menu whose opened/closed state is a pure function of the timeline; the trigger reuses the Button primitive and the reveal panel composes DropdownMen…
npx shadcn@latest add https://www.remocn.dev/r/dropdown-menu.json An animated cursor that moves between waypoints, clicks (ripple), and drags. The Cursor renderer is a pure function of a numeric CursorStyle channel; useCursor…
npx shadcn@latest add https://www.remocn.dev/r/cursor.json A toast notification whose hidden/visible state is a pure function of the timeline. The Toast renderer is a pure function of a ToastStyle (opacity, translateY,…
npx shadcn@latest add https://www.remocn.dev/r/toast.json A command-palette row whose idle/hover/press/selected state is a pure function of the timeline. Leading icon + label + trailing shortcut kbd. Exports an inline…
npx shadcn@latest add https://www.remocn.dev/r/command-menu-item.json A ⌘K command palette whose opened/closed state is a pure function of the timeline; the panel zoom + backdrop dim are dialog-like keyframed presets. The search …
npx shadcn@latest add https://www.remocn.dev/r/command-menu.json A tooltip whose hidden/visible state is a pure function of the timeline. The Tooltip renderer is a pure function of a TooltipStyle (opacity, scale, translate);…
npx shadcn@latest add https://www.remocn.dev/r/tooltip.json A progress bar whose fill is a pure function of a numeric value channel (value-channel deviation). The Progress renderer takes a clamped 0–100 value; useProgre…
npx shadcn@latest add https://www.remocn.dev/r/progress.json A shimmer placeholder block — a motion atom (spinner pattern). A directional highlight gradient sweeps across deterministically from useCurrentFrame() and loop…
npx shadcn@latest add https://www.remocn.dev/r/skeleton-block.json A skeleton→content crossfade whose loading/loaded state is a pure function of the timeline. The Skeleton renderer is pure (reads no frame); only the composed S…
npx shadcn@latest add https://www.remocn.dev/r/skeleton.json A slider whose fill is a numeric value channel plus a thumb idle/hover/press channel (dual-channel value-channel deviation). The Slider renderer is pure (clamp…
npx shadcn@latest add https://www.remocn.dev/r/slider.json A combobox whose opened/closed state is a pure function of the timeline; the panel fade/scale/lift are keyframed presets like select. The trigger reuses the In…
npx shadcn@latest add https://www.remocn.dev/r/combobox.json A popover/hover-card whose opened/closed state is a pure function of the timeline. The Popover renderer is a pure function of a PopoverStyle (opacity, scale, t…
npx shadcn@latest add https://www.remocn.dev/r/popover.json A right-click context menu whose opened/closed state is a pure function of the timeline; the panel scales from its top-left corner (the click point) with a fad…
npx shadcn@latest add https://www.remocn.dev/r/context-menu.json A segmented control whose active value is a pure function of the timeline; a raised thumb SLIDES between segments (position + width derived from a float indica…
npx shadcn@latest add https://www.remocn.dev/r/toggle-group.json A horizontal onboarding stepper whose progress is a pure function of a continuous step index (value-channel deviation). Every circle (fill, number, stroke-dash…
npx shadcn@latest add https://www.remocn.dev/r/stepper.json Two panels split by a draggable handle, where the split ratio is a numeric channel plus a handle idle/hover/press channel (dual-channel value-channel deviation…
npx shadcn@latest add https://www.remocn.dev/r/resizable.json A signup card composition: a real shadcn-style card (header, labeled Full Name / Email / Password / Confirm fields, primary + Google-outline buttons, sign-in f…
npx shadcn@latest add https://www.remocn.dev/r/signup-flow.json An AI prompt composition: a prompt types into the field, the Generate button runs hover → press → loading, a skeleton shimmer reveals, then crossfades into the…
npx shadcn@latest add https://www.remocn.dev/r/ai-prompt-flow.json A cursor-driven checkout card: the card and its fields blur-in, then the pointer flips a billing-cycle toggle, types a card number, ticks the terms checkbox, a…
npx shadcn@latest add https://www.remocn.dev/r/checkout-flow.json A multi-step onboarding composition: a horizontal stepper advances through panels of input, radio, and switch fields, finishing on a Finish button that runs to…
npx shadcn@latest add https://www.remocn.dev/r/onboarding-stepper-flow.json A two-column settings card: the card and its controls blur-in, then the cursor flips a switch, opens a select, drags a labeled slider, and clicks Save, ending …
npx shadcn@latest add https://www.remocn.dev/r/settings-toggle-flow.json A chat message bubble whose hidden/visible state is a pure function of the timeline. The renderer is a pure function of a MessageBubbleStyle (opacity, translat…
npx shadcn@latest add https://www.remocn.dev/r/message-bubble.json A continuous typing animation: N dots bounce with a staggered sine wave. A motion atom — it reads the frame and takes color, size, gap, and speed props, defaul…
npx shadcn@latest add https://www.remocn.dev/r/typing-indicator.json A messaging composition: an outgoing message types into the composer, the send button presses, and the bubble rises in; the other side shows a typing indicator…
npx shadcn@latest add https://www.remocn.dev/r/chat-flow.json A Telegram-styled messaging composition: tailed bubbles (white incoming, blue outgoing) with in-bubble timestamps and delivery checks, a header that flips to '…
npx shadcn@latest add https://www.remocn.dev/r/telegram-chat-flow.json An iMessage-styled messaging composition: gray incoming and blue outgoing bubbles with tails, an in-thread typing bubble with dots, a Delivered label, and tapb…
npx shadcn@latest add https://www.remocn.dev/r/imessage-chat-flow.json Shared animation contract, pure frame-to-phase timeline, and SVG path-draw helpers for remocn icons.
npx shadcn@latest add https://www.remocn.dev/r/icons-core.json Animated Lucide check icon — the stroke draws on, then stamps with a spring pop to mark a step, task, or claim as done.
npx shadcn@latest add https://www.remocn.dev/r/icon-check.json Animated Lucide circle-check icon — the ring draws clockwise, the checkmark traces in, then the whole mark pops to confirm a completed or successful state.
npx shadcn@latest add https://www.remocn.dev/r/icon-check-circle.json Animated Lucide x icon — the two diagonals draw in crosswise, then the mark shakes to punctuate an error, removal, or dismissal.
npx shadcn@latest add https://www.remocn.dev/r/icon-x.json Animated Lucide activity icon — the pulse line sweeps through like an EKG, popping at the peak. Loops by default.
npx shadcn@latest add https://www.remocn.dev/r/icon-activity.json Animated Lucide triangle-alert icon — the outline draws on, the mark pops in, then the exclamation blinks to flag a risk or warning.
npx shadcn@latest add https://www.remocn.dev/r/icon-alert-triangle.json Animated Lucide info icon — the ring draws clockwise, the dot pops and stem draws in, then the dot bobs to draw a gentle, neutral note.
npx shadcn@latest add https://www.remocn.dev/r/icon-info.json Animated Lucide loader-circle icon — the arc draws on, then spins continuously for a loading or processing beat. Loops by default.
npx shadcn@latest add https://www.remocn.dev/r/icon-loader.json Animated Lucide refresh-cw icon — the two arcs draw on, arrowheads pop, then the whole mark spins in cycles for sync, retry, or up-to-date messaging. Loops by …
npx shadcn@latest add https://www.remocn.dev/r/icon-refresh-cw.json Animated Lucide search icon — the lens draws on, the handle extends, then the magnifier sweeps a small scanning path for a search or discovery beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-search.json Animated Lucide bell icon — the body draws on, the clapper follows, then the bell swings from its mount to signal a notification or alert.
npx shadcn@latest add https://www.remocn.dev/r/icon-bell.json Animated Lucide download icon — the tray draws on, the arrow fades in, then drops into the tray with a squash on impact for a download or export beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-download.json Animated Lucide upload icon — the tray draws on, the arrow fades in, then launches upward with a spring for an upload, publish, or submission beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-upload.json Animated Lucide copy icon — the two sheets draw back-to-front, then the front sheet lifts and settles to read as a duplicate for a copy-to-clipboard beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-copy.json Animated Lucide settings icon — the gear and center draw on, then the gear turns exactly one tooth for a settings, configuration, or customization beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-settings.json Animated Lucide trash-2 icon — the can draws on, then the lid flips open and the contents vanish for a delete or cleanup beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-trash.json Animated Lucide plus icon — the two strokes draw on, then the mark twirls 90deg with a scale pop for an energetic add or create beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-plus.json Animated Lucide send icon — the paper plane draws on, then darts forward with a wind-up and settles back for a send-message beat.
npx shadcn@latest add https://www.remocn.dev/r/icon-send.json Animated Lucide heart icon — the outline draws on, then a lub-dub heartbeat pulse for likes, favorites, or built-with-love moments.
npx shadcn@latest add https://www.remocn.dev/r/icon-heart.json Animated Lucide star icon — the outline draws on, then twinkles into place with a small rotate and scale pop for ratings, favorites, or star callouts.
npx shadcn@latest add https://www.remocn.dev/r/icon-star.json Animated Lucide thumbs-up icon — the hand draws on, then springs up with an approving stamp for positive reviews, approvals, or social-proof beats.
npx shadcn@latest add https://www.remocn.dev/r/icon-thumbs-up.json Animated Lucide party-popper icon — the cone draws on, then confetti bursts outward as the cone recoils for launch, milestone, or celebration finales.
npx shadcn@latest add https://www.remocn.dev/r/icon-party-popper.json Animated Lucide arrow-right icon — the shaft and head draw on, then the arrow nudges forward for CTAs, next-step pointers, or flow direction.
npx shadcn@latest add https://www.remocn.dev/r/icon-arrow-right.json Animated Lucide arrow-left icon — the shaft and head draw on, then the arrow nudges back for back navigation or 'previously' callbacks.
npx shadcn@latest add https://www.remocn.dev/r/icon-arrow-left.json Animated Lucide arrow-up icon — the shaft and head draw on, then the arrow nudges up for growth, improvement, or upward-trend beats.
npx shadcn@latest add https://www.remocn.dev/r/icon-arrow-up.json Animated Lucide arrow-down icon — the shaft and head draw on, then the arrow nudges down for cost/latency reduction beats or scroll cues.
npx shadcn@latest add https://www.remocn.dev/r/icon-arrow-down.json Animated Lucide external-link icon — the box and arrow draw on, then the arrow darts out toward the top-right for 'view on GitHub', external docs, or open-in-n…
npx shadcn@latest add https://www.remocn.dev/r/icon-external-link.json Animated Lucide play icon — the triangle draws on, then presses in and springs forward like a play button being hit.
npx shadcn@latest add https://www.remocn.dev/r/icon-play.json Animated Lucide pause icon — the two bars draw on, then pinch toward each other and settle like a held breath.
npx shadcn@latest add https://www.remocn.dev/r/icon-pause.json Animated Lucide skip-forward icon — draws on, then dashes forward past center and snaps against its end bar.
npx shadcn@latest add https://www.remocn.dev/r/icon-skip-forward.json Animated Lucide volume-2 icon — the speaker draws on, then the two sound waves ripple outward one after the other.
npx shadcn@latest add https://www.remocn.dev/r/icon-volume-2.json Animated Lucide volume-x icon — the speaker draws on, then the X slashes in and the glyph shakes off the sound.
npx shadcn@latest add https://www.remocn.dev/r/icon-volume-x.json Animated Lucide mic icon — draws on, then the capsule bounces twice like a level meter picking up voice.
npx shadcn@latest add https://www.remocn.dev/r/icon-mic.json Animated Lucide video icon — draws on, then the lens wedge pans out and snaps back to its shot.
npx shadcn@latest add https://www.remocn.dev/r/icon-video.json Animated Lucide camera icon — draws on, then the lens blinks shut and open like a shutter firing.
npx shadcn@latest add https://www.remocn.dev/r/icon-camera.json Animated Lucide image icon — the frame draws on, then the mountain redraws and the sun drifts into place like a photo developing.
npx shadcn@latest add https://www.remocn.dev/r/icon-image.json Animated Lucide chevron-up icon — draws on, then nudges upward with a fading echo.
npx shadcn@latest add https://www.remocn.dev/r/icon-chevron-up.json Animated Lucide chevron-down icon — draws on, then nudges downward with a fading echo.
npx shadcn@latest add https://www.remocn.dev/r/icon-chevron-down.json Animated Lucide chevron-left icon — draws on, then nudges left with a fading echo.
npx shadcn@latest add https://www.remocn.dev/r/icon-chevron-left.json Animated Lucide chevron-right icon — draws on, then nudges right with a fading echo.
npx shadcn@latest add https://www.remocn.dev/r/icon-chevron-right.json Animated Lucide menu icon — the three bars slide in from the left, top to bottom, each overshooting into place.
npx shadcn@latest add https://www.remocn.dev/r/icon-menu.json Animated Lucide more-horizontal icon — three dots pop in, then do a left-to-right thinking wave.
npx shadcn@latest add https://www.remocn.dev/r/icon-more-horizontal.json Animated Lucide maximize icon — four corner brackets draw on, then fly outward and spring back like a window going fullscreen.
npx shadcn@latest add https://www.remocn.dev/r/icon-maximize.json