Type: Personal Project/Interactive Digital Booklet

Year: 2024

Stack: Next.js, React Three Fiber, GSAP, Lenis, R3F Scroll Rig (14islands), Custom GLSL shaders

A project I’d had in mind for years, with an early concept design to prove it. On the 4th anniversary of Kentarō Miura’s death, I finally built it: an immersive digital booklet tribute that plunges the viewer into the dark mythology, history, and visual language of Berserk — through interactive storytelling, exploring the myth, violence, and legacy of Kentarō Miura’s manga.

Berserk is dense. Its history, mythology, and engraving-like graphic style harbour many secrets. The brief to myself: don't explain it, make people feel it.

48 curated pages structured around 5 pillars:

Raw editorial art direction

High-res manga panels

WebGL + GSAP motion

Cinematic single-page scroll

NSFW-consistent with Berserk's tone

Inspired by editorial print design and the engraving aesthetic of Miura's line work. Typography treated as a structural element, not decoration. Dark palette, high contrast, deliberate whitespace used sparingly.

The core challenge: keeping a live 3D canvas in sync with DOM scroll across a cinematic single-page layout. Used 14islands’ R3F Scroll Rig. Next time: handle the sync layer myself — better for understanding how R3F and Three.js actually work, and gives full control over the scroll/WebGL relationship.

Built GLSL shaders from scratch for image transitions — cycle of violence grid reveal, eclipse opening. Learned shader debugging mid-project.

Since the website relies heavily on images, the preloader serves as a gate until all assets are loaded before revealing the start of the experience — this ensure WebGL textures are already cached and ready to be displayed without delay when scrolling by.

Initial size: 173 Mo of illustrations at launch.

After conversion size: 74 Mo.

Process: I created a custom script to batch convert JPEG/PNG images to WebP format on top of downscaling the max resolution to 1920x1440p to reduce the size with minimal quality loss as the experience is made only for desktop.

Gains:

Faster initial load

Lower bandwidth per user

Better perceived performance

Note:

Vercel's edge request service image optimization reached the limit quickly once the website was shared on GSAP website due to the large amount of traffic, with no incidences here hopefully as I had on-demand set up.

Without compression and twice as much data to load per visitor, by reaching Vercel's limit of optimized images, NO images would be displayed anymore. So all websites hosted from my Vercel account would have been full of broken images.

+2,500 visitors in the first month via GSAP showcase feature

Community response from other devs on socials

Hands-on understanding of DOM/WebGL sync and GLSL shaders — first real dive into both

Handle DOM/WebGL sync myself rather than relying on a library — more control, better understanding of the underlying R3F/Three.js mechanics

Work incrementally and be explicit about what’s core vs. bonus early on — some WebGL effects are still TODO, which was fine for a first project, but naming them as stretch goals from the start removes pressure and keeps scope clear

Integrate WebGL debugging tooling earlier

Framework: Next.js (based on Satus template by Darkroom)

3D / WebGL: React Three Fiber, R3F Scroll Rig (14islands), custom GLSL shaders

Animation / Scroll: GSAP, Lenis

Styling: Custom CSS