Introducing

An eyebrow settles then lifts as the wordmark lands with a sweep of light and a tagline.

Installation

$ pnpm dlx shadcn@latest add @remocn/introducing

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Introducing } from "@/components/remocn/introducing";
 
const IntroducingScene = () => (
  <Introducing
    eyebrow="Introducing"
    name="remocn"
    tagline="Launch-video scenes for Remotion. Copy, paste, render."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Introducing"
    component={IntroducingScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A large eyebrow settles in the centre and lifts to make room, then the name lands with a sweep of light and the tagline rises word by word. Pass eyebrow, name or logo, tagline and accent. Ships light and dark.

Props8

Prop	Type	Default
eyebrow	string"Introducing" Small line that settles then lifts before the name lands.
name	string"remocn" Product name; Remocn renders the real logo.
logo	React.ReactNode— Mark set before the name, sized to its cap height.
tagline	string"Launch-video scenes for Remotion. Copy, paste, render." One line under the lockup.
accent	string"#3B5BFD" Colour of the light passing through the name.
background	string— Stage fill colour; overrides the theme background.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

eyebrowstring
Small line that settles then lifts before the name lands.
Default"Introducing"
namestring
Product name; Remocn renders the real logo.
Default"remocn"
logoReact.ReactNode
Mark set before the name, sized to its cap height.
taglinestring
One line under the lockup.
Default"Launch-video scenes for Remotion. Copy, paste, render."
accentstring
Colour of the light passing through the name.
Default"#3B5BFD"
backgroundstring
Stage fill colour; overrides the theme background.
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"