🧩 Resource Library

Splits the string into an array of chars; each character has a from staggered by index. The result is a reveal from left to right, one letter at a time.

Fundamental stagger pattern — the same logic applies to words, lines, and any list of elements.

interpolate with clamp · stagger by index · Sequence per element.

Uses spring() with high stiffness to give the text entrance that organic "bounce".

Demonstrates how spring replaces manual easing for convincing physical entrances.

spring({ fps, frame }) · stiffness / damping · multiply by scale or translateY.

Three copies of the text with random translateX and separate red/green/blue color channels, interpolated with irregular pulses.

Shows how to layer elements with position absolute and mix-blend-mode for visual effects without an external library.

random("seed") for position · mix-blend-mode · pulse with multi-keyframe interpolate.

Each character oscillates with Math.sin(frame / 10 + i * 0.5), creating an organic wave that moves across the text.

Teaches how to use trigonometry directly in the frame for periodic motion without keyframes.

Math.sin(frame) · phase offset by index · amplitude × sine.

Reveals one character at a time by deriving the number of visible characters from Math.floor(frame / charsPerFrame). The cursor blinks with interpolate.

Classic pattern for animated captions and subtitles, ideal for tutorials and code presentations.

dynamic slice · Math.floor · cursor with pulsing opacity.

Four variations: bubble-pop (scale 0→1.2→1 with spring), pulsing-text (continuous breathing with a sine wave), popping-text (each word with an independent scale-pop), slide-text (translateX/Y with easing out).

Compare how the same intent ("attention-grabbing text") results in completely different code depending on the desired style.

spring for an organic pop · sine for a continuous loop · interpolate+easing for a directional slide.

Each bar has a height calculated with interpolate(frame, [i*3, 15+i*3], [0,1], {extrapolateRight:"clamp"}) — grow in a stagger and stop at the final value.

Canonical stagger model with SVG — a recurring pattern in line, area, and donut charts.

stagger by index · SVG rect height · extrapolateRight clamp.

Uses stroke-dashoffset animated to create the illusion of a line being drawn from left to right.

The dashoffset technique works with any SVG path—curves, arrows, complex shapes.

stroke-dasharray = total length · dashoffset from full length to 0 · getTotalLength().

Slices calculated via path d="M cx cy L x1 y1 A r r 0 flag 1 x2 y2 Z". The donut adds a white circle in the center with an animated metric inside.

Teaches SVG arc geometry — the most commonly used path type in complex charts.

angle by percentage · arc flag · donut hole with circle + metric text.

Interpolates from 0 to the target value and formats with toLocaleString() — displays "1.234.567" counting frame by frame.

A numeric counter is one of the most requested components in marketing and results videos.

interpolate → Math.floor → toLocaleString · ease-out easing · suffix (K, M).

circular-progress uses dashoffset on an SVG circle; progress-bars uses width% with interpolate — both show the percentage of progress.

Two progress paradigms: circular SVG vs. linear HTML — covers 99% of use cases.

circumference = 2πr · proportional dashoffset · width% with transition clamp.

comparison-chart animates two groups side by side with a delay between them; area-chart fills the area beneath the line with a closed path and SVG gradient.

Demonstrates the composition of multiple SVG elements with independent timing in the same video.

delay between groups · SVG linearGradient · closed path (Z) for area.

Each list item enters with from={i * delay} — fade+slide in a staggered sequence that gives visual rhythm to enumerations.

Stagger is the most widely used list animation pattern in any explainer or marketing video.

Sequence with scaled from · delay = index × constant · combined fade+translateY.

Interpolates rotateY from 0° to 180° with perspective in the parent. The card’s two faces are positioned with backfaceVisibility: "hidden".

Teaches the CSS 3D model in Remotion — perspective, backface, and flip — reusable in product flip cards and flashcards.

perspective: 800px · rotateY · backfaceVisibility: hidden · two positioned children.

Derive the current number with Math.ceil(durationInFrames / fps - frame / fps). Each number comes in with a scale-pop and fades out for the next one.

“Frame-derived state” pattern — the displayed value is always a direct function of time, without useState.

Math.ceil(remaining) · local frame per Sequence · spring on each digit's entrance.

Notifications appear with spring (translateY + opacity) at staggered intervals, stacking vertically like system toasts.

Shows how to simulate operating system UIs and real apps in video — great for product demos.

Nested sequence · spring with delay · visual stack with accumulated translateY.

Each particle has a velocity and angle seeded with random() from Remotion—position calculated frame by frame with simple gravity.

Demonstrates deterministic physics simulation: gravity, drag, and rotation using only frame arithmetic.

random(seed) for reproducibility · vx/vy per frame · fade-out opacity at the end.

sound-wave: bars with height = amplitude × Math.sin(frame × freq + i × phase). rotating-carousel: cards positioned with rotateY(i * 360/n) and continuously spinning carousel.

Two perpetual loop cases — a continuous wave and infinite rotation — with no defined start or end on the timeline.

sine with variable frequency · 3D carousel with rotateY per slot · frame % period for looping.

Image grid where each cell enters with scale + fade in an index-based stagger, creating a gallery that assembles progressively on screen.

Stagger pattern applied to a grid layout — directly transferable to any collection of cards or thumbnails.

interpolate with from scaled by index · CSS grid · spring on each cell's entrance.

Slides switch automatically with translateX derived from the current index calculated via Math.floor(frame / slideDuration). Smooth transition with interpolate between slides.

Demonstrates how to derive selection state directly from the frame without useState — a pure, deterministic pattern.

Math.floor(frame/dur) for the active slide · translateX by index · overflow hidden on the container.

Two overlapping images; the second has clipPath: rect(0 X 100% 0) where X is animated with interpolate — creates the “pulling the curtain” effect between before and after.

Teaches animated rectangular clip-path — a technique used in dozens of reveal and wipe effects.

CSS clipPath · interpolate 0→100% · divider line with absolutePosition.

Image starts at scale 1.4 and smoothly zooms out to scale 1.0 while opacity goes from 0 to 1 — creating a cinematic entrance with depth.

Combines two independent interpolates (scale and opacity) on the same style property — a high-impact reveal pattern.

spring for scale · interpolate for opacity · overflow hidden + objectFit cover.

Masonry grid with columns of varying heights; each image enters with translateY + fade at a delay proportional to its column, creating a mosaic that fills in organically.

Shows how to handle variable-height layouts and staggering by column versus linear index.

CSS column-count · delay per column · absolutePosition for dynamic positioning.

A photo in a Polaroid frame drops onto the screen with spring (translateY + slight random rotate) and lands with realistic overshoot. Multiple Polaroids stack up with stagger.

Demonstrates spring with rotation to simulate physical objects falling — a pattern you can use for cards, sticky notes, and stickers.

spring with low damping · random(seed) for initial rotation · box-shadow for depth.

Linear gradient whose angle and color stops are derived from Math.sin(frame/30) — creates a background that breathes and continuously shifts in tone.

Teaches how to interpolate values within CSS strings (such as angle and hsl) using sine for smooth loops.

Math.sin for looping · hsl() with variable hue · interpolated backgroundImage.

Array of stars with seeded position and speed using random(); each frame, the stars move forward, creating a warp-speed effect. Stars that leave the screen reappear at the beginning.

Demonstrates a particle system with reuse (pooling) and continuous motion without useState.

random(seed+i) · position = (basePos + frame×vel) % 1 · scale by depth.

Text columns with random characters falling; each column’s vertical position is derived from the frame with a seeded offset. Green characters with a brighter head.

A classic case of procedural text generation — reuse of seeded random values for deterministic yet visually random results.

random(col+row) for char · posY = (frame×speed + offset) % height · opacity by distance from the head.

Grid of cells where each cell pulses with opacity based on Math.sin, with a phase derived from its distance to the center — creating a radial wave of light.

Shows how to create spatial animations by deriving phase from position — the pattern of a “wave traveling across the grid.”

distance from center as phase offset · Math.sin(frame/20 + dist) · opacity 0.1–1.

SVG path whose control points are calculated with Math.sin at different frequencies — creates an organic, fluid waveform that evolves frame by frame.

A dynamic SVG path is the basis of audio visualizers, waves, and organic shapes. Teaches real-time construction of "d" strings.

dynamic "M ... C ..." path construction · multiple summed frequencies · gradient fill.

Array of SVG shapes (triangles, hexagons, diamonds) with seeded position, size, and rotation. Each shape rotates slowly at an individual angular speed derived from random(i).

Combines seeded randomness with continuous rotation — a reusable decorative background pattern for any visual style.

rotate = frame × random(i) × speed · dynamic SVG polygon · low opacity for a subtle background.

The scene container receives translateX/Y and rotate values from random(frame+"x") e random(frame+"y") multiplied by intensity — creates organic, non-repetitive shaking.

Per-frame noise technique using random as a substitute for Perlin noise — reusable in any handheld camera effect.

random(frame+seed) · intensity multiplier · wrapper div to isolate the shake.

Orange/yellow overlay with a pulsing radialGradient and noise grain simulates analog film burn. The center “burns” with increasing scale until it covers everything.

Demonstrates how to compose multiple layers (noise, gradient, color overlay) via position absolute for texture effects.

animated radialGradient · seeded random grain · mix-blend-mode screen/multiply.

Static image animated with a slow zoom (scale 1→1.1) and diagonal pan (translateX/Y) using interpolate with ease-in-out easing — the classic Ken Burns effect used in documentaries.

Shows how to bring static photos to life using only CSS transforms — a standard technique in professional video editing.

scale 1→1.1 with smooth easing · simultaneous translateX/Y · objectFit cover to avoid edges.

Two black bars (top and bottom) enter from outside and stop at the 2.35:1 cinemascope format — transforms any scene into a cinematic format with interpolate.

Dynamic masking technique with two absolutely positioned divs — the basis for any letterbox, widescreen, or animated aspect ratio effect.

translateY from ±100% to 0 · two absolute elements at the top/bottom · spring for a smooth entrance.

Multiple layers (background, middle, foreground) move at different speeds derived from frame × layer.speed — creates the illusion of 3D depth with 2D elements.

Parallax is the most widely used depth technique in motion design — learn to recreate it with simple speed multipliers.

translateX = frame × speed · layers with z-index · overflow hidden on the stage.

Black overlay with a transparent circular radialGradient in the center that expands with spring — reveals the content underneath as if a spotlight were turned on.

Reveal technique with an animated radial gradient — combines a CSS gradient with a spring-derived variable for dramatic transitions.

radialGradient with animated radius · spring for expansion · pointer-events none on the overlay.

Scene A goes from opacity 1→0 while scene B goes from 0→1 with synchronized interpolate — the simplest and most versatile crossfade of all.

Dissolve is the foundation of the cinematic transition vocabulary — understanding its parameters (duration, curve) is essential for any edit.

two AbsoluteFills · complementary opacity · ease-in-out easing for smoothness.

Scene B is divided into N horizontal bands, each revealed with scaleY from 0→1 in a stagger — creates the effect of venetian blinds opening.

Teaches how to divide a scene into strips and animate each one independently — a pattern you can apply to revealing grids, tables, and panels.

N divs with height=100%/N · scaleY with stagger · overflow hidden per strip.

Circular clip-path (circle()) grows from 0% to 150% from the center, revealing the next scene — an iris transition used in silent films and classic animations.

Introduces an animated circle() clip-path — the simplest form of animated mask, directly transferable to logo and button reveals.

clipPath: circle(R at 50% 50%) · R interpolated 0→150% · spring for organic expansion.

Scene A exits to the left while scene B enters from the right with the same animated translateX — like changing slides in a physical deck.

Directional transitions are the standard navigation pattern in apps and presentations — understanding how to synchronize entry and exit is essential.

translateX: 100%→0 (B) and 0→-100% (A) · overflow hidden on the stage · spring with high damping.

Scene A fades to black in the first half, and scene B emerges from black in the second — creates a dramatic pause between scenes, a common cut pattern in action movies.

Demonstrates how to break a transition into two phases with multi-keyframe interpolate — use for any transition through an intermediate color.

interpolate with 3 keyframes · black AbsoluteFill in the middle · adjustable duration per phase.

Scene A zooms in dramatically (scale 1→5) while scene B emerges from the center with scale 0.2→1 — creates a "diving into" transition with dramatic perspective.

Zoom-through combines two synchronized scales — a much-requested pattern in YouTube and marketing videos that need visual energy.

scale A 1→5 · scale B 0.2→1 · precise timing to make them look connected · overflow hidden.

Title appears with letterboxing, a slow fade-in, and text with increasing tracking (animated letterSpacing) over a dark background — a blockbuster-style intro with multiple synchronized elements.

Composition with 4+ timed elements (bars, background, text, subtitle) using nested Sequences — a professional intro template.

interpolated letterSpacing · Nested Sequence · multiple elements with independent timing.

Countdown from 5→1, with each number in its own Sequence, a spring entrance, and a quick exit. A circular progress line completes when it reaches "GO!"

Combines Sequence with an SVG circular progress indicator — shows how to sync a visual progress element with parallel text content.

Sequence by digit · dashoffset proportional to the frame · spring on each number's entrance.

Credits list with translateY calculated linearly per frame — scrolls up from the bottom to the top at a constant speed, like movie credits.

Demonstrates deterministic scrolling without useState — the position is always -frame × pixelsPerFrame, making the result 100% reproducible.

translateY = -frame × speed · overflow hidden · fade in/out at the edges with a gradient.

Identification bar in the lower third of the screen — name and title revealed with translateX and a colored bar that grows from the left. Enters with spring and exits with fade.

A lower third is the most-used component in any interview, news, or presentation video — learning to build one from scratch is essential.

scaleX 0→1 on the bar · translateX on the text · Sequence for automatic entrance and exit.

End screen with CTA, social media links, and a next-video thumbnail — all elements appear in a spring stagger, assembling the interactive outro.

Composition with multiple CTAs and carefully timed visuals — a professional end card template for YouTube and product videos.

Sequence by CTA element · spring with stagger · useCurrentFrame for the button's pulse loop.

Card with oversized quotation marks, quote text revealed word by word in a stagger, and the author appearing afterward with a fade — creates a reflective pause in the video.

Word-based stagger (split by " ") differs from character-based stagger — shows how to adapt the pattern to a different level of granularity.

split(" ") · Sequence per word with scaled from · decorative quotation marks with a CSS pseudo-element.

Logo SVG with stroke-dashoffset animated from the total length to 0 — creates the illusion of the stroke being progressively drawn. Fill appears after the stroke completes.

The dashoffset technique for SVG logos is one of the most requested by clients—it works with any vector path exported from Illustrator or Figma.

getTotalLength() · interpolated dashoffset · fill with delay via Sequence.

Logo appears through a progressive glitch: displaced color copies (cyan, magenta) with random translateX decay until they converge on the stable logo — a tech identity reveal.

Applies RGB split glitch specifically to logos—combines per-frame randomization with intensity interpolation to control the decay.

intensity = interpolate(frame, [0, dur], [1, 0]) · random(frame) × intensity · position absolute for layers.

Logo drops from above with a high-stiffness, low-damping spring — bounces several times before settling, with a shadow that expands on landing.

Spring with pronounced overshoot to simulate the physics of a fall — an energetic logo reveal style for young, tech-focused brands.

spring({ stiffness: 200, damping: 10 }) · shadow inversely proportional to translateY · Sequence for entrance.

Logo spins in 360° with spring — scale starts at 0 and reaches 1 while the rotation completes its cycle, creating an energetic rotational entrance.

Combines two independent springs (scale and rotate) with different stiffness values for organic, asymmetrical timing.

rotate spring with overshoot · simultaneous scale spring · transform-origin center to rotate in place.

Logo split into two halves (top/bottom or left/right) with clip-path; the halves arrive from opposite directions and snap together with spring — a "assembling" effect for the logo.

Demonstrates clip-path rect to mask image halves — a reusable technique for split screens, photo reveals, and split transitions.

clipPath inset(0 0 50% 0) and inset(50% 0 0 0) · translateY in opposite directions · spring for a precise fit.

Brand name typed character by character with Math.floor(frame / charsPerFrame); icon/symbol appears first with spring, and the cursor blinks during typing.

Branding version of the typewriter — adds a visual symbol before the text and creates a “brand-building” narrative frame by frame.

slice(0, charsVisible) · blinking cursor with Math.floor(frame/10) % 2 · Sequence for the symbol before the text.