Stripe Type

$ pnpm dlx shadcn@latest add @remocn/stripe-type

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { StripeType } from "@/components/remocn/stripe-type";
 
const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#2b3bff" }}>
    <StripeType text="Launch" />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="StripeType"
    component={Title}
    durationInFrames={100}
    fps={30}
    width={1280}
    height={720}
  />
);

The bands cover the word's ink, from the top of its tallest letter to the bottom of its lowest, measured from the loaded font. With stripes bands and a gap share of each pitch left empty, the first band starts at the top and the last ends at the bottom. Each band is a copy of the text clipped to its strip.

Band 0 enters from the left, band 1 from the right, and so on, two frames apart, each over 16 frames with an expo ease. The word is whole at frame 30 for eight bands. settle="solid" closes the gaps over the next ten frames. With exit, after hold frames the bands carry on in the direction they came from and leave through the other side. getStripeTypeDuration gives the length for any set of props.

The component paints no background and centers the word in its parent. Sizes scale with height / 720.