Page design
Glass Night Drive
Frosted glass on a synthwave drive: the hero is a contained scene of a sky-blue-to-pink dusk (a violet night with stars and a striped outrun sun in dark mode), a wireframe ridge and a neon perspective grid floor that drives toward the horizon, with the headline's last word in a sunset gradient and the portrait in a glowing glass windshield.
Paste this into an agent to rebuild the whole page from scratch.
Build a single-page personal site in frosted glass themed as a synthwave night drive. The hero is a contained scene of sky, a striped outrun sun, a wireframe mountain ridge and a neon perspective grid floor that scrolls toward the horizon, with the portrait framed in a glass windshield. Every glass panel on the page carries a neon rim light instead of a white one. The same scene renders as a pastel vaporwave dusk in light mode and a deep violet night in dark mode.
Make the hero a rounded section with a `clamp(120px, 16vw, 210px)` floor height token, padding of `clamp(28px, 5vw, 64px)` on top and about 45% of the floor height at the bottom, and its own glow shadow in the sun colour. Inside, a two-column grid at `minmax(0, 1.12fr) minmax(0, .88fr)` aligned to the bottom: on the left a mono eyebrow, the headline at `clamp(2.8rem, 6.2vw, 5.6rem)` with -0.045em tracking and 0.98 line height (white with a dark text shadow at night), and a strong glass panel with the lede and buttons; on the right the windshield, a glass frame with 10px padding around the portrait at 4:4.6, with a glass stat lens across its bottom whose lower edge crosses the horizon. Follow with Start-here image cards, two columns of latest writing, an AI experiments grid and a three-panel contact band, inside a centred wrap of about 1200px.
Use Geist for everything read at an 18px base, Geist Mono for labels and meta, and one Instrument Serif italic accent word per headline filled with a sunset gradient (`linear-gradient(100deg, #ffd23f, #ff5fb4 60%, #c77dff)` clipped to the text) that gains a pink `drop-shadow` glow at night. No retro display faces. Light mode uses deep violet ink `#1d0f36` on 60 to 90% white glass, a deep violet primary button and magenta links `#8a0f57`; dark mode uses lilac ink `#f5ecff` on violet glass over a `#0b0320` ground with a hot pink `#ff3ea5` primary button carrying dark ink `#1a0230`. Provide a light/dark toggle that honours the system preference.
Paint the scene in layers behind the hero content. The sky is a vertical gradient from top through mid and low to the horizon colour at 76% (light: `#b8e9ff` down to a pink horizon `#ff8fc4`; dark: `#0b0320`, `#33095f`, `#a3176d`, horizon `#ff6b9a`). At night add a star layer of ten tiny radial-gradient dots in the upper 55%. The sun sits at 71% across with its centre just below the horizon, `min(46vw, 640px)` wide, a vertical gradient from `#ffe45c` to `#ff4fa8` with two soft glows, and is sliced into outrun stripes by a mask of alternating opaque and transparent bands that thicken toward the bottom. Over it, an SVG ridge polygon with a cyan stroke and a thinner inner polyline at 55% opacity, using `vector-effect: non-scaling-stroke`. The floor is a band with a 2px horizon-coloured top border and glow; inside it, a `::before` grid of 2px lines every 56px, three times wider than the hero and four times taller, tilted back with `rotateX(72deg)` under a 260px perspective, animating its background position by one cell every 2.4s so it drives forever, faded into the floor colour at the top.
Give every glass panel the neon rim on its `::after`: a 1.5px gradient ring at `inset: -1px` cut out with `mask-composite: exclude`, running from lamp A (pink) at the top-left through transparent to lamp B (cyan) at the bottom-right, at 75% opacity by day and 90% at night. Hovering or focusing a lifting card brightens it to full with `brightness(1.25)` and a small drop-shadow glow, like headlights passing. Behind the page, recolour the drifting mesh blobs to violet, magenta, deep cyan and ember, and fix a static perspective road to the bottom third of the viewport (72px cells, tilted 64 degrees, masked to fade upward, with a diffuse horizon glow rather than a hard line) so it passes under the frosted panels everywhere. Mark the nav link for the section in view.
What makes this work is containment: the full scene lives only in the hero, and the rest of the page gets just the rim lights and the faint road. Don't add chrome text, scanlines or more neon colours. Below 900px stack the hero, centre the windshield at up to 460px with a 4:3.8 portrait, and move the sun to the centre at 78vw. With `prefers-reduced-motion` stop the driving floor and the mesh drift; with `prefers-reduced-transparency` make panels near-solid and hide the road and grain.
One self-contained file: markup, styles and scripts together.
Loading the page source…
Built around the synthwave horizon hero, shown as a pastel vaporwave dusk in light mode and a night drive with a striped sun in dark mode. Every glass panel carries a two-lamp neon rim (pink top-left, cyan bottom-right) that brightens on hover, and a static perspective road runs under the page; Start-here cards, latest writing, AI experiments and a contact band follow.
Sections, top to bottom
- Synthwave horizon hero
- Start here cards
- Latest AI and Digital Garden writing
- AI experiments
- Elsewhere and work-with-me band
- Type
- Geist (UI and body) · Instrument Serif Italic (one gradient accent word per headline, principles) · Geist Mono (labels, meta, code)
- Themes
- light+dark
- Palette
#0b0320#12052b#1b0a40#f5ecff#dccdf5#ff3ea5#2ee6ff#ffd23f#ff8a3d#b99bff#4dffc3#f6edfb#1d0f36#3a1466#8a0f57#b8e9ff#e3c9ff#ffb3dc