Hero Loop
12-second seamless-looping website hero composition.
CompositionCompositions
hero-loop30fps · 960×540
Install
$ npx remotion-ui@latest add hero-loopA silent 1920×1080 hero composition built to run on loop forever. Four beats — title, install, catalog, render queue — and the last frame resolves back into frame 0, so the wrap is invisible.
It demonstrates the primitives it depends on inside the motion itself: Typewriter for the CLI line, Counter for the registry count, StaggerChildren + SpringIn for the component clips, SlideUp and FadeIn/FadeOut for the beat transitions. Every size is derived from useVideoConfig() through scaleFont and getSafeAreaPadding, so it holds at 1920×1080, 1280×720, and square or portrait crops.
12-second silent hero composition for website embeds. The final frame resolves back into frame 0, so it loops without a seam. Installs as source and demonstrates the primitives it uses.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/hero-loop- Use when: complete video templates that can be customized as source.
- Customize: edit the copied source file for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { HeroLoop } from "@/compositions/hero-loop";
<HeroLoop />