About us
We’re Justine Soulié (Artwork Director & Illustrator) and Patrick Heng (Artistic Developer), a artistic duo keen about storytelling via visuals and interplay. Justine brings experience in illustration, artwork route, and design, whereas Patrick focuses on artistic improvement and interactive experiences. Collectively, we discover methods to make tales extra playful, immersive, and interesting.
Artwork Course
Our visible route emphasizes clear layouts, daring colours, and playful particulars. From the beginning, we needed the comedian to really feel vibrant and approachable whereas utilizing design to help the story. On the homepage, we aimed to create a easy, welcoming scene that instantly attracts the person in, providing many interactive parts to discover and inspiring engagement from the very first second.
The comedian is usually black and white, offering a easy and placing visible base. Colour seems selectively, particularly when Ponpon desires of being a DJ and is totally immersed in his imagined world, highlighting these key moments and guiding the reader’s consideration. Scroll-triggered animations naturally direct focus, whereas hover results and clickable parts invite exploration with out interrupting the narrative circulate.
To bolster Ponpon’s connection to music, we designed the navigation to resemble a music participant. Readers transfer via chapters as in the event that they had been albums, with every panel functioning like a music. This construction displays Ponpon’s DJ aspirations, making the studying expertise intuitive, dynamic, and intently tied to the story.
Technical Strategy
Our important objective was to scale back technical friction so we might dedicate our vitality to refining the inventive route, movement design, and animation of the web site.
We used WebGL as a result of it gave us full artistic freedom over rendering. Though the comedian has a principally 2D look, we needed the pliability so as to add depth and apply shader-based results.
Ranging from Justine’s illustrator recordsdata, each layer and visible aspect from every panel was exported as a person picture. These property had been then packed into optimized texture atlases utilizing Free TexturePacker.
As soon as exported, the pictures had been additional compressed into GPU-friendly codecs to scale back reminiscence utilization. Utilizing the information generated by the packer, we reconstructed every scene in WebGL by producing planes on the right measurement. Lastly, the whole lot was positioned in a 3D scene the place we utilized the required shaders and animations to realize the specified visible results.
Tech Stack & Instruments
Design
- Adobe Photoshop & Illustrator – illustration and asset preparation
- Figma – structure and interface design
Improvement
- ogl – WebGL framework for rendering
- Nuxt.js – frontend framework for construction and routing
- GSAP – animation library for easy and exact movement
- Matter.js – physics engine used on the About web page
- Free TexturePacker – for creating optimized texture atlases from exported property
- Tweakpane – GUI software for real-time debugging and fine-tuning parameters
Animating utilizing GSAP
GSAP makes it straightforward to animate each DOM parts and WebGL objects with a unified syntax. Its timeline system introduced construction to complicated sequences, whereas combining it with ScrollTrigger streamlined scroll-based animations. We additionally used SplitText to deal with textual content animations.
Residence web page
For the homepage, we needed the very very first thing customers see to really feel playful and vigorous. It introduces the three important characters, all animated, and units the tone for the remainder of the expertise. Each aspect reacts subtly to the mouse: the Ponpon masks deforms barely, balloons collide softly, and clouds drift away in light repulsion. These micro-interactions make the scene really feel tangible and invite guests to discover the world of Ponpon Mania with curiosity and delight. We used GSAP timeline to choreograph the intro animation, permitting us to set off every aspect in sequence for a easy and cohesive reveal.
// Easy repulsion we used for the clouds in our render operate
const dx = baseX - mouse.x;
const dy = baseY - mouse.y;
const dist = Math.sqrt(dx * dx + dy * dy);
// Repel the cloud if the mouse is close to
const radius = 2; // interplay radius
const power = 1.5; // repulsion pressure
const repulsion = Math.max(0, 1 - dist / radius) * power;
// Apply the repulsion with easy spring movement
const targetX = basePosX + dx * repulsion;
const targetY = basePosY - Math.abs(dy * repulsion) / 2;
velocity.x += (targetX - place.x) * springStrength * deltaTime;
velocity.y += (targetY - place.y) * springStrength * deltaTime;
place.x += velocity.x;
place.y += velocity.y;Chapter Choice
For the chapter choice, we needed one thing easy but evocative of Ponpon musical universe. Every chapter is introduced as an album cowl, inviting customers to flick thru them as if flipping via a document assortment. We attempt to have a easy and intuitive navigation, customers can drag, scroll, or click on to discover and every chapter snaps into place for a straightforward and satisfying choice expertise.
Panel Animation
For the panel animations, we needed every panel to really feel alive bringing Justine’s illustrations to life via movement. We spent a variety of time refining each element so that every scene feels expressive and distinctive. Utilizing GSAP timelines made it straightforward to construction and synchronize the completely different animations, retaining them versatile and reusable. Right here’s an instance of a GSAP timeline animating a panel, displaying how sequences may be chained collectively easily.
// Animate ponpons in sequence with GSAP timelines
const timeline = gsap.timeline({ repeat: -1, repeatDelay: 0.7 });
const uFlash = { worth: 0 };
const flashTimeline = gsap.timeline({ paused: true });
operate togglePonponGroup(index) {
ponponsGroups.forEach((g, i) => (g.mesh.seen = i === index));
}
operate triggerFlash() {
const flashes = Math.ground(Math.random() * 2) + 1; // 1–2 flashes
const length = 0.4 / flashes;
flashTimeline.clear();
for (let i = 0; i < flashes; i++) {
flashTimeline
.set(uFlash, { worth: 0.6 }, i * length) // brilliant flash
.to(uFlash, { worth: 0, length: length * 0.9 }, i * length + length * 0.1); // fade out
}
flashTimeline.play();
}
ponponMeshes.forEach((ponpon, i) => {
timeline.fromTo(
ponpon.place,
{ y: ponpon.initialY - 0.2 }, // begin barely beneath
{
y: ponpon.initialY, // bounce up
length: 1,
ease: "elastic.out",
onStart: () => {
togglePonponGroup(i); // present energetic group
triggerFlash(); // set off flash
}
},
i * 1.6 // stagger delay between ponpons
);
});About Web page
On the About web page, GSAP ScrollTrigger tracks the scroll progress of every part. These values drive the WebGL scenes, controlling rendering, transitions, and digicam motion. This ensures the visuals keep completely synchronized with the person’s scrolling.
const sectionUniform = { progress: { worth: 0 } };
// create a ScrollTrigger for one part
const sectionTrigger = ScrollTrigger.create({
set off: ".about-section",
begin: "prime backside",
finish: "backside prime",
onUpdate: (self) => {
sectionUniform.progress.worth = self.progress; // replace uniform
}
});
// replace scene every body utilizing set off values
operate updateScene() {
const progress = sectionTrigger.progress;
const velocity = sectionTrigger.getVelocity();
// drive digicam motion with scroll progress
digicam.place.y = map(progress, 0.75, 1, -0.4, 3.4);
digicam.place.z =
5 + map(progress, 0, 0.3, -4, 0) +
map(progress, 0.75, 1, 0, 2) + velocity * 0.01;
// refined velocity suggestions on ponpon and digicam
ponpon.place.y = ponpon.initialY + velocity * 0.01;
}Due to the SplitText plugin, we will animate every part title line by line because it comes into view whereas scrolling.
// Break up the textual content into traces for staggered animation
const break up = new SplitText(titleDomElement, { kind: "traces" });
const traces = break up.traces;
// Create a timeline for the textual content animation
const tl = gsap.timeline({ paused: true });
tl.from(traces, {
x: "100%",
skewX: () => Math.random() * 50 - 25,
rotation: 5,
opacity: 0,
length: 1,
stagger: 0.06,
ease: "elastic.out(0.7, 0.7)"
});
// Set off the timeline when scrolling the part into view
ScrollTrigger.create({
set off: ".about-section",
begin: "prime 60%",
finish: "backside prime",
onEnter: () => tl.play(),
onLeaveBack: () => tl.reverse()
});Web page transitions
For the web page transitions, we needed them so as to add a way of playfulness to the expertise whereas retaining navigation snappy and fluid. Every transition was designed to suit the temper of the web page so fairly than utilizing a single generic impact, we constructed variations that maintain the journey contemporary.
Technically, the transitions mix two WebGL scenes collectively utilizing a customized shader, the place the earlier and subsequent pages are rendered and combined in actual time. The animation of the mix is pushed by GSAP tweens, which lets us exactly management the timing and progress of the shader for easy, responsive transitions.
Designing Playful Experiences
Ponpon Mania pushed us to suppose past conventional storytelling. It was a pleasure to work on the narrative and micro-interactions that add playfulness and vitality to the comedian.
Trying forward, we plan to create new chapters, broaden Ponpon’s story, and introduce small video games and interactive experiences inside the universe we’ve constructed. We’re excited to maintain exploring Ponpon’s world and share extra surprises with readers alongside the best way.
Thanks for studying! We hope you loved discovering the artistic journey behind Ponpon Mania and the strategies we used to convey Ponpon’s world to life.
If you wish to observe Ponpon, verify us out on TikTok or Instagram.
You may as well help us on Tipeee!
Justine Soulié & Patrick Heng
