feat(brand): live wallpaper page

[wavekat-eason]

Adds /brand/wallpaper/ — a chrome-free, animated WaveKat wordmark on a flowing waveform field. Leave it fullscreen on a spare monitor, point a screen recorder / OBS browser source at it, or export it as a PNG and set it as your desktop background.

What's on the page

Aspect presets do two jobs: they letterbox the stage (not the window), so a capture crop can be framed to a real target while you work in a normal browser window — and they're the pixel size the PNG export writes. Fit screen, 16:9, 34-inch (3440 × 1440), 16:10, MacBook, Square, Vertical. Fit screen exports at the display's real resolution including devicePixelRatio, which is why there's no separate 4K chip: on a 4K monitor it already gives you 3840 × 2160, and every fixed preset is a distinct aspect rather than the same shape at another scale. The crop boundary shows a hairline only while the controls are up, so it can never land in a recording.

Motion. Unattended, the field carries itself: seven wave layers with mixed wavelengths that never re-align, each breathing on its own slow cycle, plus a highlight band swept across the wordmark's own silhouette (the SVG used as an alpha mask, so it follows the letters rather than a rectangle).

Cursor reactivity, deliberately restrained — the field should acknowledge the pointer, not reorganise around it: waves swell and brighten around the cursor, the wordmark leans toward it, and a click sends a ripple out through every layer. The influence decays to nothing ~1.8s after the last move, easing out slower than it eases in — a wallpaper is mostly left alone, and a bright blob frozen wherever the mouse was parked would sit in every recording. Pausing motion clears it outright rather than freezing it.

Optional clock, off by default: a 24h HH:MM readout that lives inside .mark, so it floats and leans with the wordmark as one lockup. Sized in container units like the wordmark, so the pair holds its proportions from 9:16 to 21:9. Not tied to the motion toggle — a clock isn't motion, and a stopped clock is worse than no clock.

PNG export, redrawn at the target resolution rather than scaled up from the on-screen canvas. The wave math lives in drawField(ctx, w, h, t, cursor), shared by the live canvas and the export, so the file is the same artwork rather than a lookalike that drifts as the on-screen version gets tuned. Three things are deliberately left out of the file: the cursor swell and in-flight ripples, the shimmer (a moving highlight, not a resting state), and the clock (a wallpaper frozen at 21:07 forever is a bug, not a feature).

Controls fade out after 3 idle seconds and return on pointer move. H pins them hidden (recording mode), F fullscreen, C clock, S save PNG, 1–7 presets. Preset, clock and motion persist in localStorage; the theme toggle uses the same key as the site header, so the choice carries back to the rest of the site.

Supporting changes

• Base.astro takes a siteBackground prop so this page can skip the shared backdrop rather than animating two canvases at once.
• The sitemap gains a filter that drops the page — it's noindex, and advertising a URL we then tell crawlers to ignore is a contradictory signal.
• The footer's More column links it, English-only. The page isn't translated, so the link is offered where the reader is already reading English rather than pointing a localized footer at an English destination — which also keeps it from costing a ninth translation of a label for a brand extra. More is the right column; Tools is for product surfaces.

Notes

• Deliberately noindex and English-only. It's an internal brand tool, not a marketing page: out of the sitemap, out of translatedRoutes, not in the nav.
• SEO checklist applied by hand rather than via the claude-seo skills, since the page is deindexed and has no indexable copy: real title and description, one <h1> (screen-reader only — the page is pure artwork), noindex, excluded from the sitemap, no JSON-LD.
• Motion off and prefers-reduced-motion both hold a still frame and disable cursor reactivity.

Testing

• npm run build — 214 pages, clean
• npm run check:links — no broken or leaking internal links
• Rendered in headless Chrome across presets and both themes
• Cursor effects verified by driving synthetic pointer events into the built page
• Export verified by intercepting the blob and reading it back: 3440 × 1440 dark and 1080 × 1080 light both produced correct pixel dimensions and composition, with the clock and cursor swell absent as intended

🤖 Generated with Claude Code

https://claude.ai/code/session_01EwxQJL43iApJRb4NS5p6vD

[github-actions]

🔗 Preview: https://feat-brand-wallpaper.wavekat-com.pages.dev