MOTIONSTASH
All components

Depth Field Cards

Product & UI

A field of cards on four depth planes with real depth of field and aerial perspective, revealed by one long lateral camera move

Download preview768×432 preview render. The full-resolution file comes from running the component
8 seconds
Format

This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.

depth of fieldparallaxcamera moveproductcardspremium
What you can change · 8 settings

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

  • Headline *
    headline · string

    The line that sits in the sharp plane. Three to six words.

    now: One registry, every format

  • Kicker
    kicker · string

    Supporting line under the headline, in muted ink.

    now: Each component sizes itself from the composition, so the …

  • Hero label
    heroLabel · string

    Label on the card that holds the focal plane.

    now: Registry

  • Hero metric
    heroMetric · string

    The figure on the focal card. Two or three characters.

    now: 148

  • Hero unit
    heroUnit · string

    Unit under the focal card's figure.

    now: components

  • Aperture
    aperture · number

    Depth of field. Higher throws the near and far planes further out of focus.

    now: 0.7

  • Drift
    drift · number

    How far the camera travels laterally across the shot. The parallax between planes is what makes the space read as deep.

    now: 0.55

  • Brand
    brand · string

    Brand token id, one of the keys of BRANDS.

    now: circuit

For developers · source, dependencies and provenance

Dependencies

remotion@remotion/shapeszod

No Tailwind, no CSS, no asset files. Inline styles only.

Source

Filesrc/registry/items/depth-field-cards.tsx
Frame1920×1080
Duration240f · 8s @ 30fps

Provenance

ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT

Prompt

A wide product frame with genuine depth: cards arranged on several distinct depth planes, each plane with its own blur and its own parallax rate, so one slow lateral camera move across the whole shot reveals the space. Distant planes should lose contrast into the background as well as sharpness, the way aerial perspective works. Keep one card and the headline in the sharp focal plane.