Spring Scale In

Words pop in with a soft overshoot scale, like a spring settling into place

Installation

$ pnpm dlx shadcn@latest add @remocn/spring-scale-in

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpringScaleIn } from "@/components/remocn/spring-scale-in";
 
const SpringScaleInScene = () => (
  <SpringScaleIn text="Fast. Crisp. Fluid." staggerDelay={3} scaleFrom={0.7} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpringScaleIn"
    component={SpringScaleInScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

The component renders transparent — supply the background via Backdrop. It ships single-theme; edit the copied file to re-theme colors.

Pair with Backdrop to place the text inside a full-frame fill with a rounded, shadowed content frame:

tsx

import { Composition } from "remotion";
import { SpringScaleIn } from "@/components/remocn/spring-scale-in";
import { Backdrop } from "@/components/remocn/backdrop";
 
const SpringScaleInScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SpringScaleIn text="Fast. Crisp. Fluid." staggerDelay={3} scaleFrom={0.7} />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpringScaleIn"
    component={SpringScaleInScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props7

Prop	Type	Default
textrequired	string— The text to animate
staggerDelay	number3 Per-word delay in frames between each word popping in.
scaleFrom	number0.7 Starting scale each word grows from. The easing overshoots slightly past 1 before settling.
fontSize	number72 Font size in pixels
fontWeight	number600 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
className	string— Optional className passed to the underlying span

textrequiredstring
The text to animate
staggerDelaynumber
Per-word delay in frames between each word popping in.
Default3
scaleFromnumber
Starting scale each word grows from. The easing overshoots slightly past 1 before settling.
Default0.7
fontSizenumber
Font size in pixels
Default72
fontWeightnumber
CSS font-weight
Default600
colorstring
Text color (any valid CSS color)
Default"#171717"
classNamestring
Optional className passed to the underlying span