And You

A list of audiences ("For the founder who...") ends on a big "and you."

Installation

$ pnpm dlx shadcn@latest add @remocn/and-you

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AndYou } from "@/components/remocn/and-you";
 
const AndYouScene = () => <AndYou clauses={["For the founder who launches on Monday,", "the designer who just learned React,", "the two-person studio,"]} last="and you." />;
 
export const RemotionRoot = () => (
  <Composition
    id="AndYou"
    component={AndYouScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A list of audiences scrolls in clause by clause, each one stacking under the last, then they dim and a big closing phrase rises at the bottom of the frame. Pass clauses (one string per audience) and last for the closing words; it spaces the clauses to fit the composition length.

Props6

Prop	Type	Default
clauses	string[]— Audience clauses, each shown in turn and stacked.
last	string"and you." Closing words shown large at the bottom.
accent	string— Color for the closing phrase; 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.

clausesstring[]
Audience clauses, each shown in turn and stacked.
laststring
Closing words shown large at the bottom.
Default"and you."
accentstring
Color for the closing phrase; 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"