Axis Flex

A gradient word flexes its width and weight like an elastic variable font, then snaps to a final style

Installation

$ pnpm dlx shadcn@latest add @remocn/axis-flex

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AxisFlex } from "@/components/remocn/axis-flex";
 
const AxisFlexScene = () => (
  <AxisFlex word="flexible" line="One font, every mood" accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AxisFlex"
    component={AxisFlexScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each letter rides an equalizer wave between a light condensed cut and a wide medium cut, so the word breathes in width and weight. At frame 84 the letters snap one by one to the final style with a spring, then the narrow second line squeezes in underneath. Pass word and line; it ships light and dark through theme.

Props5

Prop	Type	Default
word	string"elastic" The word that flexes.
line	string"One family, every width" Second line, set in the narrow cut under the word.
accent	string"#3B5BFD" Accent color blended into the word's gradient fill.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier.

wordstring
The word that flexes.
Default"elastic"
linestring
Second line, set in the narrow cut under the word.
Default"One family, every width"
accentstring
Accent color blended into the word's gradient fill.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier.
Default1