WePackaging
PACKAGING & BRANDING
My role
Sole developer — all website programming
Built with
- Next.js
- React
- TypeScript
- Three.js
- Lenis
A website for a branding and packaging studio, with an interactive 3D gallery at its centre. I handled all programming, including the motion and scrolling that shape how visitors explore the work.
Development notes
Making scrolling feel natural
The most demanding part of this project was getting the physics and scrolling to feel right. Motion is central to the way visitors move through the studio’s work.
The interaction
I built a Three.js scene with project cards arranged in a rotating gallery. Scrolling and dragging move through the work, while selecting a card opens its project page.
The implementation
The motion uses time-based damping, decaying rotational velocity, and card bending linked to scroll speed. Wheel input and pointer dragging feed the same scene, with limits on input strength and rotation speed.
Beyond the animation
The implementation includes reduced-motion behaviour and a project-list fallback when the 3D scene cannot load. The work stays reachable even when the animated experience is unavailable.
See it in action
On the live site, move past the opening title, scroll or drag through the gallery, and select a project.
Explore the live website