Negation Drop
Condensed caps lines rise in, then each negation drops away and its stem word lands on a lime block.
$ pnpm dlx shadcn@latest add @remocn/negation-dropUsage
// src/Root.tsx
import { Composition } from "remotion";
import { NegationDrop } from "@/components/remocn/negation-drop";
const NegationDropScene = () => (
<NegationDrop
lines={["You can’t animate.", "You don’t have a team.", "It isn’t done."]}
/>
);
export const RemotionRoot = () => (
<Composition
id="NegationDrop"
component={NegationDropScene}
durationInFrames={135}
fps={30}
width={1280}
height={720}
/>
);Condensed all-caps lines rise in one after another. Then, line by line, the first contraction (can't, don't, isn't) loses its negation, which falls away, and the remaining stem word lands on a highlighted block while the line closes up. Pass lines that each contain a can't, don't or isn't style contraction. It ships light and dark.
Props5
| Prop | Type | Default |
|---|---|---|
| lines | string[]DEFAULT_LINES Lines to set in caps; the first contraction in each line flips. | |
| accent | string— Color of the highlight block behind the kept word. | |
| background | string— Background fill; pass "transparent" to drop it. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
| theme | "dark" | "light""dark" Light or dark palette. | |
- linesstring[]
Lines to set in caps; the first contraction in each line flips.
Default
DEFAULT_LINES - accentstring
Color of the highlight block behind the kept word.
- backgroundstring
Background fill; pass "transparent" to drop it.
- speednumber
Playback speed multiplier for the whole timeline.
Default
1 - theme"dark" | "light"
Light or dark palette.
Default
"dark"