Skip to content

feat(landing): hero stats as three same-size 3D coupon models#119

Merged
BSalaeddin merged 1 commit into
devfrom
feat/hero-3d-stats
Jul 24, 2026
Merged

feat(landing): hero stats as three same-size 3D coupon models#119
BSalaeddin merged 1 commit into
devfrom
feat/hero-3d-stats

Conversation

@BSalaeddin

Copy link
Copy Markdown
Collaborator

Reworks the three hero stats from DOM cards into three same-size 3D coupon models in the hero WebGL scene (feedback round 2).

What changed

  • New src/lib/heroStats.ts — single source of truth for the three stats (HERO_STATS), the formatStat helper, and the useCountUp hook. No three import, so it's safe in the main bundle. Consumed by both the 3D scene and the DOM fallback so the two never drift.
  • HeroTicketScene.tsx — adds a row of three same-size 3D caramel-ticket coupons beneath the main model (shared geometry + material family), each with a billboarded drei <Html> label whose number counts up on mount. Group auto-fits the narrow hero column.
  • HeroSection.tsx — the DOM stat cards are now uniform-size and serve as the fallback (mobile / reduced-motion / no-WebGL), cross-fading under the canvas on desktop.

Verified (local, real browser)

  • Desktop light + dark: main coupon + three same-size 3D stat coupons, labels fit on the coupon face, count-up runs, scene retints per theme.
  • Mobile (390px): no canvas mounts; DOM fallback shows the three uniform stat cards.
  • Gates green: tsc, oxlint, eslint, prettier, knip, three-lazy-boundary test, full unit suite (406 tests).

Dev only — no prod changes.

🤖 Generated with Claude Code

@BSalaeddin
BSalaeddin merged commit 5649bd1 into dev Jul 24, 2026
14 of 15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant