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-pop

Usage

tsx

// 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.

Props14

Prop	Type	Default
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 \| string700 Font weight
fontSize	number603 Font size in comp pixels
maxTextWidth	number1660 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	number80 Dilation radius. The extrusion depth is twice this
extrudeAngleDeg	number-58.6 Direction of the extrusion in degrees
extrudeSteps	number200 Copies making up the body — above the depth in pixels it is seamless
extrudeStartFrame / extrudeEndFrame	number0 / 48 The pop window. The extrusion eases out and holds after the end frame
width / height	number1920 / 1080 Coordinate space of the composition
className	string— Optional className passed to the wrapper

letterstring
The text to extrude — one short word reads best
Default"WIN"
bodyColorstring
Color of the extruded body
Default"#e8192b"
faceColorstring
Color of the front face
Default"#ffffff"
fontFamilystring
Font family of the glyph
Default"'Helvetica Neue', Helvetica, Arial, sans-serif"
fontWeightnumber | string
Font weight
Default700
fontSizenumber
Font size in comp pixels
Default603
maxTextWidthnumber
Longer text auto-shrinks (font size and extrusion depth together) to fit this width in comp pixels
Default1660
basePosition[number, number]
Baseline anchor of the body layer in comp pixels
Default[959.2, 752.5]
minimaxRadiusnumber
Dilation radius. The extrusion depth is twice this
Default80
extrudeAngleDegnumber
Direction of the extrusion in degrees
Default-58.6
extrudeStepsnumber
Copies making up the body — above the depth in pixels it is seamless
Default200
extrudeStartFrame / extrudeEndFramenumber
The pop window. The extrusion eases out and holds after the end frame
Default0 / 48
width / heightnumber
Coordinate space of the composition
Default1920 / 1080
classNamestring
Optional className passed to the wrapper

Inspired by 5 Clean Text Animations by Mapal.