Qentrah
Projects
Guides

Behaviour layer

View as Markdown
filewhat it does
components/wire.tsmega-menu (hover/click/Escape), FAQ accordion, country selector
components/animations.tshero state machine, stats marquee, rating roll-up, scroll reveals

All of it mirrors nsave's own implementation rather than approximating it:

  • the hero is the original hero-load--pending/--animating/--settled CSS machine, settled after the durations declared in its own --hero-*-ms custom properties;
  • the stats strip uses nsave's stats-marquee-ltr keyframes and --marquee-distance;
  • the mega-menu animates the CSS translate/opacity properties (the utilities it names, like translate-y-[32px], are not in nsave's stylesheet, so inline styles are what the live site actually animates);
  • rating digits roll up from translateY(calc(0 * 1lh)) to the value nsave server-rendered, driven by the enclosing section entering the viewport;
  • reduced-motion is respected (marquee and reveals switch off, as in nsave's CSS).

Source captured: 2026-10-11