Rotating logo in header top-left

Element: HeaderV2 brand logo (resolveLogo(storeRecord))

Source: Sophie Nagano · Jun 11, 4:08 PMTarget build: v241 (shipped)Depends on: none

● Current state — verified on live v230

LIVE: HeaderV2.jsx renders a static store/brand logo via resolveLogo(). No animation.

◎ Target outcome

The top-left logo gently rotates (the Sessions asterisk/wheel), matching the brand motion.

✓ Output — closed & verified

CLOSED & VERIFIED. Header brand finalized. The real 3D rotating Sessions wheel (SessionsWheel3D — extruded favicon, gold, Y-axis spin) IS the favicon, a 34px circle beside the wordmark; the 2D asterisk is hidden. In v241 the store wordmark SVGs are favicon-stripped (the baked Sessions emblem removed on the Windows node — 63 logos, staged by Chat B), so the header now reads [3D wheel] + clean ‘Sessions [Location]’ with no double mark; and mobile (≤767px) = the spinning wheel only (wordmark hidden, wheel bumped to 40px). Desktop Chrome-verified on /v241/; the mobile rule is confirmed in the live CSS bundle.

Assets, colours & references

Sophie's feedback (click to open full)

Sophie feedback page — Sophie feedback · p02

Reference: Sophie's feedback doc — page 2.

Technical steps to achieve it

Wrap the logo mark in a CSS @keyframes spin (slow, ~12s linear, pause on reduced-motion).
Scope to the asterisk glyph only so the wordmark stays upright.
Reuse SessionsWheel3D / SessionsIcons asterisk if a vector is needed.

Files to change

src/components/HeaderV2.jsxsrc/components/HeaderV2.csssrc/components/SessionsIcons.jsx

Testing

Canary: logo rotates; respects prefers-reduced-motion (no spin).

Milestones

✓Spec'd from feedback

✓Source located

✓Code change

✓Local test (vitest + vite preview)

✓Canary verify + ship v241 (shipped)

Verify live

Current (live)v230/Target (on ship)v241 (shipped)/

Progress URL updates here when this task ships to its target /vN/. Current column always points at the live baseline.

← NAV-4 index HOME-2 →