Card Stack 3d
A stack of physical cards fanning out in depth, each with real thickness and an edge highlight, turning to face the camera. Install with npx remotion-ui@latest add card-stack-3d.
Scene3DAdvanced
$ npx remotion-ui@latest add card-stack-3dA stack of physical cards fanning out in depth, each with real thickness and an edge highlight, turning to face the camera. The 3D counterpart to flat card reveals: the depth is geometry, not a CSS perspective trick.
Usage
import { CardStack3d } from "@/remotion/scenes/card-stack-3d";
<CardStack3d />Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/card-stack-3d- Use when: 3D product shots and WebGL scenes rendered frame by frame.
- Customize: delayInFrames, durationInFrames, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { CardStack3d } from "@/remotion/scenes/card-stack-3d";
<CardStack3d />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| delayInFrames | number | 0 | Frames to wait before this starts. |
| durationInFrames | number | 30 | Length of the entrance. |
Text Extrude 3d
Extruded 3D headline with a lit bevel: the letters rise and settle as the camera pulls back across them. Install with npx remotion-ui@latest add text-extrude-3d.
Globe Points 3d
Lit sphere with instanced city markers and arcs rising between them, turning slowly under a rim light. Install with npx remotion-ui@latest add globe-points-3d.