DESCRIPTION
Wispr Flow's marketing site features scroll-driven product demos: pinned sections where cards morph, hand off into feature tabs and play the product UI as you scroll. I was brought in by N4 Studio to build and ship the animations across the home, Notetaker and Business pages.
MY ROLE
Built the scroll sequences, feature tabs, languages section, testimonial slider and the Notetaker and Business hero animations in vanilla JavaScript and GSAP. Also built every piece of product UI inside them in HTML and CSS: transcripts, chat cards, composers, pills. Worked with N4's design and dev team through to final delivery.
CONCLUSION
Shipped the scroll-driven layer of Wispr Flow's marketing site across three pages: a voice product explained without a single video, in plain JavaScript and GSAP with one image shader, and still fully editable in Webflow.
Built with N4 Studio
See it live
↳ wisprflow.ai
MeTHOD
Each sequence is one pinned GSAP ScrollTrigger timeline, with timing measured from the live layout instead of hard-coded. The product UI inside them is real HTML and CSS, no video, and the scripts hook on via data attributes so the markup can change without touching the code.
The image melt between tabs is a small raw-WebGL displacement shader, no Three.js, with a crossfade fallback. The curved marquee text is SVG text on a path, moved by scroll, with a separate code path for Safari.
Mobile gets its own stacked layout. Everything rebuilds through gsap.matchMedia across breakpoints, with normalizeScroll keeping touch scrolling smooth.
View more
Webflow
