Interaction & Development
May. 2026
ClinIQ
ClinIQ is a trust-led marketing landing for a B2C health product — plain-language lab breakdowns and visit prep, not medical diagnosis. I designed and built the page as one continuous story: intro preloader, hero, pinned How it works, scenario stories, pricing, contact, and an upload block that closes the conversion arc.
Motion carries the narrative without overpowering readability. Lenis handles smooth scroll; GSAP ScrollTrigger drives section reveals, desktop pin on How it works (Upload → Understand → Prepare), and magnetic hover on story cards. Intro and hash navigation use curtain preloaders so jumps to Pricing or Stories land cleanly — no pop-in. The layout respects prefers-reduced-motion so polish stays accessible.
Hero fold — confident health-clarity headline, marquee rhythm, skim-friendly CTA toward upload; calm layout before deeper proof.
How it works — desktop pin scroll walks Upload, Understand, Prepare; step copy and visuals cross-fade as the user progresses.
Stories — scenario cards with CSS-built visuals; magnetic hover on mock UI panels; caregiver and labs narratives for trust.
Pricing — Free and Plus tier cards with scroll reveal; calm copy and footnote disclaimer; conversion without enterprise tone.
Contact — Say hello panel beside email CTA; responsive semicircular arc curves into the dark upload section below.
Upload funnel — stacked file cards, line-style form fields, success state; preloader-toned footer with compliance disclaimer.
Nav menu — sidebar slides in with large section links, dimmed overlay, curved panel edge; FAB opens the same routes after hero scrolls away.