The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
I am gathering cool references for my own work as a Motion Designer, and this one caught my eye this week.
Day 3 of 60-days-collecting-awesome-motion-design-references
I love the way this is designed, based on abstract shapes and concepts with a coding visual language that we are all already familiar with. This is a great reference in this modern era where we deal more and more with products and services that live on the internet, not on a physical product.
This animation was created by Odd Fellows in collaboration with Figma.
60 days of references is a serious commitment. Curious, are you mostly drawn to the same visual language each time, or does it shift a lot depending on the day?
I usually don't stop at 3 breakpoints when building a website.
Most people think about: Mobile, Tablet, Laptop
I like adding one more: Desktop
Because what looks great at 1440px can feel completely different at 1920px...
- The layout gets too wide.
- Spacing starts feeling off.
- Content loses its balance.
So I like testing the system across: Mobile → Tablet → Laptop → Desktop
Not because every website needs exactly 4 breakpoints. But because responsive design isn't about making a few screen sizes work.
It's about making the whole system work.
Follow Rushabh for more website fundamentals, experiments, and things I learn while building for the web.
Wide screens expose spacing issues that laptop previews can hide.
I’ve been razzmatazzing and flibbertigibbeting with Claude Code and somehow ended up with a new yels.dev.
It finally feels like me: simple on the surface, slightly complicated underneath, and very much alive.
You can see who I am, what I do, the work behind Herodot, RaptorLabs, CyberLink Security and Solmint, plus a selection of projects I’ve built across AI, cybersecurity, Web3, product systems, education, archives, and experimental digital spaces.
Built to be explored
The simple-on-the-surface, layered-underneath idea comes through so clearly in the presentation. I especially like how the project archive turns the site into something to explore rather than just a résumé of links.