Synthwave

A retro neon horizon with a scrolling perspective grid, a rising striped sun and mountain ranges that slide in

Installation

$ 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.

tsx

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}:

Frames	Motion
0–40	The sun rises from behind the horizon
4–34	The back range slides in from the left and rises
8–38	The front range slides in from the right and rises
Always	The grid scrolls at `gridSpeed` rows per second; the sun stripes cycle every 36 frames

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.

Props9

Prop	Type	Default
grid	string"#E5322D" Grid lines and the front mountain outline. Overrides colors.grid when set
sunTop	string"#FFC46B" Top of the sun gradient. Overrides colors.sunTop when set
sunBottom	string"#E5322D" Bottom of the sun gradient. Overrides colors.sunBottom when set
skyHorizon	string"#3B0C10" Sky glow at the horizon, also tints the floor and haze. Overrides colors.skyHorizon when set
colors	{ skyTop?, skyHorizon?, sunTop?, sunBottom?, grid?, floor?, mountainsBack?, mountainsFront?: string }{ skyTop: "#08080B", skyHorizon: "#3B0C10", sunTop: "#FFC46B", sunBottom: "#E5322D", grid: "#E5322D", floor: "#0A0A0C", mountainsBack: "#2A0A0E", mountainsFront: "#111111" } All scene colors as one object; skyHorizon also tints the floor and the horizon haze. The flat props above take precedence, missing keys keep their defaults
gridSpeed	number2 Grid rows that pass the viewer per second
horizon	number0.6 Horizon height as a fraction of the frame height, from the top
sunStripes	booleantrue Scrolls the sun stripes downward; false keeps them fixed
speed	number1 Playback multiplier

gridstring
Grid lines and the front mountain outline. Overrides colors.grid when set
Default"#E5322D"
sunTopstring
Top of the sun gradient. Overrides colors.sunTop when set
Default"#FFC46B"
sunBottomstring
Bottom of the sun gradient. Overrides colors.sunBottom when set
Default"#E5322D"
skyHorizonstring
Sky glow at the horizon, also tints the floor and haze. Overrides colors.skyHorizon when set
Default"#3B0C10"
colors{ skyTop?, skyHorizon?, sunTop?, sunBottom?, grid?, floor?, mountainsBack?, mountainsFront?: string }
All scene colors as one object; skyHorizon also tints the floor and the horizon haze. The flat props above take precedence, missing keys keep their defaults
Default{ skyTop: "#08080B", skyHorizon: "#3B0C10", sunTop: "#FFC46B", sunBottom: "#E5322D", grid: "#E5322D", floor: "#0A0A0C", mountainsBack: "#2A0A0E", mountainsFront: "#111111" }
gridSpeednumber
Grid rows that pass the viewer per second
Default2
horizonnumber
Horizon height as a fraction of the frame height, from the top
Default0.6
sunStripesboolean
Scrolls the sun stripes downward; false keeps them fixed
Defaulttrue
speednumber
Playback multiplier
Default1