Make cafe pass a single-line marquee

[changeroa]

Summary

• change the visit page Cafe pass from a wrapping step row into a single-line CSS marquee
• duplicate the visual steps with aria-hidden copies so the marquee loops without repeating content to assistive tech
• add a clipped marquee viewport so the moving track cannot overlap the Cafe pass label

Verification

• npm test
• npm run build
• node --check visit.js && node --check guestbook-client.js
• Playwright browser QA on a clean worktree at 375px, 768px, and 1280px confirmed one-line layout, no page overflow, active pass-marquee transform animation, hidden duplicate steps, and reduced-motion disabling

[vercel]

Someone is attempting to deploy a commit to the koomook's projects Team on Vercel.

A member of the Team first needs to authorize it.

[gemini-code-assist]

Code Review

This pull request replaces the horizontal scroll-based layout of the "Cafe pass" section with a continuous CSS marquee animation. This is achieved by wrapping the list in a marquee container, duplicating the steps with aria-hidden="true" for visual continuity, and adding keyframe animations. The review feedback points out a visual jump during the marquee loop animation caused by a width mismatch between the original and duplicated steps (due to the :not(:last-child) selector on connectors and the flex container gap). It is recommended to use uniform margins instead of flex gaps and to apply connectors to all items to ensure a seamless loop, along with updating the corresponding test assertions.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Visual Jump in Marquee Loop

There is a subtle but noticeable visual jump/jitter when the marquee animation loops (resets from translateX(-50%) to translateX(0)). This is caused by a width mismatch between the first half (original steps) and the second half (duplicated steps) of the marquee list:

1. Connector Mismatch: Using .hero-pass li:not(:last-child)::after means the 6th item (last child of the ol) does not get a connector, but the 3rd item (last item of the first half) does. This makes the first half wider by exactly one connector width (1.45rem plus margins).
2. Gap Mismatch: Using gap: 0.5rem on the flex container (ol) means the first half contains 3 gaps (between 1-2, 2-3, and 3-4), while the second half only contains 2 gaps (between 4-5 and 5-6). This introduces another 0.5 * gap (0.25rem) mismatch.

Combined, this causes a visual jump of nearly 1rem when the animation loops.

Solution

• Remove gap: 0.5rem from .hero-pass ol and instead use margin-right: 0.5rem on .hero-pass li to ensure uniform spacing.
• Change .hero-pass li:not(:last-child)::after to .hero-pass li::after so that every item has a connector. The trailing connector on the last item will be cleanly clipped by the container's overflow: hidden and ensures a mathematically perfect, seamless loop.

.hero-pass ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: max-content;
  margin: 0;
  padding: 0;
  animation: pass-marquee 22s linear infinite;
  list-style: none;
  will-change: transform;
}

.hero-pass:hover ol {
  animation-play-state: paused;
}

.hero-pass li {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.42rem;
  margin-right: 0.5rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.hero-pass li::after {
  width: 1.45rem;
  height: 1px;
  margin-left: 0.15rem;
  content: "";

[gemini-code-assist]

Update the test assertion to match the updated CSS rule (.hero-pass li::after instead of .hero-pass li:not(:last-child)::after) to support the seamless marquee loop fix.

assert.match(css, /@keyframes\s+pass-marquee[\s\S]*translateX\(-50%\)/, 'hero pass marquee should loop over the duplicated track');
assert.match(css, /\.hero-pass li::after[\s\S]*linear-gradient/, 'hero pass flow should visually connect steps across the row');
assert.doesNotMatch(css, /\.hero-pass ol\s*\{[^}]*flex-wrap:\s*wrap/, 'hero pass track should not wrap into multiple rows');