Hey everyone 👋
My portfolio has five themes: Classic, Terminal, Notebook, Midnight and Panorama. A dropdown would have been the easy way to switch between them.
I wanted switching themes to feel like plugging a cable into a screen. So I built a Theme Studio.
What you can do 🎮
- Pick a theme from the row of cards, and it slides in under the display
- Watch the display: it plays that theme's real page, live, and you can scroll it
- Drag the display or a card around, and the wires follow on a spring
- Hit Open: light races up the wires, a progress bar fills on the screen, and the theme opens
- Press Esc mid-send to pull the plug
The wires 🔌
The connection isn't one line. It's a bundle of hairline strands, gold through orange, red and magenta to violet, pinched in the middle like a cable tie.
- Every strand is its own curve. Each one is a cubic bezier from a point on the card's edge to a point on the display's edge, so the bundle fans out at both ends.
- Light runs down it. Bands of brighter colour travel along the strands, and in dark mode they're blended additively so overlapping strands glow.
- It has weight. Drag a node and the bundle's middle trails behind on a spring, then settles.
- Sending is a volley. When you open a theme, a burst of bands and short sparks race up the strands into the display.
It's all one canvas over the stage, redrawn every frame.
The progress bar 🟩🟦🟪
While the light travels, the display's screen goes dark and a pixel progress bar fills on it.
- One strict grid. Every cell sits on a 6px grid: lit cells are 4px squares (or dots), unlit ones are tiny specks.
- Checkers, not noise. Which cells light up is an ordered dither of slowly drifting noise, so they gather into checker and diamond patterns that keep shifting.
- A white-hot edge. The leading edge burns white with a soft bloom, and a few cells flare and go out as it fills.
- Each theme gets its own bar. The wire's colours for Classic, GitHub greens for Terminal, blue dots for Panorama, and one colour per section for Midnight and Notebook.
- It doesn't lie. The bar holds at 92% until the theme's page has actually loaded.
Under the bar, the site's sections (Intro, Work, Articles, Blocks) fill in turn as the bar passes through them, each with its own percentage. Point at one and its stretch of the bar lights up while the rest dims.
When it hits 100%, the screen grows out of the display and dives into the page.
Bonus: you're not alone 👀
If someone else is on the page, you'll see their cursor and their wire too. That runs through a small Cloudflare Durable Object.
Try it 🌐
Plug in Terminal and watch the greens fill up, then try Panorama.
