Projapoti Anime Studio — Immersive Web Experience

Case Study / Technical Art Direction

The Vision Projapoti isn't merely a website—it's a living, breathing cinematic portal. Inspired by the metamorphosis of its namesake (the Bengali word for butterfly), the experience mirrors the studio's ethos: transformation through motion, beauty through technical precision, and worlds born from code.

Technical Execution Built atop a custom WebGL pipeline, the experience leverages Three.js with hand-authored GLSL shaders to create a fluid, scroll-driven journey where a procedurally animated butterfly serves as the user's guide through layered anime universes. Each project reveal is masked through custom fragment shaders, transitioning between cinematic stills with painterly dissolves rather than hard cuts—evoking the feeling of flipping through a living storyboard.

The butterfly itself is a rigged Blender animation exported as a skeletal mesh, with vertex shaders handling wing flutter dynamics in real-time, responding to scroll velocity and cursor proximity. Advanced noise functions drive atmospheric particle systems, while post-processing passes add chromatic aberration and film grain that shift intensity based on the narrative beat.

The Contra Where typical studio sites rely on static portfolios and templated grids, Projapoti demands engagement. There is no passive consumption—only immersion. The interface dissolves the boundary between UI and environment. Navigation isn't a menu; it's a flight path. Typography doesn't sit on top of the experience; it exists within the atmosphere, refracting through the same light models that illuminate the characters.

Recognition-Worthy Details

Custom Shader Pipeline: Every transition is a unique GLSL composition—no stock fade-ins.

Physics-Responsive Animation: Scroll inertia directly influences wing-beat frequency and environmental parallax.

Cinematic Color Grading: Per-scene LUTs embedded in fragment shaders ensure each anime world maintains its distinct emotional palette.

Zero-Compromise Performance: Despite heavy WebGL lifting, the experience maintains 60fps through aggressive frustum culling and LOD-managed geometry.

Result A site that doesn't just show anime—it becomes anime. Projapoti proves that a development studio's digital presence can be as meticulously crafted as the worlds they create for the screen. This is web development treated as animation production: storyboarded, shaded, rigged, and rendered frame by frame in the browser.