State-Aware Product Cards

Using the CSS View Transitions API to animate product cards between states (grid → detail, selected → expanded) with smooth, browser-native transitions. Demonstrated by Jhey Tompkins (@jh3yy).

The Pattern

State-aware product cards use the CSS View Transitions API to create smooth animations when a product card changes state - from a grid thumbnail to a detail view, from collapsed to expanded, or from browsing to selected. The browser handles the interpolation between states natively, avoiding JavaScript animation libraries for what is fundamentally a transition between two DOM states. Source: X/@jh3yy, 2026-04-08

The approach treats each card as a view transition participant. When state changes, the View Transitions API captures the before/after snapshots and animates between them. This produces the kind of spatial continuity that users associate with native apps - the card doesn't jump-cut to a new view; it flows there.

Why It Matters

View Transitions are the CSS platform's answer to what previously required Motion (Framer Motion) layoutId animations or GSAP Flip plugin. The browser-native approach means zero JavaScript animation overhead for state transitions, automatic handling of cross-document navigations (MPA mode), and progressive enhancement (falls back to instant state change in unsupported browsers).

Jhey Tompkins (@jh3yy) is a CSS/creative coding authority at Google. His 3,976 likes / 4,355 bookmarks on this demo indicate strong community interest in the pattern as a production technique, not just a CSS experiment.

Implementation Notes

The View Transitions API requires document.startViewTransition() for SPA mode or the @view-transition CSS at-rule for MPA mode. Key properties: view-transition-name (unique per element), view-transition-class (shared animation groups), ::view-transition-old() / ::view-transition-new() pseudo-elements for custom animation control.

Jhey's self-thread gives the implementation decision the first pass missed: preload the candidate images, then change the image src inside document.startViewTransition(). That keeps the DOM/state model direct and lets the browser animate between the before/after snapshots. The older reference approach loaded all images and toggled opacity, which works visually but creates extra DOM, extra image memory, and a less honest state model. Source: X/@jh3yy self-thread, 2025-12-21

The reviewed video shows light/dark and product-selection changes on the same card system. The reusable pattern is a state matrix: product, theme, media, and copy all change together while the card remains spatially continuous. This belongs in product and frontend packs because it is both an implementation technique and a workflow-quality pattern for commerce/product UI. Source: local video review of X/@jh3yy, 2025-12-21

---

Timeline

• 2025-12-21 | @jh3yy demo: "state-aware product cards" using View Transitions. Self-thread says to preload, then swap image src inside a view transition; CodePen resolved to https://codepen.io/jh3y/pen/VYjZKqp. Source: X/@jh3yy, 2025-12-21
• 2026-07-01 | Repaired local media and deep-reviewed the video artifact. Promoted the state-matrix lesson into frontend/product packs. Source: local media review, 2026-07-01