01 Sector · Region
Case card
Outcome
Outcome-framed, anonymized.
Visual system
Design system
Type scale
Space Grotesk · 600 Display / H1
Space Grotesk · 500 Heading / H3
IBM Plex Sans · 400 Body copy — comfortable, neutral reading.
IBM Plex Mono · 400 01 — Label / Kicker
Color tokens
Components
External read
News card
Curated with a link, no republishing.
Buttons
Connect on LinkedIn Send an email [email protected]
Motion
Five motion states, live. The switch above simulates prefers-reduced-motion for this block only, without touching system settings.
Almost all of it is pure CSS. The one exception is a ~30-line IntersectionObserver fallback (one self-hosted .js file) for browsers without animation-timeline: view(); if JS never runs, this content is still visible by default. Page-to-page transitions use Astro's <ClientRouter />, bundled into an external file (script-src 'self', no inline scripts).
01 — Scroll reveal
Scroll this row out of view and back: the heading and cards rise 16px and fade in, staggered ~60ms apart. With the switch on, it collapses to a plain opacity fade — no movement.
0 1 Sector · Demo
Reveal card 1
Outcome
Underline and lift on hover.
0 2 Sector · Demo
Reveal card 2
Outcome
Underline and lift on hover.
0 3 Sector · Demo
Reveal card 3
Outcome
Underline and lift on hover.
0 4 Sector · Demo
Reveal card 4
Outcome
Underline and lift on hover.
02 — Card hover
Hover any card above: it lifts -4px, a faint accent glow appears, and an underline draws left-to-right beneath the title.
03 — Dynamic button
A restrained, one-shot chromatic-aberration glitch (~250ms, ~2px channel split) that settles on its own. Reference frames below; the real button responds to hover.
Hover to trigger Rest
Hover to trigger Mid-glitch (~32%)
Hover to trigger Settled
04 — Scroll progress
The 2px steel hairline at the very top edge of this page is live — it fills with your scroll position. Tied 1:1 to user scroll, it stays on even under reduced motion.