A case study on how motion, interaction, and scroll-driven design turned the Exat microsite into an expressive showcase for contemporary type.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

Studio Size built the Exat microsite as a scroll-driven, interactive typography showcase for Hot Type's 21-style variable font inspired by Croatian modernism. The case study details key design and technical decisions: a proximity-based glyph grid that shifts font weight and color based on cursor distance using Euclidean distance calculations, scroll-pinned panels for weight comparison, sine-wave motion tied to scroll speed, and real-time variable font morphing on hover. The tech stack includes GSAP with ScrollTrigger and SplitText, Lenis for smooth scrolling, and WordPress with ACF. Performance was treated as a design constraint, with off-screen animations paused and mobile interactions simplified.

The Exat Microsite: Pushing a Typography Showcase to New Creative Extremes