sh4dcnv2 · atlas
← libraries

@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.

60 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://www.remocn.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://www.remocn.dev/r/registry.json
bun bunx shadcn@latest add https://www.remocn.dev/r/registry.json
fetch registry curl -s https://www.remocn.dev/r/registry.json

Components

60 total
Soft Blur In component

Per-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
Per Character Rise component

Letters slide up from below with no blur — crisp, deliberate, kinetic.

npx shadcn@latest add https://www.remocn.dev/r/per-character-rise.json
Bottom-Up Letters component

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
Top-Down Letters component

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
Spring Scale In component

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
Micro Scale Fade component

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
Scale Down Fade component

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
Blur Out Up component

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
Focus Blur Resolve component

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
Line-by-Line Slide component

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
Per-Word Crossfade component

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
Fade Through component

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
Shared Axis Y component

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
Shared Axis Z component

Scale-based shared-axis transition for focus shifts and context depth.

npx shadcn@latest add https://www.remocn.dev/r/shared-axis-z.json
Short Slide Right component

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
Kinetic Center Build component

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
Short Slide Down component

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
Typewriter component

Character-by-character text reveal with a deterministic blinking cursor.

npx shadcn@latest add https://www.remocn.dev/r/typewriter.json
Inline Highlight component

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
Strikethrough Replace component

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
Staggered Fade Up component

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
Mask Reveal Up component

Lines reveal upward with a soft masked feel and compact stagger.

npx shadcn@latest add https://www.remocn.dev/r/mask-reveal-up.json
Tracking In component

Letter-spacing collapses and blur clears with a springy motion.

npx shadcn@latest add https://www.remocn.dev/r/tracking-in.json
Shimmer Sweep component

Light shine sweeps across muted text via background-clip:text.

npx shadcn@latest add https://www.remocn.dev/r/shimmer-sweep.json
Marker Highlight component

Colored marker block draws behind a phrase as the text color shifts.

npx shadcn@latest add https://www.remocn.dev/r/marker-highlight.json
Slot Machine Roll component

Vertical reel scrolls characters from one value to another.

npx shadcn@latest add https://www.remocn.dev/r/slot-machine-roll.json
Matrix Decode component

Random scramble resolves left-to-right into the target text.

npx shadcn@latest add https://www.remocn.dev/r/matrix-decode.json
RGB Glitch Text component

Three RGB-offset text copies jitter for a brief glitch window.

npx shadcn@latest add https://www.remocn.dev/r/rgb-glitch-text.json
Infinite Marquee component

Seamlessly looping horizontal text strip with optional stroke style.

npx shadcn@latest add https://www.remocn.dev/r/infinite-marquee.json
Mesh Gradient Background component

Living gradient with amorphous color blobs slowly drifting across the frame.

npx shadcn@latest add https://www.remocn.dev/r/mesh-gradient-bg.json
Shader Mesh Gradient component

WebGL mesh gradient backdrop driven per-frame for deterministic Remotion renders.

npx shadcn@latest add https://www.remocn.dev/r/shader-mesh-gradient.json
Shader Grain Gradient component

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
Shader Warp component

Domain-warped color field that folds and stretches like liquid.

npx shadcn@latest add https://www.remocn.dev/r/shader-warp.json
Shader Swirl component

Concentric bands swirling around a center point.

npx shadcn@latest add https://www.remocn.dev/r/shader-swirl.json
Shader Water component

Caustic water-surface ripples with subtle refraction.

npx shadcn@latest add https://www.remocn.dev/r/shader-water.json
Shader Spiral component

Rotating spiral arms radiating from the center.

npx shadcn@latest add https://www.remocn.dev/r/shader-spiral.json
Shader Liquid Metal component

Molten metallic surface with flowing specular highlights.

npx shadcn@latest add https://www.remocn.dev/r/shader-liquid-metal.json
Shader Color Panels component

Overlapping translucent color panels sliding past each other.

npx shadcn@latest add https://www.remocn.dev/r/shader-color-panels.json
Shader Neuro Noise component

Organic neural-web noise field that slowly morphs.

npx shadcn@latest add https://www.remocn.dev/r/shader-neuro-noise.json
Shader Perlin Noise component

Classic Perlin noise clouds drifting across the frame.

npx shadcn@latest add https://www.remocn.dev/r/shader-perlin-noise.json
Shader Simplex Noise component

Simplex noise flow field, smoother than Perlin.

npx shadcn@latest add https://www.remocn.dev/r/shader-simplex-noise.json
Shader Voronoi component

Animated Voronoi cells shifting and re-tessellating.

npx shadcn@latest add https://www.remocn.dev/r/shader-voronoi.json
Shader Dot Orbit component

Dots orbiting on concentric paths across the frame.

npx shadcn@latest add https://www.remocn.dev/r/shader-dot-orbit.json
Shader Dithering component

Ordered-dither shading over an animated gradient field.

npx shadcn@latest add https://www.remocn.dev/r/shader-dithering.json
Shader God Rays component

Volumetric light rays radiating from an off-screen source.

npx shadcn@latest add https://www.remocn.dev/r/shader-god-rays.json
Shader Smoke Ring component

Soft smoke ring curling and dissipating in place.

npx shadcn@latest add https://www.remocn.dev/r/shader-smoke-ring.json
Shader Metaballs component

Organic blobs merging and splitting like lava.

npx shadcn@latest add https://www.remocn.dev/r/shader-metaballs.json
Shader Pulsing Border component

Glowing border frame that pulses around the edges.

npx shadcn@latest add https://www.remocn.dev/r/shader-pulsing-border.json
Dynamic Grid component

Subtle moving grid background with configurable cell size and direction.

npx shadcn@latest add https://www.remocn.dev/r/dynamic-grid.json
Simulated Cursor component

Animated mouse cursor moving between waypoints with click ripple feedback.

npx shadcn@latest add https://www.remocn.dev/r/simulated-cursor.json
Swirl Dissolve component

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
Dither Dissolve component

A dithering shader transition that dissolves one scene into the next.

npx shadcn@latest add https://www.remocn.dev/r/dither-dissolve.json
Perlin Dissolve component

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
Smoke Dissolve component

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
Wave Wipe component

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
Ripple Zoom component

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
Grain Dissolve component

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
Warp Dissolve component

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
Whip Pan component

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
Push Through component

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