Coy Denial

A huge "Don't check the site at nine." with a sheepish "(Do.)" tucked into the corner

Installation
$ pnpm dlx shadcn@latest add @remocn/coy-denial

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CoyDenial } from "@/components/remocn/coy-denial";
 
const CoyDenialScene = () => <CoyDenial rounds={[{ say: "Nothing is launching on Thursday.", aside: "(Something is.)" }]} />;
 
export const RemotionRoot = () => (
  <Composition
    id="CoyDenial"
    component={CoyDenialScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A big statement builds word by word, then a sheepish parenthetical aside appears in the corner that contradicts it; the round exits and the next one follows. Pass rounds (say and aside pairs); it fits the pace to the composition length.

Props5

PropTypeDefault
rounds
CoyDenialRound[]DEFAULT_ROUNDS

Statement and aside pairs, played in turn.

accent
string—

Color of the corner aside; defaults to the theme accent.

background
string—

Stage fill color; pass "transparent" to overlay your own footage.

speed
number1

Playback multiplier for the whole timeline.

theme
"dark" | "light""dark"

Color scheme; ships dark and light.

  • roundsCoyDenialRound[]

    Statement and aside pairs, played in turn.

    DefaultDEFAULT_ROUNDS

  • accentstring

    Color of the corner aside; defaults to the theme accent.

  • backgroundstring

    Stage fill color; pass "transparent" to overlay your own footage.

  • speednumber

    Playback multiplier for the whole timeline.

    Default1

  • theme"dark" | "light"

    Color scheme; ships dark and light.

    Default"dark"