Brand Society
A brand agency website built around motion and page transitions
- Role: Website Development, Animation
- Client: Brand Society
- Visit the website ↗
Overview
A brand agency website where movement is part of the identity.
I developed the Brand Society website from the design by Likely Story. It presents the agency’s work through a motion-rich homepage, an interactive project index and animated transitions between pages.
My role was to turn that visual direction into the complete working site. The build combines a custom motion system with a flexible content model, so the agency can publish new work while the browsing experience remains consistent.
The stack brings together Next.js, TypeScript, Sanity, GSAP and Lenis. I developed the site architecture, CMS integration, interactions and page transitions.
Explore the live site ↗ to interact with the full experience.
01 / Opening & browsing
From first load to the work index
The opening sequence loads selected project images before a GSAP timeline reveals the homepage through an expanding circular mask. It then releases scrolling and lets the motion-led homepage take over.
The “Work +” menu turns the agency’s projects into a continuous index. Visitors browse names and imagery together, then move directly into a project page through a connected transition.
02 / Content system
An editable platform for the agency’s work
The site is built with Next.js, React and TypeScript. Sanity holds projects and reusable page sections; typed GROQ queries turn that content into pages. Static generation serves published work, while draft preview and on-demand revalidation support editing and publishing.
The video component supports HLS playback through hls.js, with native HLS and MP4 fallbacks. Contact requests go through a Next.js API route, with Zod validation in the form and on the server before email delivery through Resend.
03 / Responsive layouts
The same experience, shaped for each screen
The work index moves horizontally on wider screens and becomes a vertical scroll experience in portrait layouts. Project imagery, type and navigation adapt with it, while each case study keeps its full-screen visual introduction.
04 / Motion system
Making movement work across the whole site
I built the project index as a continuous, responsive track. On wider screens it reads wheel and touch input, eases movement on each animation frame and settles on the nearest project. In portrait layouts, the active project follows the vertical scroll position. Its image and background colour update with the selection.
Page changes use React Transition Group and GSAP timelines to coordinate the menu, outgoing page and incoming project hero. Lenis smooth scrolling runs from the GSAP ticker and pauses during transitions, keeping scroll position and animation timing in sync.
