01 · Overview
The joke that turned into the method
For this concept, I imagined a studio that sells immersive WebGL work and realtime 3D. The obvious site is a canvas with a shader in it. The interesting one asks a harder question: how far can you get with no canvas at all?
The answer turns out to be all the way. The perspective grid, the chamfered HUD panels, the scanlines, the chromatic-aberration glitch on the headings, the magnetic buttons and the live readouts are all CSS and nine inline SVGs. A studio that can build a convincing realtime interface out of gradients and clip-paths has made an argument about craft that a shader never could.
02 · The idea
Every pixel generated in-browser
The chamfer
One clip-path polygon cutting two opposite corners. Applied to every panel, chip and button — the page's entire structural signature.
Two channels
Cyan carries structure, magenta carries state. The glitch is those two channels offset by four hundredths of an em.
Readouts that move
Uptime, frame time and node count drift on a timer that stops when the tab is hidden or motion is reduced.
03 · Goals
Mission parameters
Look expensive, weigh nothing
No photography, no video, no 3D runtime. The heaviest asset on the page is the stylesheet.
Six transmissions
A selected-work grid where every tile is generated in-browser — the studio's own claim, honoured literally.
A crew, not a leadership team
Twelve humans, one studio dog, zero account managers — the roster page as a personality test.
Open a channel
A contact form with per-field error IDs, so every validation message is programmatically tied to its input.
04 · Build order
Mission sequence
Thirty-four tokens
The largest token block of the ten: void, panel, two channels, four glow levels, the chamfer size, the skew angle and the scanline step.
The clip-path system
A cut size as a variable, so the chamfer scales with the component instead of being redrawn for each one.
Glow without filters
Box-shadow for the halo,
drop-shadowonly where the shape is irregular. Filters are expensive; the page uses them exactly where a box-shadow cannot reach.Nine numbered modules
Nav, header state, anchors, reveals, terminal typing, count-ups, live HUD, magnetic buttons, contact form.
The gates
Magnetism requires a hover-capable pointer and a viewport of at least 1100 pixels. The HUD stops on
visibilitychange. Neither runs under reduced motion.
05 · Architecture
Three files
├── index.html 44.9 KB — 6 sections, 9 inline SVG, 0 images
├── styles.css 52.5 KB — 34 custom properties, 4 media queries
└── script.js 13.1 KB — 415 lines, 9 numbered modules
The stack
- clip-path
- Gradients
- box-shadow glow
- visibilitychange
- Unbounded
- Chakra Petch
Accessibility
- Per-field error IDs
- aria-describedby
- aria-live
- Reduced motion
- hover + width gate
06 · What fought back
What fought back
Neon on near-black is the least accessible palette in common use. Cyan is bright enough, but the dim greys a cyberpunk interface wants sit far below AA.
The body text token was lifted until it measured, and the very dim values were confined to decorative HUD labels marked aria-hidden. The look survives; nothing a reader needs is under-contrast.
A HUD driven by setInterval keeps ticking in a background tab, burning battery on a page nobody is looking at.
A visibilitychange listener stops the interval when the tab is hidden and restarts it on return. The same listener also stops it when reduced motion is switched on mid-session.
Magnetic buttons that follow the cursor are unusable on touch, and on a small screen they drag the control out from under the finger entirely.
Two gates rather than one: (hover: hover) and a minimum viewport of 1100 pixels. The magnetism exists only where there is a cursor and room to move.
A typewriter effect that builds text character by character is announced character by character, and leaves the page empty for search engines.
The full string ships in the markup and the effect replays it. While typing, the element carries an aria-label with the complete text; the label is removed once the animation lands.
07 · Worth keeping
The parts worth keeping
WE BUILD ELECTRIC WORLDS
Three glitching lines over a CSS perspective grid. No canvas, no shader, no image.
Selected Transmissions
Six work tiles, every one drawn in-browser — the studio's boast, taken literally.
The chamfer system
One variable-driven clip-path that scales across panels, chips and buttons.
Active Roster
Twelve humans, one studio dog, zero account managers. The crew section is the pitch.
08 · Run it live
Run it here
The real build, embedded and running. It loads on demand — nothing is fetched until you ask for it.
Skip the live preview
The real build, running in the page. The live preview is an embedded page; press Escape to leave it.
Open full screen ↗
