Point Intro

A headline is written word by word and a colored point lands after it: 'Introducing Remocn 2.0.'

Installation

$ pnpm dlx shadcn@latest add @remocn/point-intro

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PointIntro } from "@/components/remocn/point-intro";
 
const PointIntroScene = () => <PointIntro title="Introducing Acme 2.0" accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="PointIntro"
    component={PointIntroScene}
    durationInFrames={210}
    fps={30}
    width={1280}
    height={720}
  />
);

A colored point appears alone, breathes, then glides to the end of the line while the headline is written word by word and the point settles as its full stop. A grey subline fades in last. Pass title and subline for your own announcement; it ships light and dark.

Props5

Prop	Type	Default
title	string"Introducing remocn 2.0" The headline, written out word by word. The point lands after it.
subline	string"Animated components for Remotion. Free and open source." Small grey line under the headline.
accent	string"#3B5BFD" Colour of the point.
theme	"dark" \| "light""light" Colour scheme; ships light and dark.
speed	number1 Playback multiplier; above 1 plays faster.

titlestring
The headline, written out word by word. The point lands after it.
Default"Introducing remocn 2.0"
sublinestring
Small grey line under the headline.
Default"Animated components for Remotion. Free and open source."
accentstring
Colour of the point.
Default"#3B5BFD"
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"light"
speednumber
Playback multiplier; above 1 plays faster.
Default1