Perspective Grid Hero Block for React

The panel is a Retro Grid. cellSize sets the side of a grid cell (56px here), angle how far the floor tilts away from you (70°: higher lies flatter and puts the horizon lower), and speed how fast the lines roll (0.4 of the default). lineColor and glowColor are any CSS colours: here your theme's foreground mixed down to 30% and 6%, so the grid stays quiet in both themes; pass var(--primary) as the glow for a coloured horizon. How much floor shows below the buttons is the panel's bottom padding (pb-64 on a phone, md:pb-[26rem] on a desktop).

No. Only the lines move, by a CSS translate that loops by exactly one cell, so the loop never jumps, nothing repaints and no script runs to animate it; the block itself has no state or effects. Visitors who ask for reduced motion get a floor that stands still, and the text fades up once on load, which also stops.

It marks the release stage, beta, in your theme's warning colour, and the word Beta beside it says the same thing, so the colour is never the only cue. The dot is a Status, hidden from assistive tech. For a general release, switch it to variant="success" and change the word.

Start your first lap and Browse sample tracks are links (href="#"); point them at your sign-up and your gallery. Start your first lap is a Shine Button, the one main action: a band of light sweeps across it once when the pointer arrives or it takes focus (with reduced motion it fades in where it stands). Each button renders the link it's given with render, with nativeButton={false}.

The grid and the race readout are decoration: hidden from assistive tech and never focusable. The headline is the page's h1, and every text keeps WCAG AA contrast where it crosses the grid lines, since the floor only starts below the buttons. The pill and both buttons are links with a visible focus ring, and with reduced motion nothing rolls, fades or rises.

The headline steps down from text-6xl to text-4xl, the side padding shrinks, and the buttons stack when the row is too narrow, with the first one inside the first screen. The floor's perspective is sized to the panel, so the horizon sits at the same height at any width, and the race readout stays centred at the foot of the floor.