Extrude Pop
A flat word pops up out of the plane on a solid colored 3D body, no camera involved
Installation
$ pnpm dlx shadcn@latest add @remocn/extrude-popUsage
// src/Root.tsx
import { Composition } from "remotion";
import { ExtrudePop } from "@/components/remocn/extrude-pop";
const ExtrudePopScene = () => (
<ExtrudePop letter="WIN" bodyColor="#e8192b" faceColor="#ffffff" />
);
export const RemotionRoot = () => (
<Composition
id="ExtrudePop"
component={ExtrudePopScene}
durationInFrames={90}
fps={30}
width={1920}
height={1080}
/>
);The body is the same glyph swept along the extrusion vector — a morphological dilation drawn as stacked copies, back-to-front, with the white face riding the near end. Face travel and extrusion depth are keyframed together, which is what makes the word read as lifting off a plane rather than growing a shadow.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
letter | string | "WIN" | The text to extrude — one short word reads best |
bodyColor | string | "#e8192b" | Color of the extruded body |
faceColor | string | "#ffffff" | Color of the front face |
fontFamily | string | "'Helvetica Neue', Helvetica, Arial, sans-serif" | Font family of the glyph |
fontWeight | number | string | 700 | Font weight |
fontSize | number | 603 | Font size in comp pixels |
maxTextWidth | number | 1660 | Longer text auto-shrinks (font size and extrusion depth together) to fit this width in comp pixels |
basePosition | [number, number] | [959.2, 752.5] | Baseline anchor of the body layer in comp pixels |
minimaxRadius | number | 80 | Dilation radius. The extrusion depth is twice this |
extrudeAngleDeg | number | -58.6 | Direction of the extrusion in degrees |
extrudeSteps | number | 200 | Copies making up the body — above the depth in pixels it is seamless |
extrudeStartFrame / extrudeEndFrame | number | 0 / 48 | The pop window. The extrusion eases out and holds after the end frame |
width / height | number | 1920 / 1080 | Coordinate space of the composition |
className | string | — | Optional className passed to the wrapper |
Inspired by 5 Clean Text Animations by Mapal.