Period Drop

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

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { PeriodDrop } from "@/components/remocn/period-drop";
 
const EndCard = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <PeriodDrop text="remocn" dotColor="#ff4d1a" />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="PeriodDrop"
    component={EndCard}
    durationInFrames={75}
    fps={30}
    width={1280}
    height={720}
  />
);

Each letter rises out of a clip at its line over 12 frames, two frames apart. At frame 20 the dot drops from above the frame and lands at frame 32 on the baseline right after the last letter. It bounces twice, each time leaving at 0.35 of its previous speed, and comes to rest at frame 47.

The dot stretches with its speed in flight and squashes on each impact, keeping its area. The stretch tops out at 1.3× and the squash at 0.78×; later impacts squash less. That is well past the 2–4% squash the motion principles suggest for UI, on purpose: the bounce is the effect.

The dot is an inline element after the word, so it lands wherever the word ends without measuring it. The component paints no background and centers the word in its parent. Sizes scale with height / 720.