The Polenta Throne: Can You Stir Better Than Your Nonna?

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

For this challenge, I chose a dish that represents the ultimate slow-cooked comfort food: Polenta.

Making a good polenta requires patience, time, and constant stirring. To capture this essence, I built an interactive landing page called "set point." (Orioli Chef) where the user has to physically engage with the page to "cook" the dish.

Instead of a traditional static landing page, I created an immersive, gamified experience. The user must click and drag a wooden spoon to stir the polenta. As you stir, the polenta thickens (the "hardness" level increases), and the process deliberately takes time, mimicking the real-life slow cooking required to reach the perfect "set point" (o ponto da polenta).

It features dynamic UI elements like realistic steam and bubble animations, real-time status updates based on the thickness, and a "social proof" toast notification system to show other users who are also enjoying the slow process.

Demo

🔗 Live Demo

Journey

The journey of building this was focused on translating a physical, analog feeling into a digital interface.

At first, the stirring logic was too fast and even had an automatic "simmering" timer that progressed without the user's input. I realized this defeated the purpose of the comfort food theme! I removed the automatic timers and recalibrated the interaction so that it strictly requires a deliberate "click and drag" to stir. I also replaced a generic cursor with a custom SVG wooden spoon to make it feel more authentic.

What I'm particularly proud of:

• The custom interaction loop that tracks mouse movement (delta X and Y) to calculate the stirring speed and the progressive "hardness" of the polenta.
• The immersive animations (bubbles, steam, and the trail left by the spoon) that make the pot feel alive.
• The cohesive, warm aesthetic that matches the feeling of comfort food.

What I learned:

• How to fine-tune pointer events and animation frames (requestAnimationFrame) to create a smooth, responsive, but intentionally "heavy" drag interaction.
• The importance of pacing in UI design—sometimes making the user work a little harder and slower creates a much more rewarding experience.

---

Credits:
Made with <3 by Carlos Orioli.