“What if we make a comic that can be animated for the web?”
Ponpon Mania started with that question and our shared love for comics and interactive experiences. We wanted to create something fun together, something that combined illustration and web technology in a playful way. The idea was simple: create a comic you can read online, with cute and subtle animations and interactions rendered in WebGL.
The story follows Ponpon, a megalomaniac sheep who dreams of becoming a DJ. It’s a light-hearted story about ambition, rhythm and imagination, but more than that, it’s a creative experiment in how a story can unfold on the internet and also live on paper.
We are Justine Soulié, art director and illustrator, and Patrick Heng, creative developer. We wrote the story together, combining our two worlds, design and creative coding to bring Ponpon’s quirky universe to life. Justine shaped the visual tone and characters, while Patrick translated that vision into interactive experiences through movement and shaders.
Our goal was to bring the charm of traditional comics into an interactive space, where every panel feels alive and every scene responds to the reader’s curiosity. The result is a world that blurs the line between reading and discovery, a comic strip that not only tells a story, but also lets you play with it.
Creative direction
Our visual direction emphasizes clean layouts, bold colors and playful details.
From the start, we wanted the comic to feel vibrant and accessible, using design to support the story rather than distract from it. On the homepage, we aimed for a simple, inviting composition that immediately draws the user in, provides interactive elements to explore and encourages engagement from the first moment.
We worked closely on the story together. Justine began sketching initial sketches on paper to explore the composition and flow of each panel. These sketches helped us agree on what would be animated, how elements would move, and what transitions between panels would feel like.
Once everything was right visually and narratively, a vector version was created in Illustrator. This version became the basis for development, each element was carefully separated and exported as textures, ready to be brought to life in WebGL.
The comic is largely black and white, creating a clear and striking visual base. Color appears selectively when our favorite sheep dreams of being a DJ and escapes into his imaginary world, highlighting these moments and guiding the reader’s attention.
All panels are animated with some loop animations to make them feel more alive. Scroll-activated animations help direct focus naturally, while hover effects and clickable details invite exploration without interrupting the story flow.
To strengthen Ponpon’s connection to music, we designed the navigation to resemble a music player. Readers flip through the chapters as if they were albums, with each panel functioning as a song. This structure reflects Ponpon’s DJ aspirations, making the reading experience intuitive, rhythmic and closely linked to the story.
Technical approach
Our main goal was to minimize technical friction so we could focus our energy on refining the artistic direction, storytelling, motion design, and overall experience of the website.
We chose WebGL for its creative freedom and control over the display. Although the comic appears primarily in 2D, we wanted the flexibility to introduce depth and subtle shader-based effects that would increase immersion without breaking the hand-drawn aesthetic.
Starting from Justine’s sketches. Then a cleaned up version in Illustrator, we exported each layer and visual element separately from each panel. These assets were then organized into optimized texture atlases using Free TexturePacker, streamlining performance and loading times.
After exporting, the textures were further compressed into GPU-friendly formats to reduce memory usage. Using the data generated by the packer, we reconstructed each scene directly in WebGL by generating patches of appropriate size and position.
Once mounted in a 3D environment, we applied custom shaders and motion logic to bring each illustration to life, while retaining the charm of the original drawings. We’ve also built a debug view right into the website, allowing us to visually place elements, fine-tune shader parameters, and adjust animations in real time. Each configuration can be saved as JSON, making it easy to quickly iterate on each panel. This setup significantly simplified the integration process and allowed Justine to contribute directly to the visual refinement without being slowed down by technical limitations.
Technologies
The project was built using a flexible stack designed to give us full creative control over images and movements.
At its core, we used OGL as our WebGL framework, a minimal but powerful library that allowed us to build custom shaders and control every detail of the rendering process.
Nuxt.js took care of the site’s structure and routing, providing a solid foundation for building smooth page transitions and dynamic loading, while keeping performance high.
We relied on movement GAPwhich provided a precise and intuitive way to choreograph complex animations and transitions across the site.
We also used on the About page Matter.js to add a playful touch with small physics-based interactions.
All visual assets are packed with Free TexturePacker to optimize load times and memory usage. To adjust shaders and movement in real time, we integrated Tweakpane, allowing us to fine-tune parameters directly in the browser.
Finally, Soft scrolling handled smoothly, making the reading experience feel fluid and consistent across all devices.
A collaboration experiment
Ultimately, Ponpon Mania is the result of the meeting of two worlds: illustration and creative coding, and the joy of experimentation at their intersection. Every panel, every animation and every interaction was shaped by this collaboration, pushing us to rethink how a comic can be experienced online. Now that the foundation is in place, we’re excited to continue expanding the Ponpon universe and exploring new ways for readers to interact with it.
About us
Patrick Heng — Freelance creative developer based in Paris
Wallet – X/Twitter – Linkedin
Justine Soulie — Art Director & Illustrator based in Paris
Wallet – X/Twitter – Linkedin – Instagram
Ponpon mania – Follow your new favorite comic
Instagram – TikTok – Type
#Ponpon #Mania #comic #breathes #web #interaction