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.
Scene3DAdvanced
$ npx remotion-ui@latest add text-extrude-3dExtruded 3D headline with a lit bevel: the letters rise and settle as the camera pulls back across them. Distinct from stroke-to-fill-text and the other atoms, which are flat SVG or DOM type with no real depth or lighting.
Install the typeface
The scene extrudes real glyphs, so it needs a three.js typeface JSON. add text-extrude-3d
copies the component but not the font — download
geist-bold.typeface.json (Geist, SIL OFL 1.1)
into your public/fonts/, or convert your own face with
facetype.js and point fontUrl at it.
Usage
import { TextExtrude3d } from "@/remotion/scenes/text-extrude-3d";
<TextExtrude3d />
// Your own face:
<TextExtrude3d text="LAUNCH" fontUrl={staticFile("fonts/my-brand.typeface.json")} />Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/text-extrude-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 { TextExtrude3d } from "@/remotion/scenes/text-extrude-3d";
<TextExtrude3d />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| delayInFrames | number | 0 | Frames to wait before this starts. |
| durationInFrames | number | 30 | Length of the entrance. |
Product Turntable 3d
A product on a studio turntable: the model turns a full revolution under a soft key and rim while the camera holds, with a contact shadow anchoring it to the floor. Install with npx remotion-ui@latest add product-turntable-3d.
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.