Tittle Drop

Dots of the i and j drop in last onto 'Ship it in minutes.' on a light ground

Installation

$ pnpm dlx shadcn@latest add @remocn/tittle-drop

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TittleDrop } from "@/components/remocn/tittle-drop";
 
const TittleDropScene = () => <TittleDrop title="Ship it in minutes." subline="Launch videos from ready-made Remotion components." accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="TittleDrop"
    component={TittleDropScene}
    durationInFrames={225}
    fps={30}
    width={1280}
    height={720}
  />
);

The headline fades in word by word with its i and j dots missing, while a bubble of dots waits above. The dots hop down one at a time onto the letters, the last one becoming the full stop, then the subline fades in. Pass title, subline and accent; it ships light and dark.

Props6

Prop	Type	Default
title	string"Ship it in minutes." Headline text; every i and j is set dotless and a trailing period stays open.
subline	string"Launch videos from ready-made Remotion components." Small grey line under the headline.
accentDot	number-1 Which landing dot takes the accent (0-based, negative counts from the end).
accent	string"#3B5BFD" Color of the accented dot.
theme	"dark" \| "light""light" Color scheme; ships light and dark.
speed	number1 Playback multiplier for the whole timeline.

titlestring
Headline text; every i and j is set dotless and a trailing period stays open.
Default"Ship it in minutes."
sublinestring
Small grey line under the headline.
Default"Launch videos from ready-made Remotion components."
accentDotnumber
Which landing dot takes the accent (0-based, negative counts from the end).
Default-1
accentstring
Color of the accented dot.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme; ships light and dark.
Default"light"
speednumber
Playback multiplier for the whole timeline.
Default1