Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/developer-exe/llms.txt

Use this file to discover all available pages before exploring further.

SynthwaveGrid is the full-screen animated background used as the hero layer in developer.exe. It renders a fixed z-0 viewport fill composed of four distinct visual layers stacked from back to front: a dark gradient sky, a field of 20 animated floating particles driven by Framer Motion, a neon-magenta horizon line, and a perspective-transformed grid floor that scrolls infinitely toward the viewer. The component accepts no props and should be placed once at the application root as a sibling behind your foreground content.

​
Props

SynthwaveGrid accepts no props. All visual parameters — sky gradient stops, particle count, horizon glow, perspective depth, grid line colours, and animation speed — are defined in the component’s internal constants and the global stylesheet.

​
Usage

Place SynthwaveGrid as the first element inside a positioned wrapper so it occupies the full viewport behind all sibling content. Because it uses position: fixed with z-index: 0, it automatically sits beneath page content without requiring any z-index management on its parent: 
import { SynthwaveGrid } from './components/SynthwaveGrid';

function App() {
  return (
    <>
      <SynthwaveGrid />
      <main className="relative z-10">
        {/* page content */}
      </main>
    </>
  );
}

​
Layer breakdown

SynthwaveGrid renders a single fixed inset-0 z-0 root element containing four layers in source order (back to front): 1. Sky gradient An absolutely positioned bg-gradient-to-b div spans the top half of the viewport, transitioning from arcade-navy at the top through arcade-black to arcade-black — producing the deep indigo-to-black sky of a synthwave skyline. 2. Floating particles Twenty Framer Motion motion.div elements are scattered across the top half of the viewport. Each particle:
  • Starts at a random x position across the viewport width and a random y within the top half.
  • Animates its y position upward by a random value between 0 and -100px.
  • Loops its opacity between 0.2 → 0.8 → 0.2 over a randomised duration of 5–10 seconds with repeat: Infinity and ease: "linear".
Each particle is a 4 × 4 px neon-cyan square at 50% base opacity, giving the sky a subtle starfield shimmer. 3. Horizon line A 1 px-tall neon-magenta stripe is fixed at top: 50%, spanning the full viewport width. A box-shadow of 0 0 20px #ff2bd6 creates a hot-pink glow along the horizon, visually separating the sky from the grid floor. 4. Synthwave grid floor The bottom half of the viewport contains a .synthwave-container div that sets perspective: 1000px and overflow: hidden to clip the scrolling grid at the edges. Inside it, the .synthwave-grid child is absolutely positioned with bottom: -50%; left: -50%; width: 200%; height: 200% — the oversized footprint ensures grid lines fill the full viewport width even after the perspective rotation pulls the edges inward.
  • Perspective tilt: transform: rotateX(75deg) combined with transform-origin: top center rotates the grid plane almost flat, producing a receding vanishing point.
  • Grid lines: two linear-gradient layers in background-image draw cyan vertical lines and magenta horizontal lines at regular intervals.
  • Scroll animation: animation: grid-move 2s linear infinite translates the grid downward by one tile per cycle, creating seamless infinite forward motion.
A final gradient overlay (bg-gradient-to-t from-transparent via-arcade-black/80 to-arcade-black) sits above the grid inside the container, fading it into the background toward the horizon.

​
CSS keyframe

@keyframes grid-move {
  0%   { transform: rotateX(75deg) translateY(0); }
  100% { transform: rotateX(75deg) translateY(50px); }
}
The 50 px translate matches the grid tile size exactly, so the end frame is visually identical to the start frame and the loop is seamless.

​
Grid line colours

Line directionColour
Verticalrgba(34, 211, 238, 0.3) — neon-cyan
Horizontalrgba(255, 43, 214, 0.3) — neon-magenta

​
Positioning tip

SynthwaveGrid uses position: fixed internally and fills the entire viewport regardless of its parent’s dimensions. It does not need to be wrapped in a position: relative container. Use it as a sibling to your content rather than a parent, so the grid and foreground content share the same stacking context: 
// ✅ Correct — sibling layout
<>
  <SynthwaveGrid />
  <main className="relative z-10">page content</main>
</>

// ❌ Incorrect — grid is not a layout container
<SynthwaveGrid>
  <main>page content</main>
</SynthwaveGrid>

Build docs developers (and LLMs) love

Get started for freeTalk to us