💀

The Collection of Pain

💀

A comprehensive catalog of the worst UI patterns ever conceived. Each one more terrible than the last. Use with extreme caution.

🎯
Live Demo

Requires projectile physics to set volume.

audiosliderphysics
vanilla-jscsscanvas
Experience the Pain
📱
Live Demo

Must drag container edges to tilt; ball rolls to value.

sliderphysicstilt
vanilla-jscssaccelerometer
Experience the Pain
🎰
Live Demo

Each digit spins like a slot reel; user must press Set for every digit.

inputslotphone
vanilla-jscssreact
Experience the Pain
🔤
Live Demo

Must catch falling letters to build username and password.

logingamecatch
canvasgame-mechanicsanimation
Experience the Pain
🎤
Live Demo

Must speak credentials instead of typing them.

voicespeechlogin+1 more
speech-recognitionweb-speech-apimicrophone
Experience the Pain
🔥
Live Demo

Must maintain a fire by dragging logs to control volume.

volumefiredrag+1 more
canvasdrag-dropfire-simulationphysics
Experience the Pain
🔧
Live Demo

Must crank handle like old car window to adjust volume.

audiocrankvintage
canvasrotationphysics
Experience the Pain
🎮
Live Demo

Must play a platformer game to enter a phone number.

inputphonegaming+1 more
canvasgamingphysics
Experience the Pain
⚖️
Live Demo

Textboxes tilt and fall if you type too much.

logininputphysics+1 more
reactcss-transforms
Experience the Pain
🎨
Live Demo

Must draw your country's flag for selection instead of dropdown.

drawingcountryflag+1 more
canvasdrawingimage-analysis
Experience the Pain
⚠️
Live Demo

Select your birthdate by dragging the Earth around the Sun.

date-pickerphysicsinteractive
reactframer-motion
Experience the Pain