Luxury Clock Redesign and Demo Showcase Reinstatement

[AndrewRedican]

Description

Elevates the clock demo from a serviceable minted coin into a haute-horlogerie timepiece and restores the landing page's demo showcase affordances that were lost when the cover-flow gallery landed.

The analog face is now a deep navy sunburst dial under a domed-sapphire crystal treatment: a bi-directional rotating ceramic bezel with platinum graduations (drag its knurled ring through 3° ratchet detents, click it to step, or use the arrow keys while the coin has focus), applied white-gold index markers filled with blue luminescence that intensifies at night, a Mercedes-style handset with a smooth sweeping second hand, a date window at 3 o'clock under a cyclops lens, a sun/moon aperture, and a brushed/polished steel case with a fluted crown. The digital face becomes the matching steel exhibition case back with a navy LCD window. The heritage orange accent survives in the second hand, center dot, and alarm surfaces.

On the docs-site, the landing hero regains its demo showcase frame — auto-advance across all catalogued demos with the conic border-timer, a fast-forward skip button, and a new pause/resume control — with a strict layering contract so no embedded demo or poster can ever cover the controls. The clock's offline fallback swaps a 157 KB raster replica for a 1 KB SVG poster in the same visual family as the planned-demo posters.

Type of Change

✨ Feature | ♻️ Refactor | 📝 Docs

Changes Made

• demo-clock — full luxury redesign of AnalogFace.vue (sunburst dial, interactive bezel with multi-touch/button-guarded pointer capture, lume indices, Mercedes hands, date + cyclops, day/night complication, steel case and crown, engraved rehaut); DigitalFace.vue restyled as a steel case back with navy LCD; ClockCoin.vue case CSS updated (steel edge, hairline silhouette, blue focus glow). Contract, physics, and messaging untouched.
• Accessibility — bezel operable by click and keyboard as well as drag; WCAG AA contrast fixes on the LCD timezone label and showcase captions; pause control satisfies auto-advancing-content requirements; skip button uses aria-disabled instead of disabled to avoid dropping keyboard focus mid-animation.
• docs-site — reinstated demo-showcase.tsx (manifest-driven rotation, 20 s cycle, progress ring z-20 pointer-events-none, controls z-30 half-outside the frame); removed the superseded clock-hero.tsx and orphaned progress-border keyframes; clock-poster.png replaced by clock-poster.svg; manifest poster path and description updated.
• Planning docs — updated to record the redesign, the showcase layering contract, and the repeatable static-deploy recipe for demos.
• Chore — e2e project lockfile integrity refreshes (builder, features, versioning).

Testing

• demo-clock: 55 unit tests pass (including the axe accessibility smoke test); lint, typecheck, and production build green.
• docs-site: typecheck, targeted eslint on all touched files, and production build green.
• Multi-pass adversarial code review over the full diff; all confirmed findings (pointer-capture guards, a skip/rollover race, focus loss, contrast) fixed and re-verified.
• Manual: coin spin/catch/tap, bezel drag/click/arrow-key stepping, reduced-motion paths (crossfade flip, pager, no auto-advance), showcase pause/skip layering over the live embed and poster fallback, both themes.

Screenshots/Videos

Visual change — worth attaching before/after captures of the analog face (day and night lume), the steel case back, and the landing showcase with the border-timer and pause/skip controls.

Checklist

• I have performed a self-review of my code
• I have added/updated tests as needed
• I have updated relevant documentation
• I have used npm run commit for conventional commit messages

AI Assistance

GitHub Copilot was used to generate this PR description.

Additional Notes

• No changes to the feature's wire contract or the vendored shell — this is visual/UX surface only, so no re-pack or re-vendor is needed.
• The clock's Railway origin is still pending service creation; until it exists the embeds intentionally degrade to the new SVG poster after the 6 s liveness timeout.
• Repo sheds ~156 KB net from the poster swap.

---

📝 CLA Requirement

By submitting this pull request, you acknowledge that:

• You have read and agree to sign our Contributor License Agreement (CLA)
• The CLA Assistant bot will automatically check your signature status
• If you haven't signed yet, the bot will provide instructions in the comments
• By signing, you grant the project maintainer exclusive rights to your contributions

For more information, see our Contributing Guide.

---

Thank you for contributing to hyperfrontend! 🚀

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs-site	Ready	Preview, Comment	Jul 5, 2026 7:36am

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 2341dd9

Command	Status	Duration	Result
nx run-many -t=e2e --projects=demo-clock,docs-s...	✅ Succeeded	1m 3s	View ↗
nx run-many -t=build --projects=demo-clock,docs...	✅ Succeeded	2m 45s	View ↗
nx run-many -t=typecheck --projects=demo-clock,...	✅ Succeeded	17s	View ↗
nx run-many -t=test --projects=demo-clock,docs-...	✅ Succeeded	10s	View ↗
nx run-many -t=lint --projects=demo-clock,docs-...	✅ Succeeded	12s	View ↗
nx run-many -t=format:check --projects=demo-clo...	✅ Succeeded	<1s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-05 07:42:08 UTC