This is a submission for the DEV April Fools Challenge
What I Built
Pour Decisions — an interactive anti-game where you try to pour tea into a teapot… that absolutely refuses to cooperate.
It starts like a calm, elegant tea ritual.
Soft colors. Peaceful vibe. Simple task.
Then the teapot moves.
Then it runs.
Then it judges you.
The entire experience is designed to feel:
Almost doable
Slightly unfair
Increasingly ridiculous
There is no real “win”.
Only effort.
And regret.
Demo
🌐 Live Demo: https://pourdecision.netlify.app/
Try it yourself… if you think you can beat a teapot.
Code
💻 GitHub Repo: https://github.com/aisyahz/Pour-Decision
How I Built It
This project is a mix of UI playfulness, real-time interaction, and just enough chaos to make users question their life choices.
Tech Stack
React 19 (functional components + hooks)
Vite for fast dev/build
TypeScript
Tailwind CSS 4 for styling
motion/react for smooth, physics-based animations
Lucide React for icons
canvas-confetti for the fake “victory”
Key Technical Ideas
🫖 Teapot Avoidance Logic
The teapot constantly tracks the cursor position and moves away when you get close.
Global mousemove listener
Distance-based reaction
Increasing difficulty (aka frustration scaling)
☕ Pouring System
Click and hold = pouring tea.
State-driven pouring (isPouring)
Interval loop updates progress + triggers effects
Tea stream rendered via SVG/Canvas component
🔊 Procedural Audio (no files!)
Used the Web Audio API to generate sound in real-time:
OscillatorNode
GainNode
So the pouring sound is actually synthesized, not imported.
🎬 Animation System
Using motion/react:
Spring-based transitions (for smooth but playful movement)
AnimatePresence for UI elements appearing/disappearing
Teapot movement feels slightly alive (and annoying)
🧠 State & “Frustration Engine”
Tracked things like:
Mouse position
Pouring state
Progress
Hidden “frustration level”
As frustration increases:
Teapot reacts faster
UI becomes less trustworthy
Success becomes… questionable
🎨 Design Language
Theme: Elegant Frustration
Soft tea-inspired palette (porcelain, tea-brown, warm tones)
Serif typography → feels calm & refined
But behavior → chaotic, uncooperative, slightly evil
The contrast is the joke.
Prize Category
🏆 Community Favorite
Because this is:
Highly relatable (we’ve all fought UI like this)
Shareable (“I lost to a teapot” energy)
Simple concept, but strong emotional reaction (frustration + laughter)
Also… I think everyone deserves to experience being outplayed by a teapot at least once.
Final Thoughts
This project is basically a tribute to:
forms that almost submit
buttons that move away
bugs that disappear when you debug
and systems that almost work
You did everything right.
Productivity: 0%.
If you tried it…
be honest:
Did you actually think you could win? 😭
Top comments (0)