Selling horsepower with CSS: a showcase built for feel.

The brief

Present a motorcycle line-up the way enthusiasts experience it: big imagery, drama, and specs that invite comparison rather than reading. The challenge is that "cinematic" and "fast on a budget phone" pull in opposite directions — the build had to deliver both.

The constraints

• Vanilla stack on purpose: no framework runtime to download — every interaction paid for in hand-written JS and CSS.
• Animation budget: effects restricted to compositor-friendly properties (transform, opacity) so scroll stays smooth off the main thread.
• Dense data, small screens: spec tables that work on a 360px viewport without becoming unreadable.
• Motion accessibility: the drama must switch off cleanly under prefers-reduced-motion.

The build

• Scroll-driven reveals via IntersectionObserver — sections and spec highlights enter as they're reached, no scroll-event thrash, observers disconnected after firing. The same pattern (evolved) runs the reveals on this portfolio.
• Gallery interactions in CSS-first fashion: hover and focus states on transforms, JS reserved for state that CSS can't hold. Keyboard focus mirrors pointer hover throughout.
• Comparison UX: spec rows aligned across models with the differing values emphasised — designing the scan, not just the table.
• Image strategy: sized, compressed, lazy-loaded below the fold; the hero image alone earned eager loading.

The outcome

A quick, stable showcase built entirely with semantic HTML, CSS and a few hundred lines of vanilla JS — still my reference for how much that stack can carry.