Hyperspace

$ pnpm dlx shadcn@latest add @remocn/hyperspace

Usage

hyperspace() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. A starfield fades in over the outgoing scene, which dims and pushes forward. The stars drift slowly, then surge outward from the center as their streaks stretch with speed, and the frame ramps to flashColor at 62% of the transition. The incoming scene lands under the flash: the flash holds for a beat and dissolves while the scene eases out of a slight zoom and blur, with a few streaks still coasting past.

The star layout is deterministic. Each scene renders once; the stars are one SVG with up to stars lines, and the arrival adds a CSS blur for its first frames.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { hyperspace } from "@/components/remocn/hyperspace";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={90}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 56 })}
      presentation={hyperspace()}
    />
    <TransitionSeries.Sequence durationInFrames={90}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Timing

Variations

• flash: false swaps the white-out for a hard cut through the streaks at 62%.
• accentRatio: 0 keeps every streak in streakColor; raise it to tint more stars with accentColor.
• Fewer stars (80 to 120) gives a sparser, calmer jump.

Props

hyperspace(props) accepts: