Heybox
A creative agency landing page where motion, typography, and performance work as one system.
- Frontend Developer & Designer
- 2025
- In progress
Summary
Heybox is a creative agency landing page I designed and built to showcase what a premium digital studio homepage can feel like in motion. The experience leans on GSAP for scroll-linked and entrance animations, paired with deliberate typography and spacing so every section reads clearly before it moves. Performance and responsiveness were treated as core requirements—not polish at the end—so animations stay smooth, layouts adapt cleanly, and the page remains fast on real devices.
- GSAP scroll and entrance animations tuned for smooth, intentional motion
- Strong visual hierarchy with serif display type and clear content zones
- Responsive layout that preserves rhythm and readability across breakpoints
- Performance-first implementation — lean assets, GPU-friendly transforms, reduced-motion support
Tech stack
Tools and technologies used to design, build, and ship this project.
- React
- Next.js
- TypeScript
- GSAP
- Tailwind CSS
- Figma
Case studies
How we framed the problem, what we tried, and what changed.
01
Motion that supports the story, not the other way around
Agency sites often over-animate. Heybox uses GSAP to guide attention—revealing stats, ribbon graphics, and CTAs in sequence rather than all at once.
- Challenge — Landing pages for creative studios tend to pile on effects that look impressive in a demo but feel heavy in the browser—janky scroll, layout shift, and motion that competes with the message.
- Approach — I scoped animations around what each section needs to communicate: staggered stat reveals, a flowing ribbon graphic that anchors the hero, and subtle hover states on primary actions. Transforms and opacity lead; expensive properties are avoided. ScrollTrigger timelines are scoped and cleaned up so interactions stay predictable on resize.
- Outcome — A homepage that feels dynamic and crafted while staying performant—motion reinforces hierarchy instead of masking weak layout or typography.
02
Typography and hierarchy as the foundation
Before animation, the page needed a clear type system and spatial rhythm so content worked even with motion turned off.
- Challenge — Agency landings mix brand expression with dense information—location, stats, positioning copy, and multiple CTAs—without turning into visual noise.
- Approach — I established a tight typographic scale: a large serif wordmark for brand presence, restrained sans-serif for navigation and body copy, and high-contrast accent green for actions. Spacing and grid rules keep the nav pill, hero copy, and stats row balanced on wide screens and stacked cleanly on mobile.
- Outcome — A cohesive visual system where responsiveness feels intentional—sections reflow without losing emphasis, and the page reads clearly at every viewport.
Let’s connect
I’m always open to discussing new projects, creative ideas, or opportunities to be part of your visions. Just reach out!