Window

A cabin window whose shade drags the page from day into night.

Pull the blind and the whole page follows it, scrubbed continuously as your hand moves — over the real sun above Boston.

Live page →

Window is a personal single-page site. This is a preview of what it does and how it's put together — the full source, its assets and its configuration stay private.

One page · one interaction · zero animation libraries

Midday — the sun high over a deck of cloud	Sunset — the blind drawn to a sliver, the horizon compressed and orange	Night — a moon and stars, the cabin dark

The same window at three times over Boston. Not a theme toggle: the sky is a continuous function of where the real sun is, and the cabin a continuous function of where the blind sits.

 How it works

Two numbers run the page, and keeping them apart is the whole idea.

  the blind ──►  the cabin   every surface, mixed in oklab, day → dusk → night
  (--shade)

  the sun ────►  the sky     Boston's real solar elevation, the view as it is there
  (--sun)

The blind darkens the cabin as you drag it, because covering a window really does darken a room. The sun is Boston's real elevation, computed from the moment alone, so the view is the same whoever is looking and from wherever. A drawn blind never moves it — a lit cabin over a dark sky is just a night flight.

They were one number once, so the only way to reach a night sky was to pull the blind down over it — at 8pm the window showed noon. Splitting them fixed that and deleted a whole class of contrast bug with it.

 The mechanism

The shade is a real slider. It rests on three measured detents, gives a little past its stops the way a blind has travel in its track, and a flick throws it the way it was already going. A drag writes one CSS custom property straight to the document, never through React state — at 120Hz that would be a re-render per frame producing identical markup — and every colour on the page reads off it.

It is a role="slider": arrows walk the detents, Home and End throw it end to end, a click on the glass cycles it. With JavaScript off, the facts beneath still render, and every resting state clears WCAG AA — measured on the rendered page, not computed from tokens.

The day-to-night scrub is color-mix() on a registered custom property, so the release snap animates on the compositor with no animation library on the page. The sky is rendered to alpha images; the cabin window itself is drawn in CSS. Beneath it, a flight plan — school and work as a route, from Latakia to Boston.

Built by Trippixn  ·  discord.gg/syria

_{Window is a personal site. This repository is a preview — the full source, its assets and its configuration are not published.}