Southern Range · Playground
Quiet country, live controls.
A small Astro site, pared back to what matters — wrapped around a set of
React islands. The prose ships as static HTML; each control below ships
with just enough JavaScript to come alive in your browser. This page is a
learning playground; the matching journal lives in docs/learning/.
1 · Theme switcher
The whole site is coloured by CSS variables. This island rewrites them on the fly, so one click re-paints everything.
Active palette · Patagonia
Each button rewrites the CSS variables on :root. The whole page recolours because every colour traces back to those variables.
2 · Quote fetcher
Real apps talk to the network. This one fetches a random quote, with loading and error states for when things go sideways.
3 · Hydration explorer
The same component, three times — each with a different Astro directive.
Reload the page and watch the timestamps: client:load wakes first,
client:idle shortly after, and client:visible only once you scroll it
into view.
client:load — hydrates immediately
static HTML — not yet interactive
client:idle — waits for a quiet moment
static HTML — not yet interactive
↓ keep scrolling — the next one stays static HTML until it appears ↓
client:visible — hydrates when scrolled into view
static HTML — not yet interactive
4 · Todo list
The React classic: an array in state, a controlled input, and add / toggle / remove without ever mutating state in place.
1 of 2 remaining
5 · Piano
Synthesised entirely in the browser with the Web Audio API — no audio files. Click the keys or play with your keyboard.
Click the keys or use your keyboard: A S D F G H J K for white, W E T Y U for black. Sound is synthesised live with the Web Audio API — no audio files.
Written in MDX. Everything you see is static HTML except the five islands — that selective hydration is the whole point of Astro.