Can your vibe coded 404 page beat my vibe coded 404 page? ;) — Vibe Coding Project

Have fun playing with it! :) Let's see who has the best vibe coded 404 out there?

I built an interactive 404 page with a cloth physics simulation using Three.js and Verlet integration.

I wanted to transform the typical dead-end 404 error into a tactile, interactive experience. I built a 3D thermal receipt simulation where users can drag the paper, watch it ripple with wind, and interact with the mesh in real-time. It uses a custom physics solver rather than a heavy engine to keep the performance high on mobile devices.

The Tools Used

Three.js: For the WebGL rendering and scene management.
Verlet Integration: A custom physics implementation for the cloth/paper particles.
Canvas API: Used to procedurally generate the receipt texture, including the current date and the requested missing URL.
Tailwind CSS: For the minimal UI overlay and typography.

Process & Workflow

The project started with a high-density PlaneGeometry (38x58 segments). I treated every vertex as a "particle" in a Verlet system. Each particle tracks its current and previous positions to calculate velocity without storing it explicitly. To make the mesh behave like paper, I implemented a series of constraints. Beyond the basic adjacent particle constraints, I added structural and shear constraints to maintain the rectangular shape of the receipt while it's being manipulated.

For the texture, I didn't want to use a static image. I used a hidden 1024x1800 canvas to draw the receipt text, lines, and the "jagged" bottom edge using destination-out compositing. This canvas is passed into a THREE.CanvasTexture, which allows the 404 message to be dynamic and context-aware based on the user's requested path.

Code & Design Insights

A major technical challenge was preventing the paper from feeling like a wet rag. Traditional cloth simulations are too soft. To simulate paper stiffness, I added "bending constraints" that connect every second and fourth particle in the grid. By adjusting the stiffness scalar on these long-distance constraints, I could control the paper's resistance to folding.

I also used a custom MeshDepthMaterial with an alphaTest of 0.5. This was necessary because the receipt has a jagged, torn-off bottom edge. Without the custom depth material, the shadow cast on the "floor" would remain a perfect rectangle instead of reflecting the torn geometry of the paper.

Project Link

https://arcade.pirillo.com/404.html

Built with Gemini 3.1 Pro, largely.

100% Inspired by a video from flornkm on X, created from scratch from that.

Everything begins with understanding.