009 · PROJECT
Summer Drive
A POSTER-STYLE SCROLL STORY FOR A FICTIONAL ARTIST PLATFORM
CREATE WITHOUT LIMITS. ART FIRST, ALWAYS.
OVERVIEW
Summer Drive is a one-page manifesto for an imagined artist-first platform, told as five full-screen acts. The art direction borrows from Studio Freight's "The Summer Drive" event poster (a strict two-tone system of cobalt on warm cream, condensed all-caps display type, hairline rules and outlined pill buttons) and treats the whole page like a stack of printed posters rather than a website.
The scroll mechanic is the piece. Each section pins to the viewport when its bottom meets the fold, and the next act enters rotated thirty degrees from the bottom-left corner, scrubbing flat as you scroll, like a new poster being slapped over the last one. Because the reveal lives on the diagonal seam between panels, the palette alternates cream and cobalt on every boundary so the edge always reads at full contrast.
Type does the heavy lifting: Anton at up to 12rem for the act titles, Plus Jakarta Sans for everything else, with the copy scale, rules and spacing all fluid via clamp(). The whole thing collapses to a clean single column on mobile and disables the choreography entirely under prefers-reduced-motion, falling back to a straightforward scroll.
HIGHLIGHTS
- Pin-and-rotate scroll choreography: sections pin with ScrollTrigger, each new act scrubs in from 30° at the bottom-left, z-index stacking the reveals like layered posters
- Two-tone poster system: cobalt #1A3DE8 on cream #F5F0E8, alternating every section so each diagonal reveal lands on full contrast
- Poster-faithful hero: centered condensed headline flanked by small metadata columns and an outlined pill CTA, with a spread word-band between hairlines
- A schedule-table act for the six product steps, lifted straight from the reference's event-timetable layout
- Fluid everything: display type from 3.5rem to 12rem via clamp(), vw-based rules and gutters, explicit single-column mobile collapse
- prefers-reduced-motion support baked into the component: the rotation and pinning shut off, content stays fully readable
STACK
Next.js 16 · TypeScript · Tailwind CSS 4 · GSAP ScrollTrigger + @gsap/react · next/font (Anton, Plus Jakarta Sans) · Vercel
CREDITS
Art direction referenced from "The Summer Drive" by Studio Freight for Drive Capital, reinterpreted for a fictional brand as a non-commercial scroll study. The layout system, copy, palette application and build are my own.