Design Research Lab
Live POC demos of 2025 design system features — scroll fade-in, hover glow, spotlight cursor, reading progress, typography.
Live demos of the 2025 design system — every effect on this page is driven by _data/design_config.yml. Toggle any flag and push to apply.
Feature Config _data/design_config.yml
| Feature | Flag | Status | Description |
|---|---|---|---|
| Scroll Fade-in | scroll_fade_in | true | IntersectionObserver staggered fade on .interest-item |
| Lab Glow | lab_glow | true | ::after radial-gradient on hover (compositor-only) |
| Sliding Underline | sliding_underline | true | scaleX(0→1) pseudo-element link animation |
| Spotlight Cursor | spotlight_cursor | true | Radial gradient tracks cursor (desktop only) |
| Reading Progress | reading_progress | true | 2px Forest Green bar fixed top |
| Text Scramble | text_scramble | false | ASCII scramble on [data-scramble] — opt-in per element |
Scroll Fade-in IntersectionObserver
Cards below fade in staggered as you scroll. IntersectionObserver + disconnect() on SPA nav.
Card A — first to appear
Fades in with translateY(14px → 0) + opacity(0 → 1) at 360ms ease-smooth. Try refreshing and scrolling slowly.
Card B — staggered +80ms
Each card delays 80ms × index. Configured via fade_stagger_ms in design_config.yml.
Card C — and hover glow
Hover this card. The ::after pseudo-element transitions opacity from 0 → 1 with a radial-gradient glow. No box-shadow (compositor-only = no layout thrash).
Sliding Underline CSS only
Hover links in the paragraph below. scaleX(0→1) from right→left appears, left→right disappears.
Hover this link to the Lab page and this link to Design references to see the animation. Also works on external links like this one. The underline uses Forest Green at 85% opacity (light mode) or the lighter tint (dark mode), driven by --glow-rgb CSS custom property.
Spotlight Cursor ~8 lines JS
Move your mouse anywhere on this page (desktop). A 500px radial gradient follows the cursor at 7% Forest Green opacity — barely perceptible on light mode, slightly stronger on dark.
The spotlight div (#design-spotlight) is injected by design-features.js into the body. Position updates via --mouse-x / --mouse-y CSS custom properties on :root, set on mousemove. Browser composites the radial gradient update efficiently without JS per-frame repaints.
Toggle: set spotlight_cursor: false in _data/design_config.yml to disable.
Reading Progress scroll-driven
The 2px bar at the top of this page tracks scroll position. Scroll down to see it advance.
#reading-progress-bar is injected into body by design-features.js. Width updates on scroll event (passive listener). Resets to 0% on Hydejack SPA navigation.
Text Scramble opt-in · currently off
Hover the heading below. Since text_scramble: false in config, it won't fire. Set to true and push to enable globally.
NeuroAI → hover me when enabled
ASCII chars cycle through αβγδεζηθλμνξπρστφψω∫∇∂√∞≈±→↑ until the original resolves. ~40 lines of vanilla JS.
Typography Enhancement CSS clamp()
The <h1> on this page uses clamp(1.55rem, 1.2rem + 1.8vw, 2.5rem) with letter-spacing: -0.02em. Resize your browser window to see fluid scaling between ~25px (mobile) and ~40px (desktop).
All features are zero-dependency vanilla CSS/JS. Source: _data/design_config.yml → design-init.js → design-features.js + _sass/my-inline.scss.
