Repository navigation
docs: animate the landing page hero - #299
Merged
Merged
Conversation
The 170px PNG mark blurred at hero size and on high-density screens, its black outline vanished in dark mode, and on mobile the hero repeated the logo right under the header. - Rebuild the mark as vector art from the PNG: the outline is the line work's centre line refitted as even-width strokes, the portholes and antenna tip are true rings, and the dome fills are smoothed palette regions. 26 KB, 11 KB gzipped. - Draw it with <svg><use> so the outline (stroke) and body (color) follow new --logo-ink / --logo-paper tokens, light and dark. - Show the hero mark only on wide screens, aligned with the top of the hero copy.
The docs build needs Node >=22.19 (see engines). On 22.18 Angular's route extraction crashes with "Cannot read properties of undefined (reading 'exports')", so let nvm pick up a current Node 22.
The hero repeated the static logo in a card. It now shows the saucer flying over the three kinds of step a flow is made of: navigation, timespan and snapshot. It pauses above each one while a beam lights the card and its ring fills, then swoops back to start again. - New HeroScene component, pure CSS keyframes so server and client markup match and the home route still prerenders. Every timeline shares one duration; each target is shifted with a negative delay so it lights exactly as the saucer arrives. - Lighthouse's step icons (ring, clock, aperture) redrawn as strokes, with a one-word note under each step: page load, interaction, page state. - Colours, spacing, radii and shadows come from the design tokens, dark mode follows the theme variables, and under prefers-reduced-motion the saucer parks above the row with every step lit. - The hero's second column widens to 360px, 420px above 1100px. It stays hidden below 900px, where the header logo is enough.
❗❗❗ report generated by this PR ❗❗❗☕ Order Coffee ☕Date/Time: 2026-11-03 22:00
|
☕ Order Coffee ☕Date/Time: 2026-11-03 22:01
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The landing page hero repeated the static logo in a card. It now shows the saucer flying over the three kinds of step a flow is made of: Navigation, Timespan and Snapshot. It pauses above each one while a beam lights the card and its ring fills, then swoops back and starts again.
HeroScenecomponent: pure CSS keyframes, no JavaScript, so server and client markup match and the home route still prerenders. Every timeline shares one 14 s duration; each target is shifted with a negative delay so it lights exactly as the saucer arrives.prefers-reduced-motionthe saucer parks above the row with every step lit.Includes the commits from #298 (the SVG mark the scene reuses); merging this lands both.
Checked
nx build docsprerenders the home route with the scene.