“What if we do a comic that could be animated for the web ?”
Ponpon Mania began with that question and with 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: make a comic you can read online, with cute and subtle animations and interactions rendered in WebGL.
The story follows Ponpon, a megalomaniac sheep dreaming of becoming a DJ. It’s a lighthearted narrative about ambition, rhythm, and imagination but more than that, it’s a creative experiment in how a story can unfold on the web and that also can live on paper.
We are Justine Soulié, art director and illustrator, and Patrick Heng, creat…
“What if we do a comic that could be animated for the web ?”
Ponpon Mania began with that question and with 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: make a comic you can read online, with cute and subtle animations and interactions rendered in WebGL.
The story follows Ponpon, a megalomaniac sheep dreaming of becoming a DJ. It’s a lighthearted narrative about ambition, rhythm, and imagination but more than that, it’s a creative experiment in how a story can unfold on the web and that also can live on paper.
We are Justine Soulié, art director and illustrator, and Patrick Heng, creative developer. We co-wrote the story together, blending 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 motion and shaders.
Our goal was to bring the charm of traditional comics into an interactive space, where each panel feels alive and every scene responds to the reader’s curiosity. The result is a world that blurs the line between reading and exploring, a comic that doesn’t just tell a story, but 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 approachable, using design to support the story rather than distract from it. On the homepage, we aimed for a simple, welcoming composition that immediately draws the user in, offering interactive elements to explore and encouraging engagement from the very first moment.
We worked closely on the story together. Justine began sketching early drafts 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 how transitions between panels would feel.
When everything made sense visually and narratively, a vector version was created in Illustrator. This version became the foundation for development, every element was carefully separated and exported as textures, ready to be brought to life in WebGL.
The comic is mostly black and white, creating a clear and striking visual foundation. Color appears selectively when our favorite sheep dreams of being a DJ and escapes into his imagined world highlighting these moments and guiding the reader’s attention.
All the panels are animated with some loop animation to make them feel more alive. Scroll-triggered animations help direct focus naturally, while hover effects and clickable details invite exploration without interrupting the narrative flow.
To reinforce Ponpon’s connection to music, we designed the navigation to resemble a music player. Readers move through chapters as if they were albums, with each panel functioning like a song. This structure reflects Ponpon’s DJ aspirations, making the reading experience intuitive, rhythmic, and closely tied 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 rendering. Even though the comic primarily appears in 2D, we wanted the flexibility to introduce depth and subtle shader-based effects that would enhance immersion without breaking the hand-drawn aesthetic.
Starting from Justine’s sketches. Then a cleaned version on Illustrator, we exported each layer and visual element from every panel individually. These assets were then organized into optimized texture atlases using Free TexturePacker, streamlining performance and loading times.
Atlas from texture packer
After export, 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 planes at their correct size and position.
Once assembled in a 3D environment, we applied custom shaders and motion logic to bring each illustration to life while maintaining the charm of the original drawings. We also built a debug view directly into the website, allowing us to place elements visually, fine-tune shader parameters, and adjust animations in real time. Each configuration could be saved as JSON, making it easy to iterate quickly on every panel. This setup greatly simplified the integration process and allowed Justine to contribute directly to the visual refinement without being slowed down by technical constraints.
Technologies
The project was built using a flexible stack designed to give us full creative control over visuals and motion.
At its core, we used OGL as our WebGL framework, a minimal yet powerful library that let us build custom shaders and control every detail of the rendering process.
Nuxt.js handled the site structure and routing, providing a solid foundation for building smooth page transitions and dynamic loading while keeping performance high.
For motion, we relied on GSAP, which offered a precise and intuitive way to choreograph complex animations and transitions across the site.
On the About page, we also used Matter.js to bring a playful touch with small physics-based interactions.
All visual assets were packed with Free TexturePacker to optimize loading times and memory usage. To adjust shaders and motion in real time, we integrated Tweakpane, allowing us to fine-tune parameters directly in the browser.
Finally, Lenis handled smooth scrolling, ensuring the reading experience felt fluid and consistent across devices.
A Collaborative Experiment
Ultimately, Ponpon Mania is the result of two worlds meeting, illustration and creative coding, and the joy of experimenting at their intersection. Every panel, every animation, and every interaction was shaped through this collaboration, pushing us to rethink how a comic can be experienced online. With the foundation now in place, we’re excited to keep expanding Ponpon’s universe and exploring new ways for readers to interact with it.
About Us
Patrick Heng — Freelance Creative Developer based in Paris Portfolio - X/Twitter - Linkedin
Justine Soulié — Art Director & Illustrator based in Paris Portfolio - X/Twitter - Linkedin - Instagram
Ponpon Mania — Follow your new favorite comic Instagram - Tiktok - Tipee