Remotion component registry

Choose a production-ready component, watch its live preview, inspect the contract, and install editable TypeScript source.

• Animated Captions

  Frame-synchronized captions using Remotion caption objects with karaoke, boxed, and minimal word-highlighting presets.

• Animated Counter

  A clean transparent metric counter with responsive typography sized from its component box.

• Animated Route Map

  A deterministic dotted globe with geographic routes, moving travel markers, and optional location labels.

• Architecture Diagram

  A responsive system map with positioned services, labeled connections, and deterministic request pulses for technical explainers.

• Area Chart

  An adaptive animated area chart for continuous trends, cumulative metrics, and contextual growth stories.

• Bar Chart

  An adaptive animated bar chart for ranked metrics and categorical comparisons.

• Before / After

  A deterministic before-and-after comparison that reveals the result from left to right with adjustable timing, labels, and placeholders.

• Blur Focus List

  A transparent split typography scene with a fixed lead-in and a sequential list moving between soft blur and crisp focus.

• Browser Spotlight

  A polished Chrome or Safari frame that accepts any React content as the page body.

• Chat Conversation

  A polished app-style message thread with grouped consecutive messages, adjustable timing, WhatsApp bubbles, and image or initials avatars.

• Circle Reveal Transition

  A native Remotion TransitionSeries presentation where the incoming scene expands through a configurable circular mask until it covers every corner.

• Code Editor

  A deterministic code window with line numbers, simple syntax coloring, highlights, and static, typed, or line-by-line reveal modes.

• Constellation Background

  An adaptive background of softly drifting stars that form and dissolve constellation lines only while they remain within a configurable pixel distance.

• CTA Card

  A transparent conversion-ready CTA with a large bright headline, supporting copy, and a focused action label with an optional URL.

• Cursor Tour

  A reusable cursor walkthrough overlay with constant-speed waypoint motion, click pulses, an optional moving spotlight, and content-derived timing.

• Data Table

  A modern animated data table driven by independent column definitions and row objects, with configurable alignment, widths, and badge cells.

• Device Mockup

  A responsive phone, tablet, or laptop frame that accepts editable HTML or React content for polished product demos.

• Donut Chart

  A large, transparent segmented donut chart with an animated sweep, centered total, and optional legend.

• Feature List

  A bold split-layout scene for product benefits, capabilities, and numbered talking points.

• Grid Background

  A seamless full-composition grid system with orthogonal, perspective, dotted, technical, cyber, and minimal visual presets.

• Image Carousel

  An adaptive image carousel with frame-based slide selection, captions, placeholders, and gallery-focused visual presets.

• Logo Reveal

  A polished brand reveal that accepts a real logo image or any React component, with a modern spring entrance and light sweep.

• Mesh Gradient Background

  A seamless full-composition mesh gradient with six palettes, deterministic ambient motion, quality controls, and content-aware visual bias.

• Orbital Background

  A full-composition solid-color background with three to eight translucent accent planets moving along visible circular orbits around a configurable origin.

• Outline Text Echo

  A bold centered word or number that releases a screen-filling grid of matching outline copies around the solid original.

• Perspective View

  A transparent 3D perspective wrapper with seamless ambient camera motion for React interfaces, screenshots, browser mockups, and product UI.

• Product Timeline

  A sequential milestone track for workflows, roadmaps, and multi-step product stories.

• Progress Ring

  A transparent circular progress indicator with constant-speed animation for percentages, scores, completion states, and SaaS metrics.

• Quote Highlight

  A cinematic quotation scene with source attribution and editorial, poster, or understated visual presets.

• Terminal Session

  An animated command-line session that types commands and reveals their outputs for developer demos, CLI launches, and SaaS product stories.

• Testimonial Card

  A polished customer quote card with author, role, company, and preset-driven visual treatments.

• Texture Overlay

  A transparent deterministic texture layer with grain, paper, film, scanline, speckle, and print presets for composited scenes.

• Word Typewriter

  A transparent word-reveal title where each entering word changes accent before attaching to the dynamically centered phrase.