Portal Intro — Remotion picture-in-text intro animation

Q: How do I add Portal Intro to a Remotion project?

Run npx shadcn@latest add @snapcn/portal-intro. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

Q: What do I need before using Portal Intro?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.

Installation

$ pnpm dlx shadcn@latest add @snapcn/portal-intro

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.

Component code

The exact file shadcn add copies into your project.

Usage

A three-beat intro, 108 frames at 30fps:

Line — the lead words fade up one at a time while the line drifts in.
Chip — the line re-sets with a rounded picture chip and the trail, then leans in until the chip takes the frame.
Title — title types itself over the picture, lifts away, and the mark and brand arrive.

import { Composition, staticFile } from "remotion";
import { PortalIntro } from "@/components/snap-cn/portal-intro";

const Scene = () => (
  <PortalIntro
    lead="your launch video"
    trail="in code"
    image={staticFile("hero.jpg")}
    title="Introducing"
    brand="Acme"
  />
);

export const RemotionRoot = () => (
  <Composition id="PortalIntro" component={Scene} durationInFrames={108} fps={30} width={1280} height={720} />
);

Props

Prop	Type	Default	Description
`lead`	`string`	`"your launch video"`	The words before the chip; they arrive one at a time
`trail`	`string`	`"in code"`	The words after the chip
`image`	`string`	—	The picture the chip opens into
`chipImage`	`string`	—	The chip's own picture, if it should differ from the backdrop
`title`	`string`	`"Introducing"`	The title typed over the picture
`brand`	`string`	`"snapcn"`	The name beside the mark
`logo`	`ReactNode`	—	The mark, drawn in currentColor. Defaults to snapcn's
`logoSrc`	`string`	—	Or the mark as an image URL
`overlay`	`string`	`"#ffffff"`	Ink of the title, mark and name over the picture
`fontFamily`	`string`	—	A label from fonts.ts or a family you have loaded. Defaults to Geist
`speed`	`number`	`1`	Global playback multiplier
`className`	`string`	—	Optional className passed to the outer wrapper
`theme`	`Partial<SnapCnTheme>`	—	Design-system token overrides
`mode`	`"light" \| "dark"`	—	Which end of the design system to resolve tokens against

Frequently asked questions

How do I add Portal Intro to a Remotion project?

Run npx shadcn@latest add @snapcn/portal-intro. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

What is Portal Intro?

Portal Intro is a Remotion picture-in-text intro animation for React. A sentence with a picture chip in it leans in until the chip takes the frame, then a title types over the picture and the mark and name arrive.

What do I need before using Portal Intro?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.