Repository navigation
feat: liquid glass motion, ticket page fixes and clear glass - #53
Merged
Merged
Conversation
…ss Buy Now Carousel: arrows and dots set a target the count holds while the smooth scroll travels, a swipe only advances the count in its direction once the next card is clearly closer, and scrollend settles it on the centered card. Rapid taps queue (1 -> 4) instead of bouncing (3-4-3). Cards: off-screen cards drop their light animation (not just pause it), with a resting frame equal to the first keyframe, and the Save chip loses its live backdrop blur. About 60 fewer GPU layers and a third less layer area on phones, which fell back to low-resolution tiles while swiping. Compare: a button + listbox picker (WAI-ARIA select-only) replaces the native select: always opens downward and eases the page down to fit, closes on a second tap, outside tap or Escape keeping the pick, full keyboard support, softer open and close, reduced motion respected. The pinned names sit centered in their columns under the glass header. Home: Buy Now becomes clear liquid glass over the video, with a rim, halo, white focus ring and pressed state. Label and link unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
MOTION-6: one press, unfold/fold and word-by-word type pattern for the glass parts, timed from the team's reference videos. - Home Buy Now: same clear glass; a press compresses it on the first frame, runs a light pulse from the touch point and springs it back. - Header: the phone menu unfolds out of the menu button with a light sweep and staggered links, folds back into it, reversible mid-way. - Compare: clearer sheet and picker fields in the Buy Now material; the list unfolds out of its field and folds back; names left-aligned on a clear glass bar that blurs the rows (the sheet's blur moved to a pseudo layer so it is no backdrop root). - What's included: the summary grows out of the picked tab, the sheet unrolls in place, contents and description follow (Web Animations, interruptible). - lib/motion/glass-press.ts and typewriter.ts, glass and type tokens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Menu (measured: glass, links and icon ran on three timelines). The sheet's clip-path sliced left-aligned link text while it opened from the right; links were delayed up to 250ms after the glass, leaving an empty sheet, and faded before it on close, leaving an empty glass remnant; the icon swapped instantly by display. Now the glass is its own layer (.nav-glass) that unfolds out of the button by transform, links are never clipped and appear once the glass is open and leave before it folds, and the icon turns on the same timeline. Reversible mid-way, hidden only after the fold. Clear glass in the home Buy Now's material for the header bar, the blue-tinted phone menu, the hero's Compare tickets link and the pinned compare names: thin fills, stronger blur with lifted brightness and saturation, hairline rims and a soft cyan halo. The bar's glass moved to .nav-bar-glass so the menu (inside it) can blur the page: an element with backdrop-filter is a backdrop root. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
q-web | 6851bf6 | Commit Preview URL Branch Preview URL |
Nov 08 2026, 07:28 PM |
|
Warning The baseline auto-commit did not land (push failed or nothing to commit), so the diff is accurate but not yet committed. See the run log; re-running reconciles. Visual review vs
|
The production build minifies CSS times (150ms becomes .15s) while the dev server keeps them as written. The typewriter, the What's included unfold, the menu's and the compare picker's hide timers read the tokens with parseFloat, so on the preview they ran 1000x too fast: all words at once, no unfold, folds cut short. lib/motion/css-time.ts reads both forms (unit tested), lib/motion/time.ts reads a token through it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch was previously 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 & why
Fixes and the liquid glass motion system for the ticket page, the site header and the home Buy Now, reviewed and approved locally. The full homepage redesign stays paused.
Fixes (5946867)
Glass motion (c21582f), DESIGN.md MOTION-6
lib/motion/glass-press.ts,lib/motion/typewriter.ts, glass and type tokens.Menu fix and clear glass (1b1d6e0)
.nav-glass), links are never clipped and appear once it is open, leave before it folds, and the icon turns with it..nav-bar-glassbecause an element with backdrop-filter is a backdrop root and blocked the menu's blur; the compare sheet's blur moved to a pseudo layer for the same reason.Refs: #
Checklist
payload.config.ts) are called out below; they affect every editor.Docs impact:
apps/web/DESIGN.md(new MOTION-6 with rule index and motion table rows, COMP-1.is-glass, COMP-6 header and menu, TICKETS-1 pickers, names, What's included), tokens intokens.cssandscripts/check/design.mjs.Editor impact: none. No CMS schema or content change; prices, content and buy links unchanged.
Visual: Cloudflare preview https://feat-glass-motion-q-web.q-summit.workers.dev/ . Approved by Kiron on localhost (desktop and phone).
Checks run locally
check:design,check:md,check:spell,check:lint,check:events,check:docs,check:cms-styles, prettier, webastro check+ tsc, web tests,build:fixture, budgets, CMS-mode build against the production CMS: pass. Headless Edge (desktop 1440, phone 390 with touch, keyboard, reduced motion): carousel swipes/arrows/dots without bounce, all 20 compare pairs via the pickers, picker close paths, sticky names, menu rapid toggles and reversals (no orphaned text in ~1,200 sampled frames), typewriter on rapid switches, Buy Now press and navigation.🤖 Generated with Claude Code