Experience layer
Display settings, motion, accents, splash screens and themed states (PLAN.md §10–§14). Every setting below applies to this whole page as you change it, and is remembered by assets/js/prefs.js.
Display settings (.prefs)
A plain form. Unset settings follow the operating system; the panel shows the OS choice until you pick one.
Some sample text with a running-text link, a and a badge, to preview the settings against.
The panel in a modal
The same form drops into a modal or drawer. The accessibility button in the bar opens this one.
Motion tokens
A theme describes how it moves with these. Every animation they drive runs only when the OS and data-motion allow it. Switching theme with the picker plays the outgoing theme's exit (--motion-leave) through a view transition: MS-DOS powers off, Windows blue-screens, Matrix rains away, LCARS goes to warp, Liquid Glass shatters. It is instant under reduced motion.
| Token | Default | Used for |
|---|---|---|
--motion-duration-s | 120ms | Hover, press, small state changes |
--motion-duration-m | 200ms | Surfaces opening |
--motion-duration-l | 320ms | Theme switch, splash exit |
--motion-ease | cubic-bezier(0.2, 0, 0, 1) | All of the above |
--motion-enter | motion-fade-in m ease both | An element arriving (splash intro) |
--motion-exit | motion-fade-out s ease both | An element leaving |
--motion-leave | unset (cross-fade) | The theme leaving: power-off, bsod, rain, warp, shatter, drop, iris or genie |
Alert level and easter eggs
The app sets data-alert="yellow|red" on <html> for a whole-page condition. Every theme frames the screen; LCARS, Windows 95, Matrix, Skyrim and Nokia 3310 answer in their own way. This page opts in to data-easter-eggs (assets/js/eggs.js): the Konami code also sets red alert, Windows 95 offers help with a letter, Matrix rains after a minute idle, and Skyrim remarks on the tenth failed form check.
Accent swatches and seasons
The accent row in the panel lists the swatches the current theme declares (--accent-swatch-1 to -6); a theme without any hides the row. Try imac-g3 or cassette-futurism. Seasonal palettes (data-season) are the app's to switch on; a theme tints only its accent and gutter art for them.
Splash (.splash)
Shown full screen while the app loads; these use .is-contained to stay in their box.
Real load, with progress
Telemetry
Indeterminate
Connecting
Message only
Themed states (.empty-state)
An empty .empty-state-title shows the theme's suggested heading (the last row); the app's own text always wins. A ready-made 404 page uses .is-404.
No recordings yet
Takes you record appear here.
Couldn’t load the mix
The session file is damaged. Error 0x1F.
You’re offline
Changes are saved here and sync when you reconnect.
No such channel
Channel 12 was removed or never existed.
Admins only
Ask an owner for access to billing.
Loading your takes
Large sessions take a few seconds.
Suggested heading from the theme.
Suggested heading from the theme.
Forced colours
Under Windows High Contrast (forced-colors: active) every theme falls back to system colours: surfaces drawn with shadows get a real outline, selected items use the Highlight colour, and focus rings stay. Nothing to switch on here; the OS does it.