Design Elements — Interactive
15 mouse and scroll interactive blocks — all different from the first Design Elements page. Each element responds to cursor movement, hover, scroll position, or click. Same instructions: open in Gutenberg, copy the block, paste to target page, delete the blue info box before publishing.
1. Mouse Spotlight Card
Description: Move your cursor over the dark card — a soft radial light source follows your exact mouse position in real time.
Best for: Dark CTA sections, /audit offer card, /protocol access page.
Why it works: Creates mystery and interactivity — users instinctively explore. The spotlight metaphor reinforces focused clarity.
Move your cursor here
Most people are looking
in the wrong place.
The optimization stack shows you exactly where to focus — and the spotlight follows.
Get the stack — free ↗2. 3D Perspective Tilt Card
Description: Move your cursor across this card — it tilts in 3D perspective based on your exact mouse position. Uses CSS rotateX/rotateY driven by relative cursor coordinates.
Best for: Feature cards on /stack, offer cards on /audit, bio card on /about.
Why it works: The 3D effect makes content feel physical and premium rather than flat. Triggers a tactile curiosity response.
Health Performance Audit
A structured look at the full picture.
Labs. Hormones. Sleep. Body composition. Gut health — delivered as a written report and personal Loom walkthrough.
3. Animated Count-Up Numbers
Description: Scroll these numbers into view — they animate up from 0 to their targets with an easing curve. Uses IntersectionObserver + requestAnimationFrame. Fires once.
Best for: Home page stats block, /stack proof section, /audit above the form.
Why it works: Motion makes numbers feel earned. A static “89” is a claim. An animated “0→89” is a demonstration.
4. Magnetic Button
Description: Approach the button with your cursor — it physically pulls toward you, moving proportionally to cursor distance. Snaps back smoothly on mouseleave.
Best for: Primary CTA on any page — use on one key action per page for maximum impact.
Why it works: The magnetic pull makes clicking feel inevitable. Creates micro-delight that makes the site memorable.
5. Mouse-Follow Gradient Section
Description: Move your cursor across this dark section — the radial gradient light source updates to follow your mouse position in real time.
Best for: Dark hero sections on Home, /stack, or /audit. Replace any static full-width dark background.
Why it works: Makes static dark sections feel alive and intelligent. The user feels seen and responded to.
6. Typewriter Text Effect
Description: When scrolled into view this heading types itself out character by character, with a blinking cursor that disappears after completion. Uses IntersectionObserver + recursive setTimeout.
Best for: Key headline sections below the fold — especially effective for positioning statements and /about.
Why it works: Draws the eye and creates anticipation. The reader watches the sentence complete — engagement goes up.
Scroll to reveal
7. Staggered Cascade List Reveal
Description: Each list item slides in from the left with a staggered delay when the list scrolls into view. Uses IntersectionObserver per-item with index-based delay multiplier.
Best for: Module lists on /stack, process steps on /audit, key points on /about.
Why it works: Creates narrative flow — the page reveals information in sequence, not all at once. Feels guided.
Scroll to see cascade
Labs & bloodwork
Metabolic panel, hormones, micronutrients, inflammation markers.
Sleep architecture
REM, deep sleep, HRV, temperature and light protocol.
Hormone optimization
Testosterone, estradiol, cortisol, DHEA — with performance ranges.
Body composition
DEXA, visceral fat, muscle distribution — beyond BMI.
Gut microbiome
Diversity, leaky gut indicators, pathogen load.
8. Hover Tab Switcher (no click)
Description: Hover over any tab label to switch the content panel — no clicking required. Uses mouseenter events. The active indicator updates on hover.
Best for: Feature categories on /stack, what-you-get on /audit, FAQ preview on any page.
Why it works: Lower friction than click-to-switch — users explore more content naturally. Feels effortless and modern.
Sleep architecture
Deep sleep is where growth hormone releases, memory consolidates, and cellular repair happens. The protocol covers timing, temperature, light exposure, and how to read your sleep tracker data for performance.
Hormone optimization
Testosterone, estradiol, cortisol, DHEA-S, IGF-1 — with performance ranges (not just "normal") and lifestyle interventions to move the numbers before considering anything clinical.
Precision nutrition
Not a diet. A framework for understanding which foods affect your biomarkers, how meal timing interacts with hormones, and which supplements actually have evidence for your specific goals.
Training structure
Zone 2, strength frequency, VO2 max protocols, and HRV-based recovery windows — structured around your life, not a generic program. The protocol tells you when to push and when to back off.
9. Scroll Progress Bar
Description: A 3px brand-colored line at the top of the viewport fills left-to-right as you scroll down. Uses a passive scroll listener on window. Place once at the top of any long-form page.
Best for: Long-form pages: /stack (10 modules), /protocol. Paste this block once near the top of the page content.
Why it works: Gives readers a sense of progress and place. Measurably reduces abandonment on long pages by making the end feel reachable.
10. Hover Expand Cards
Description: Cards show a brief summary at rest. Hover reveals hidden detail with a smooth max-height transition. Card also lifts and gains a blue border on hover.
Best for: Module cards on /stack, service cards on /audit, FAQ-style content on any page.
Why it works: Keeps the page scan-friendly while rewarding curious readers. Information density without visual clutter.
Module 01
Labs & bloodwork
Metabolic panel, hormone levels, micronutrient status, inflammation markers — the stack tells you which tests to order and how to read them for performance, not just disease screening.
Module 02
Sleep architecture
REM and deep sleep targets, HRV interpretation, temperature protocol, light exposure timing, and which supplements have evidence for sleep quality. Most people fix 80% of sleep issues with 3 changes.
Module 03
Hormone optimization
Testosterone, estradiol, cortisol, DHEA-S, IGF-1, thyroid panel — with performance reference ranges. Covers lifestyle interventions that move the numbers and when to involve a physician.
11. Click Ripple Effect
Description: Click anywhere in this section to create a ripple wave emanating from your exact click point. Uses dynamically created div elements with a CSS keyframe animation that self-removes after completion.
Best for: Any dark CTA section. Especially effective around buttons and calls-to-action.
Why it works: Satisfying micro-interaction that confirms user input. Makes the page feel alive and responsive.
Click anywhere in this section
Every action
creates a ripple.
So does every optimization. Small changes in the right variables compound fast.
12. Parallax Depth Section
Description: Three layered elements — background ghost text, a heading, and a badge — move at different scroll speeds (slow/medium/fast) as you scroll past, creating physical depth.
Best for: Hero or transition sections on any page. Most impactful when placed near the top, above the fold.
Why it works: Dimensionality signals craft and quality before a word is read. Visitors perceive effort — which translates to trust.
Scroll for depth
The system behind
the result.
13. Text Scramble Reveal
Description: When scrolled into view, the heading scrambles through random characters cycling through each position before settling to the final text. Uses IntersectionObserver + setInterval.
Best for: Key positioning statements, /about signature line, brand headlines where you want visitors to pause and look.
Why it works: Memorable and distinctive — almost certainly unique in the health optimization space. Makes the copy feel earned.
Scroll to decode
Know your numbers.
14. Spotlight Hover Grid
Description: Hover over any card in this grid — that card illuminates fully while all others dim to 35% opacity. Creates instant visual hierarchy through interaction alone.
Best for: Feature grid on /stack, service breakdown on /audit.
Why it works: Helps users focus on one thing at a time while understanding the full scope. Reduces cognitive load naturally.
01
Labs
Bloodwork & biomarkers
02
Sleep
Architecture & recovery
03
Hormones
Performance ranges
04
Nutrition
Precision fueling
05
Training
Zone 2 & strength
06
Gut health
Microbiome & digestion
15. Cursor-Following Tooltip List
Description: Hover any item in this list — a floating card appears near your cursor showing expanded detail. The card updates its content per item and follows your cursor within the section.
Best for: Module list on /stack, service preview on /audit, credential list on /about.
Why it works: Clean and minimal on first glance; richly detailed on exploration. Zero friction, no extra page height.
Hover any item