Scroll-Snap Active Item

A horizontal snap gallery where the card that is actually centered and snapped lights up — full opacity, scaled up, glowing border — the instant it truly settles there, using the CSS `scroll-state(snapped: x)` container query. Every other card in the row stays dimmed and slightly scaled down until the scroller snaps to it. This is the exact 'which slide is active right now' problem that almost every hand-rolled carousel solves with an IntersectionObserver plus a scroll listener plus a JS class toggle (or a library that does the same under the hood) — here the browser's own scroll-snap machinery answers the question directly, with zero JavaScript. Real, current, cross-checked across independent primary/engineering sources (not a single blog's guess): the same Chrome for Developers 'CSS scroll-state() queries' post already cited in this catalog's Sticky Header entry documents `snapped` as one of the three states (`stuck`/`scrollable`/`snapped`) that shipped together, and two more independent write-ups — ICS MEDIA's 'Using CSS @container scroll-state() for sticky headers and scroll effects' and modern-css.com's 'CSS scroll-state() Container Queries: :stuck and :snapped' — both demonstrate `scroll-state(snapped: x)` specifically for highlighting the currently-snapped item in a gallery, the identical use case built here (independently, not copied from either write-up). **Fresh WebSearch run today to re-confirm the version claim rather than reuse the Sticky Header entry's 2026-09 figure unchecked:** caniuse's own `scroll-state_queries_snapped` page lists Chrome 133–152 and Edge 133–149 as supported, with Firefox (through 154) and Safari (26.3–26.5, Technology Preview still unknown) both still unsupported as of this run — same Chromium-only split already on record for `stuck`, now independently re-verified for `snapped` specifically, not assumed to carry over. **Conflict found and resolved the same way this catalog always resolves one:** a third-party 'CSS scroll state query generator' tool claims the feature needs Chrome 135+; that's outweighed by agreement between caniuse and Chrome's own launch post on 133, so 135 is treated as the tool's own error, not a real alternative baseline. **Real adoption found, logged honestly rather than oversold:** this run's search also turned up a published Nintendo Switch home-screen UI recreation that uses `scroll-state()` to detect and highlight the snapped tile — a genuine real-world precedent for this exact pattern — but that build mixes in some JavaScript elsewhere, so it is cited here as evidence the technique is in real use, not as proof a 100%-CSS version like this one already exists elsewhere. **The same spec gotcha already on record in this catalog applies here too, re-confirmed rather than assumed:** the query cannot restyle the snapped container itself, only a descendant — this demo puts `container-type: scroll-state` on each snap-aligned `.ssi-item` and applies the highlight to its child `.ssi-card`, exactly like the Sticky Header entry's `.ssq-stickwrap`/`.ssq-bar` split. **Honest, safe fallback:** a browser without this feature never matches `@container scroll-state(...)` at all (the whole rule is simply ignored), so this demo's `@supports not (container-type: scroll-state)` block removes the dimming/scaling and shows every card at full opacity — a perfectly usable plain snap-scroll row, never a broken or half-highlighted one. Pure CSS, no WebGL, no scroll-jacking (the user's own scroll/swipe drives it, nothing hijacks the scroll position) — fits the DIY $999 tier's constraint as cleanly as it fits here. Checked for overlap before building: `css-native-carousel` and `scroll-marker-carousel` both generate browser-native prev/next arrows and position dots via `::scroll-button`/`::scroll-marker`, a different mechanism entirely (nav chrome generation, not active-item detection), and `sticky-header-scroll-state` uses the `stuck` state, not `snapped` — genuinely a new technique, not a tweak to an existing entry. (Vanilla example: live iframe preview + HTML/CSS tabs — scroll the row; the centered card is the one the CSS itself knows is snapped.)

<div class="ssi-row">
  <div class="ssi-item"><div class="ssi-card"><span class="ssi-num">01</span><span class="ssi-label">Aurora</span></div></div>
  <div class="ssi-item"><div class="ssi-card"><span class="ssi-num">02</span><span class="ssi-label">Shimmer</span></div></div>
  <div class="ssi-item"><div class="ssi-card"><span class="ssi-num">03</span><span class="ssi-label">Magnetic</span></div></div>
  <div class="ssi-item"><div class="ssi-card"><span class="ssi-num">04</span><span class="ssi-label">Spotlight</span></div></div>
  <div class="ssi-item"><div class="ssi-card"><span class="ssi-num">05</span><span class="ssi-label">Liquid Glass</span></div></div>
</div>
<span class="ssi-note">Needs Chrome/Edge 133+ — elsewhere every card just stays at full opacity in a plain snap row</span>