Repository navigation
feat(site): brand the /compare/ pages with a flow-field background and page transitions - #187
Merged
Merged
Conversation
…d page transitions The compare pages get the homepage's mark in their header and a 2D-canvas echo of its stage: a dithered limb in the bottom-right corner with dust drifting off it on a slow flow field and a brightness wave along the rim. No WebGL, no dependency; the loop stops in hidden tabs and draws one still frame under reduced motion. Navigating between the homepage and the compare pages uses cross-document view transitions: the old page blurs away, the new one settles in, and the brand mark glides between headers. Browsers without support just navigate. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Lukce <krawczakluke@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Lukce <krawczakluke@gmail.com>
The cross-document transition fired but read as a pop: a 0.3s blur between two black pages, onto the homepage's loading screen, with the compare background still blank in the captured frame. - One transition.css for both sides: the new page sweeps in through a soft-edged circle from the bottom-right (where the eclipse sits) while the old page dims, blurs and sinks back, over 0.9s. - Arriving at the homepage by a transition hides the loading mark (pagereveal), so site.js skips the opening instead of flashing it. - flow.js is render-blocking, so the background is drawn in the first frame the transition captures. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Lukce <krawczakluke@gmail.com>
Page transitions between the homepage and /compare/ now move only the content. The header and the background stay put: the compare pages' eclipse uses the homepage's limb() geometry, both headers match, and the homepage nav gains the Compare link. transition.js (sync, in <head>) names main and footer per direction: the leaving page's content sinks as nb-out, the arriving page's sweeps in as nb-in from the eclipse, so neither morphs between the two pages' different boxes. It also records nbSurgeAt; stage.js and flow.js read it and make the eclipse swell toward the text, brighten and throw dust, and the homepage cubes flash and fly into place as the text arrives. Arriving by transition, the homepage canvas skips its fade-in and the loading mark stays hidden, so the background never blinks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Lukce <krawczakluke@gmail.com>
… inverting it flow.js took the homepage's limb() geometry but kept the old idea of which side was inside, so it lit the text side and blew dust out across the page, and the two backgrounds clashed mid-transition. It is now a 2D port of the stage's field and dust shaders: the sky/mid/far dither outside the circle, a bright edge, and specks that sink inward to their own depth. The surge now moves the rim in toward the text on both pages, and is gentler (smaller step, softer glow). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Lukce <krawczakluke@gmail.com>
This branch was successfully deployed
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
apps/site/src/flow.js, about 150 lines, 2D canvas): echoes the homepage stage. A dithered limb sits in the bottom-right corner. Dust drifts off it on a slow flow field, and a brightness wave travels along the rim. The loop stops in hidden tabs and draws one still frame underprefers-reduced-motion. Text gets a dark halo, and the table a dark panel, so reading is unaffected./compare/*. The old page blurs out, the new one settles in, and the brand mark glides between headers. They are off under reduced motion. Browsers without support navigate as before.Checks
apps/site: 70 tests, 69 pass, 1 skipped, 0 fail.view-transition-namematches on both pages.styles.css(homepage) only gains the transition rules and oneview-transition-name.🤖 Generated with Claude Code