Negation Drop

Condensed caps lines rise in, then each negation drops away and its stem word lands on a lime block.

Installation
$ pnpm dlx shadcn@latest add @remocn/negation-drop

Usage

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

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

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

    Default1

  • theme"dark" | "light"

    Light or dark palette.

    Default"dark"