Cinematic site · the saga told through scroll
ONE PIECE
Problem
Anime content on the web almost always turns into a wiki list: lots of information and zero emotion. Nobody feels the journey that made the work what it is.
Solution
A single page that tells the One Piece story: the opening scene follows the scroll, and from there the site crosses the Age of Pirates, introduces the Straw Hats, draws the route to the end of the map and keeps the lines every fan knows. All animated in code, no heavy video.
Fan project, unaffiliated with the rights holders.
How it was built
The site opens on a scroll-controlled scene: nothing plays on its own, the visitor's finger pulls the story forward. That choice defines the rest of the page, because it turns reading into a crossing. GSAP with ScrollTrigger drives the transitions and Lenis smooths the scroll so the animation never stutters.
The content follows the logic of the source: Roger's execution ignites the Age of Pirates, each Straw Hat lands with their own weight, the route draws the path to the end of the map, and the lines every fan knows get room to breathe. It's a fan project, built to show how much a single page can carry when code plays the role of a trailer.
More screens
Stack
- Next.js
- TypeScript
- Tailwind
- GSAP
- Lenis