Hello Zoom — Remotion zoom through text intro

Q: How do I add Hello Zoom to a Remotion project?

Run npx shadcn@latest add @snapcn/hello-zoom. 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 Hello Zoom?

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/hello-zoom

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

Hello Zoom paints its own card and runs 75 frames at 30fps. Timing is measured frame by frame off a reference; every word, colour and font is a prop.

import { HelloZoom } from "@/components/snap-cn/hello-zoom";

export const Beat = () => <HelloZoom />;

Frequently asked questions

How do I add Hello Zoom to a Remotion project?

Run npx shadcn@latest add @snapcn/hello-zoom. 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 Hello Zoom?

Hello Zoom is a Remotion zoom through text intro for React. Words flicker in place, one line types on, then the camera dives through its own letters into the next card.

What do I need before using Hello Zoom?

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.