✦ StealThis .dev
Pages Medium

DIY — Retro Electronics Restoration Landing

A vintage-bench landing page for a fictional retro-electronics restoration shop, in plain HTML, CSS and vanilla JS. The hero is a chunky beveled CRT with scanlines, a vignette, phosphor-green boot text that types itself out, and a power knob playing a real tube-collapse animation. Below sit beveled service cards with price-from chips, a hover crossfade before/after gallery of CSS-drawn consoles and radios, a mono recap-kit table with an ESR note, a repair-log timeline, a toast-confirmed quote form and a seven-segment bench clock.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Retro Electronics Restoration Landing

A full marketing page for Cathode Revival, a fictional shop that recaps, rebuilds and retrobrights old consoles, radios and 8-bit computers. The whole thing is dressed as workshop hardware: aged beige plastic, bakelite brown, phosphor green readouts on near-black screens and a warm amber dial glow. Every illustration on the page — capacitors, tubes, cartridges, dial needles, handheld d-pads — is drawn with CSS boxes and gradients, so there is not one image request in the document.

The hero is a beveled CRT set. On load, a boot sequence types itself into the screen character by character in phosphor green, finishing with a blinking block cursor. The chunky power knob beside it is a real role="switch" button: click it and the picture collapses into a horizontal line, then a point, exactly the way a tube discharges; click again and it ignites back and re-types the boot text. Scanline and vignette layers sit above the content the whole time.

Further down, service cards carry beveled edges and price-from chips; the gallery crossfades each unit from a yellowed intake state to a restored one on hover or keyboard focus, and platform chips filter it live with a toast count. A recap-kit card lists real capacitor values, voltages and quantities in a monospaced table with a bulk-ESR note, the repair log walks a fourteen-day job entry by entry, and the quote band validates a name and email before opening a ticket number. The footer keeps a live seven-segment bench clock.

How this look is built

The CRT effect is layered entirely in CSS: repeating-linear-gradient gives the scanlines (blended with mix-blend-mode: multiply so it darkens the phosphor instead of washing it out), a radial-gradient overlay supplies the vignette, and the collapse is one absolutely positioned sheet animating transform: scaleY() then scaleX() toward zero — compositor-only properties, so it stays smooth without touching layout. The yellowed/restored gallery swap is just two stacked illustrations whose shared --case / --face custom properties are redefined per state, so a single opacity crossfade repaints both palettes at once instead of duplicating markup. Watch two things: the collapse animation must be restarted by removing the class and forcing a reflow (void el.offsetWidth) or a second toggle silently does nothing, and every continuous animation — bubbles, cursor blink, collapse — is neutralised under prefers-reduced-motion, where the boot text is printed instantly rather than typed.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.