Synthwave

$ pnpm dlx shadcn@latest add @remocn/synthwave

Usage

Synthwave is a full-frame background. A perspective grid glows on the floor and scrolls toward the viewer. A striped sun rises from behind the horizon, its stripes thickening toward the bottom and drifting downward. Two mountain ranges slide in from opposite sides as they rise into place, the front one traced in the grid color. Stars twinkle in the dark sky, and a haze swallows the lines where they converge.

import { AbsoluteFill } from "remotion";
import { Synthwave } from "@/components/remocn/synthwave";
 
export const Drop = () => (
  <AbsoluteFill>
    <Synthwave grid="#00E5FF" sunTop="#FFE66D" sunBottom="#FF2E88" />
    <AbsoluteFill style={{ alignItems: "center", paddingTop: 120 }}>
      <Title />
    </AbsoluteFill>
  </AbsoluteFill>
);

It takes no children. Layer your content on top in a sibling AbsoluteFill, and keep it above the horizon, which sits at horizon of the frame height (60% by default).

Timing

At 30 fps and speed={1}:

synthwaveLength is 40, the frame the sun and mountains are in place. The grid and stripes never stop, so the background holds for any duration. speed scales the entrance and the scroll together.