Module 1.3 · spring & composition

🌊 spring() — spring simulation

O spring() doesn’t receive an inputRange and outputRange — it simulates physics. Given the current frame and fps, calculates a value that starts at 0 and moves toward 1, goes a little above 1 (overshoot) and then settles. That bounce is what gives the animation life.

🎯 Minimal callout

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// retorna 0 → 1 (com overshoot natural)
const progress = spring({ frame, fps });

return <div style={{ transform: `scale(${progress})` }}>Pop!</div>;

📊 spring() vs interpolate() — different outputs

interpolate: you control every keyframe; movement is predictable and precise.
spring: you define the physics; movement emerges naturally from the simulation.
The spring returns a value ≈ 0→1, but can exceed 1 before it settles — that’s the overshoot.

Entrance

frame + fps

Output

≈ 0 → 1

Overshoot

Briefly exceeds 1

Physics

Spring simulation

⚙️ config: damping, stiffness, and mass

The spring behavior is adjusted with the object config. Three main parameters: damping (damping), stiffness (stiffness) and mass (weight). Combining all three, you can go from a quick pop to a long, smooth oscillation.

damping — amortization (default: 10)

High (e.g., 200): no overshoot, direct movement like a CSS ease-out. Low (e.g., 5): lots of oscillation, a “trampoline” effect.

stiffness — stiffness (default: 100)

High (e.g., 300): faster, more aggressive movement. Low (e.g., 40): moves more slowly, with a “loose” spring.

mass — weight (default: 1)

High (e.g., 3): “heavy object,” slow movement with more oscillation. Low (e.g., 0.5): lightweight object, resolves quickly.

Config variations SpringConfig.tsx

// Pop rápido sem bounce
spring({ frame, fps, config: { damping: 200 } })

// Bounce divertido
spring({ frame, fps, config: { damping: 8, stiffness: 120 } })

// Entrada pesada e lenta
spring({ frame, fps, config: { damping: 15, stiffness: 60, mass: 2.5 } })

high damping

No bounce

low damping

Too much oscillation

stiffness

Spring speed

mass

Object weight

⚖️ spring vs interpolate — when to use each

The two functions serve different purposes. The right choice saves time and makes the video more polished. A simple rule: spring for lively entrances, interpolate for exact timing and fades.

✓ Use spring() when…

✓Element "jumps" into position — icon, badge, or entering card.
✓You want natural overshoot without manually defining keyframes.
✓Scale from 0→1 with bounce (logo appearing).

↔ Use interpolate() when…

→Fade-in/out with exact timing (you know the right frame).
→Color, opacity — values that shouldn’t exceed a limit.
→Animation with multiple keyframes (hold, sequence).

💡 Combine both!

It’s very common to use spring() for the entrance scale and interpolate() for the opacity of the same element — each one where it shines. There's no conflict in calling both in the same component.

spring

Pop entrances

interpolate

Exact timing

Combination

No conflict

Rule

Physics vs. keyframe

⏩ Sequence — scenes with delay and local frame

O <Sequence> is a wrapper that delays the beginning of a child component. With the prop from, the child only starts to exist on the specified frame—and, crucially, the local frame within the child resets to 0 at that point.

Two titles in sequence Titles.tsx

import { Sequence } from "remotion";

// Título 1: frame global 0–59 → frame local 0–59
<Sequence from={0} durationInFrames={60}>
  <Title1 />  // useCurrentFrame() aqui retorna 0..59
</Sequence>

// Título 2: começa no frame global 60 → frame local reinicia em 0
<Sequence from={60} durationInFrames={60}>
  <Title2 />  // useCurrentFrame() aqui também retorna 0..59
</Sequence>

✓ What to DO with Sequence

✓Use from to delay any component without changing its internal code.
✓Use durationInFrames to limit the child’s visibility window.
✓Reuse the same component in multiple Sequences with different offsets.

✗ What NOT to do

✗Use frame - offset manually in the child component — Sequence already does this.
✗Stop using durationInFrames: the child stays “alive” forever (visible after its duration).
✗Confusing the global frame with the local frame — inside a Sequence, the clock resets.

from

Starting offset

durationInFrames

Visibility window

Local frame

Resets to 0

Reusable

Same comp, N times

🪟 AbsoluteFill — Layer Stacking

O <AbsoluteFill> is a div that fills 100% of the composition’s width and height, with position: absolute. Stacked with other AbsoluteFills, it creates layers — background, content, overlay — without affecting the layout.

🎯 The three-layer structure

import { AbsoluteFill } from "remotion";

export const Scene = () => (
  <>
    {/* Camada 1 — fundo (z mais baixo) */}
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }} />

    {/* Camada 2 — conteúdo principal */}
    <AbsoluteFill>
      <div>Título e elementos</div>
    </AbsoluteFill>

    {/* Camada 3 — overlay (z mais alto) */}
    <AbsoluteFill style={{ opacity: 0.15, background: "radial-gradient(...)" }} />
  </>
);

💡 Order = implicit z-index

In React, sibling elements with position: absolute and even z-index overlap through the order in JSX: the last one stays in front. AbsoluteFills in sequence create a predictable layer stack—explicit z-index isn’t needed in most cases.

100% × 100%

Fill the composition

position: absolute

Without affecting layout

JSX order

= implicit z

Stack

Background/content/overlay

🎞️ Series.Sequence — scenes in an automatic queue

With the <Series>, you don’t need to manually calculate the from of each scene. Place children inside <Series.Sequence durationInFrames={N}> and Remotion calculates the offsets automatically. It’s the foundation of any multi-scene Track 4 project.

Three scenes without calculating offsets Video.tsx

import { Series } from "remotion";

export const MyVideo = () => (
  <Series>
    {/* Cena 1: frames 0–89 */}
    <Series.Sequence durationInFrames={90}>
      <Intro />
    </Series.Sequence>

    {/* Cena 2: frames 90–179 (calculado auto) */}
    <Series.Sequence durationInFrames={90}>
      <MainContent />
    </Series.Sequence>

    {/* Cena 3: frames 180–269 */}
    <Series.Sequence durationInFrames={90}>
      <Outro />
    </Series.Sequence>
  </Series>
);

✓ Advantages of Series

✓Offsets are calculated automatically — adding a scene doesn't break the others.
✓Each scene gets a local frame reset to 0 — the same logic as Sequence.
✓Declarative structure: the order in JSX = the order in the video.

↔ Series vs. manual Sequence

→Series: linear scenes in sequence—projects with direct cuts.
→Manual Sequence: overlapping simultaneous layers, precise timing.
→Real projects usually use both: Series for scenes, Sequence for internal elements.

Series

Scenes in a row

Auto-offset

No manual calculations

Local frame

Resets per scene

T4 Base

All projects

📌 Module summary

✓

spring({ frame, fps }) — simulates a spring, returns 0→1 with natural overshoot; perfect for lively entrances.

✓

config: damping / stiffness / mass — high damping eliminates bounce; stiffness sets speed; mass sets inertia.

✓

spring vs interpolate — spring for pop/entrance; interpolate for exact timing and opacity. Combine the two freely.

✓

Sequence — delays a component's start with from; local frame resets to 0 inside the child.

✓

AbsoluteFill — fills 100% of the composition; stacked in background/content/overlay layers in JSX order.

✓

Series.Sequence — scenes queued with automatic offsets; foundation for all projects in Track 4.

Next track:

Track 2 — Resources: images, videos, audio, fonts, and external assets in Remotion. You already know the engine; now comes the fuel.

← Back to Track Next track: Resources →