Feather Settle

Words drift down and sway like feathers before settling into a sentence, with one phrase highlighted.

Installation

$ pnpm dlx shadcn@latest add @remocn/feather-settle

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FeatherSettle } from "@/components/remocn/feather-settle";
 
const FeatherSettleScene = () => (
  <FeatherSettle text="Your launch, landing softly." highlight="softly" stagger={13} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FeatherSettle"
    component={FeatherSettleScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each word falls from above with a gentle side-to-side sway and tilt, staggered in order, and settles into the sentence; highlight is set in the accent. Pass text, stagger, fall and sway to tune the drift; it ships light and dark through theme.

Props9

Prop	Type	Default
text	string"Your launch, landing softly." Sentence whose words fall in one by one
highlight	string"softly" Word or phrase shown in the accent color
stagger	number13 Frames between words starting to fall
fall	number68 Frames each word takes to fall into place
sway	number1 Side-to-side drift multiplier; 0 falls straight
accent	string— Accent color (any valid CSS color)
background	string— Overrides the theme's stage color
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

textstring
Sentence whose words fall in one by one
Default"Your launch, landing softly."
highlightstring
Word or phrase shown in the accent color
Default"softly"
staggernumber
Frames between words starting to fall
Default13
fallnumber
Frames each word takes to fall into place
Default68
swaynumber
Side-to-side drift multiplier; 0 falls straight
Default1
accentstring
Accent color (any valid CSS color)
backgroundstring
Overrides the theme's stage color
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"