Hero Loop
12-second seamless brand ident, the RemotionUI logo animated from its own parts over the site's phosphor light.
Composition
$ npx remotion-ui@latest add hero-loopA silent 1920×1080 ident built to run on loop forever. The RemotionUI lockup holds over the site's gold phosphor light and moves three times, each move built from the logo's own anatomy: the back frame slides out from behind the front frame in parallax, the gold play triangle presses and springs back with a bloom, and the wordmark drops behind a mask and rises back letter by letter.
Every move uses keyframed bezier curves with anticipation and a small overshoot, and each lands exactly on its rest pose, so the last frame hands back to frame 0 with no seam. The light is a single-pass port of the homepage shader, driven by frame on a closed path.
Pass background="transparent" to drop the stage and light so a page can show its own background through the video; tone="light" inks the wordmark for a light page.
12-second silent brand ident: the RemotionUI logo animated from its own parts (parallax frames, play press, wordmark re-reveal) over a port of the site's phosphor light. Loops without a seam. The light needs WebGL2 and falls back to a flat stage.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/compositions/hero-loop- Use when: complete video templates that can be customized as source.
- Customize: background, tone, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { HeroLoop } from "@/compositions/hero-loop";
<HeroLoop />
<HeroLoop background="transparent" tone="light" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| background | "phosphor" | "transparent" | "phosphor" | Paint the gold phosphor stage, or nothing so the page shows through. |
| tone | "dark" | "light" | "dark" | Page theme under the transparent variant; light inks the wordmark dark. |