Product Hero — Remotion product launch hero

Q: How do I add Product Hero to a Remotion project?

Run npx shadcn@latest add @snapcn/hero-launch. 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 Product Hero?

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.

Overview

A launch-style hero on one shared timeline: a dark product card fades and scales into the centre, eases left until about half of it remains visible, and a white feature card slides in from the right to meet it. Both cards then drop together as a group while the headline reveals above — fading up from below with a blur that resolves as the cards settle. Every beat overlaps the next, using high-damping springs (no overshoot) for a premium, non-robotic feel. Pass your own heading to change the headline.

Frequently asked questions

How do I add Product Hero to a Remotion project?

Run npx shadcn@latest add @snapcn/hero-launch. 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 Product Hero?

Product Hero is a Remotion product launch hero for React. Cinematic product-launch hero — two cards slide into formation as the headline reveals above.

What do I need before using Product Hero?

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.