Orbit Lock

$ pnpm dlx shadcn@latest add @remocn/orbit-lock

Usage

OrbitLock fills the frame with its background and draws a small red core with a few moons circling it on tilted orbits. The orbits shrink on an ease-in curve while the moons speed up, each one trailing a tapered ribbon. Moons on the far side of an orbit pass behind the core. At frame 30 the moons hit the core: it flashes to flashColor, swells and pops, a ring shoots out, and your logo springs in from 55% scale with a small overshoot.

import { Img, staticFile } from "remotion";
import { OrbitLock } from "@/components/remocn/orbit-lock";
 
export const LogoSting = () => (
  <OrbitLock moons={3} tilt={64}>
    <Img src={staticFile("logo.svg")} style={{ height: 120 }} />
  </OrbitLock>
);

children are centered in the frame and rendered at their own size; the sting does not resize them. The core, orbits and moons scale with the shorter side of the composition, so the look is the same at 720p and 4K. Everything derives from the frame, so seeking and rendering are deterministic.

Timing

At 30 fps and speed={1}:

Give the sequence about 30 extra frames after frame 50 to hold the logo. The docs preview runs 78 frames. speed scales the whole timeline, so at speed={2} the impact lands on frame 15. speed={0} freezes on the first, empty frame.

Variations

moons={1} gives a single, cleaner orbit; 5 or more turns it into a busy atom. tilt={0} draws flat circles, and values toward 85 flatten the orbits into near edge-on lines. For a light theme, set backgroundColor light and moonColor and flashColor dark so the trails and ring still read.