Level Up! Dominate The Game.

Trade-offs

Recommendation

C · Headline carries the most v2 brand voice — it reuses the per-word outline mechanic that already runs the hero, link pills, and stat eyebrows. A · Index is the safest mid-density alternative if Bulevar at headline scale per row is too loud. B · Stripe works best on dense FAQ pages (10+ items) where you want a "settings list" feel.

Common contract

All three use native <details> markup — no JS required. Toggle the demos to verify behaviour. Once you pick, we'll port through home / profile / light / bg variants.

When to use

✓ Live countdowns (hero, presale, launch banners).
✓ Stats on profile / member pages — first-time arrival flourish.
✓ Anything mechanical: money tracked, votes counted, room capacity.

When not to use

✗ Pure body copy — Bulevar at small sizes already provides display energy.
✗ Inputs / form fields — flaps imply read-only.
✗ More than one large-scale ticker per page (small-scale strips can repeat).

API

Markup — each card carries a static top + bottom half and an animating top-flap leaf.

<span class="flap-lg" data-d="9">
  <span class="half top"><span>9</span></span>
  <span class="half bottom"><span>9</span></span>
  <span class="flap-leaf"><span>9</span></span>
</span>

Small-scale hydration — render flaps from a string.

<span class="stat-flaps" data-value="£820k"></span>

States

Rules

1 · Scope the overrides to .site-nav .row .brand-logo so the body-level 96px .brand-logo--lg demos aren't affected.
2 · Don't animate the position: sticky itself — only the inner padding + logo size change.
3 · Keep the threshold low (24px) so the shrink fires inside the first scroll gesture.

CSS contract

.site-nav .row {
  padding: 18px 0;
  transition: padding 220ms ease;
}
.site-nav .row .brand-logo {
  transform: translate(-6px, 6px);
  transition: transform 220ms ease;
}
.site-nav .row .brand-logo img {
  height: 72px;
  transition: height 220ms ease;
}
.site-nav.is-scrolled .row { padding: 12px 0; }
.site-nav.is-scrolled .row .brand-logo {
  transform: translate(0, 0);
}
.site-nav.is-scrolled .row .brand-logo img {
  height: 36px;
}

JS contract

(function () {
  var nav = document.querySelector('.site-nav');
  if (!nav) return;
  function update() {
    if (window.scrollY > 24) nav.classList.add('is-scrolled');
    else nav.classList.remove('is-scrolled');
  }
  update();
  window.addEventListener('scroll', update,
    { passive: true });
})();