Kinetic Warp

A coarse mesh warp bends a whole word in staccato beats, one axis moving per keyframe

Installation

$ pnpm dlx shadcn@latest add @remocn/kinetic-warp

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { KineticWarp } from "@/components/remocn/kinetic-warp";
 
const KineticWarpScene = () => (
  <KineticWarp
    text={"REM\nOCN"}
    fontFamily="Passion One"
    fontUrl="https://fonts.googleapis.com/css2?family=Passion+One:wght@700&display=block"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="KineticWarp"
    component={KineticWarpScene}
    durationInFrames={120}
    fps={30}
    width={1920}
    height={1080}
  />
);

The component renders to a canvas, so the font must actually be loaded before the text is drawn — pass fontUrl for any webfont and the render is held (via delayRender) until it lands.

Props25

Prop	Type	Default
text	string"REM\nOCN" The text to warp. Split lines with `\n`
textColor	string"#FFFFFF" Fill color of the type
fontFamily	string"sans-serif" Font family drawn to the canvas
fontUrl	string"" Stylesheet URL for the webfont. Empty string skips loading and uses a local font
fontWeight	number700 CSS font-weight
fontSize	number107.1 Layer-space font size, before `layerScale`
leading	number70 Layer-space baseline-to-baseline distance, before `layerScale`
tracking	number-21 Tracking in 1/1000 em
layerScale	number480 Percent scale applied to the type after layout
positionX	number960 Horizontal center of the text block in comp pixels
positionY	number540 Vertical center of the text block in comp pixels
compWidth	number1920 Canvas width in pixels
compHeight	number1080 Canvas height in pixels
meshRows	number2 Mesh cells vertically — the coarseness is the effect
meshColumns	number4 Mesh cells horizontally
colRestX	number960 Rest position of the moving column line
colRightX	number1255 Column position at keyframes 2 and 3
colLeftX	number678 Column position at keyframes 4 and 5
rowRestY	number540 Rest position of the moving row line
rowDownY	number850 Row position at keyframes 3 and 4
rowUpY	number387 Row position at keyframe 5
keyframeStride	number20 Frames between the six keyframes — motion ends at `5 * keyframeStride`
easingBezier	[number, number, number, number][0.3, 0.74, 0.09, 1] Cubic bezier applied between keyframes
resampleStep	number4 Destination pixels per resampled strip — lower is smoother and slower
className	string— Optional className passed to the wrapper

textstring
The text to warp. Split lines with `\n`
Default"REM\nOCN"
textColorstring
Fill color of the type
Default"#FFFFFF"
fontFamilystring
Font family drawn to the canvas
Default"sans-serif"
fontUrlstring
Stylesheet URL for the webfont. Empty string skips loading and uses a local font
Default""
fontWeightnumber
CSS font-weight
Default700
fontSizenumber
Layer-space font size, before `layerScale`
Default107.1
leadingnumber
Layer-space baseline-to-baseline distance, before `layerScale`
Default70
trackingnumber
Tracking in 1/1000 em
Default-21
layerScalenumber
Percent scale applied to the type after layout
Default480
positionXnumber
Horizontal center of the text block in comp pixels
Default960
positionYnumber
Vertical center of the text block in comp pixels
Default540
compWidthnumber
Canvas width in pixels
Default1920
compHeightnumber
Canvas height in pixels
Default1080
meshRowsnumber
Mesh cells vertically — the coarseness is the effect
Default2
meshColumnsnumber
Mesh cells horizontally
Default4
colRestXnumber
Rest position of the moving column line
Default960
colRightXnumber
Column position at keyframes 2 and 3
Default1255
colLeftXnumber
Column position at keyframes 4 and 5
Default678
rowRestYnumber
Rest position of the moving row line
Default540
rowDownYnumber
Row position at keyframes 3 and 4
Default850
rowUpYnumber
Row position at keyframe 5
Default387
keyframeStridenumber
Frames between the six keyframes — motion ends at `5 * keyframeStride`
Default20
easingBezier[number, number, number, number]
Cubic bezier applied between keyframes
Default[0.3, 0.74, 0.09, 1]
resampleStepnumber
Destination pixels per resampled strip — lower is smoother and slower
Default4
classNamestring
Optional className passed to the wrapper

Inspired by How to Make Kinetic Warp Text Animation in After Effects by P A N T E R.