Get it on npm

3D card flip

A card with real thickness tilts in, holds its front, then flips over to its back. Good for before/after, question/answer, myth/fact.

  • 3d/card-flip
  • 3D
  • scene
  • Full frame
  • 5 s (3–20 s)
  • 3D kit
Live in your browser
3D card flip at 16:9
0.00 / 5.00 s
Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop.

Render it

npx volito render 3d/card-flip --prop frontTitle="Before" --prop frontText="9 hours in the timeline" --out card-flip.mov

That writes ProRes 4444. The same item in another shape, brand or format:

volito render 3d/card-flip --aspect 9:16 --style cobalt --out card-flip-9x16.mov
volito render 3d/card-flip --format mp4 --out card-flip.mp4
volito still 3d/card-flip --t 2.5 --out card-flip.png
volito info 3d/card-flip     # every prop and part
volito add 3d/card-flip      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("3d/card-flip"), { props: { frontTitle: "Before", frontText: "9 hours in the timeline" }, out: "card-flip.mov" });

Or ask an agent with the MCP server connected: “Render the Volito 3d card flip (3d/card-flip) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

PropTypeDefaultTakes
frontTitle
Front
textBefore≤ 24 chars
frontText
Front line
text9 hours in the timeline≤ 60 chars
backTitle
Back
textAfter≤ 24 chars
backText
Back line
textOne sentence to the agent≤ 60 chars
flipAt
Flip at (s)
number2.10.5 – 20

Parts

Each part takes any move, ease or idle: --motion ground.in=pop.

PartWhat it is
groundthe ground
cardthe card

Tags: 3d, card, flip, reveal, before after

More in 3D

3D logo

An extruded wordmark swings in on a spring and settles as a light sweeps across its faces; the tagline rises beneath. Real depth, light and perspective.

3D title

Extruded letters flip up one by one on springs while the camera eases in; the subtitle rises beneath.

3D number

A big extruded number counts up, tilted toward the camera, with a light sweep when it lands and the label beneath.

3D word cube

A cube turns a quarter at a time on a spring, each side showing the next word — a kinetic way through a list of 2 to 4 words.

3D bar chart

Bars rise from a floor one after another while the camera orbits; values count up on their tops and the leader takes the accent.

3D globe

A lit globe spins to a country, which lights up in the accent; routes arc in from other countries and a pin names the place.