The Daily Panic — panic.design

A editorial webpage having an existential crisis. Catch, drag, and re-pin falling webpage assets before structural gravity tears this sleek newspaper grid completely apart.

Comment

NOTE: for a better experience this website you should zoom out to 80% on mac, press cmd and minus symbol (-) two times on windows, press ctrl + minus symbol (-) two times OR play it full screen

Inspiration

Most web design portfolios are rigid, pristine, and frankly, a bit boring. When we looked at the domain panic.design, we didn’t just see a name—we saw a challenge. What if a beautifully structured, elegant newspaper layout was secretly terrified of physics? We decided to create a literal interpretation of the domain: an arcade-style, high-stress asset management simulation where a pristine digital layout physically panics, unravels, and collapses under the weight of leaking system gravity.

What it Does

panic.design (or The Daily Panic) is an addictive web game masquerading as a premium editorial publication. Players look at a beautiful, multi-column newspaper grid that instantly begins to deteriorate. Random modules flash bright red before losing their structural anchors and falling into a chaotic physics sandbox. The player must frantically click and drag elements back toward their baseline tracking arrays, right-clicking to re-pin them into place. If the layout structural density drops below 30%, the matrix fragments beyond safety tolerances, and it's Game Over. The 30-Second Panic Threshold: If you survive for 30 seconds, the game shifts gears. The background tints to a warning crimson, the screen begins a permanent, tectonic micro-rumble, gravity escalates every single second, and the blocks fall faster and harder, turning the game into a frantic battle for survival.

How We Built It

We engineered the entire experience using a seamless hybrid architecture that bridges semantic HTML/CSS design with a high-performance 2D rigid-body physics simulation:

Headless Matter.js Engine Core: Instead of rendering the simulation inside an abstract, pixelated HTML5 , we utilized Matter.js strictly as a headless mathematical coordinator. The engine runs behind the scenes to calculate real-time velocities, angular momentum, custom density thresholds, gravitational pulling forces, and precise collision loops. This allowed us to keep the visual frontend lightweight and highly accessible. Dynamic UI-to-Physics Vector Mapping: We built a custom bridge using a high-frequency requestAnimationFrame loop to synchronize the state of the DOM with the physics world. Standard HTML layout elements

containers styling complex grids, text, buttons, and graphics) are systematically mapped 1:1 to rigid mathematical rectangles. Every single frame, the system captures the precise center coordinates and rotational vectors (in radians) calculated by Matter.js and forces the visual DOM assets to mimic them in real time using hardware-accelerated CSS 3D transforms (translate3d and rotate). Discrete Collision-Bound Screen Shaking: To maximize visual feedback, we intercepted the engine’s collisionStart event pipeline. Rather than triggering random shakes when an object simply starts to move, our system filters active collision pairs. The moment a falling UI block physically impacts a static boundary array (the ground or the side walls) with a downward velocity vector exceeding $0.5 pixels per second, the app forcefully injects a temporary CSS keyframe animation (sudden-quake) into the viewport wrapper, resulting in a visceral, tactile "thud" effect exactly upon impact. Tectonic Post-30s Stress Emitters: When the game runtime tracking reaches the 30-second mark, a global state transition is initiated. We linked JavaScript time-elapsed data directly to CSS Custom Properties (--rumble-x, --rumble-y, and --rumble-r). As time marches forward, these variables scale up linearly. A continuous CSS animation cycles these custom properties to continuously displace, shudder, and micro-rotate the entire viewport canvas—creating an escalating, structural "rumble" that visualizes the growing gravitational instability of the webpage.

Challenges We Ran Into

Perfect Collision Responses: Early on, when items dropped, they would occasionally clip through boundaries or jitter uncontrollably. We had to carefully tune the restitution, friction variables, and sub-step calculations (Engine.update scaling) to make the cards feel heavy, tactile, and satisfyingly solid. Binding Screen Shakes to Actual Impacts: Originally, the screen shook the moment a card started to fall, which felt disconnected. Rewriting the system to intercept Matter.js collision pairs allowed us to pinpoint the exact millisecond a card hit the floor or walls, making the visual feedback infinitely more rewarding. Linear Difficulty Scaling: Balancing the game after the 30-second mark was tough. A sudden jump in difficulty made it unplayable, so we built a smooth, time-based linear scaling system that dials up gravity and shrinks drop delays incrementally every single second.

What We Are Proud Of

The "Juice": We turned a straightforward physics sandbox into a highly responsive, high-fidelity arcade experience. The mix of the continuous tectonic rumble, sudden impact shakes, and changing color palettes gives the game an elite level of "game feel." Flawless Domain Integration: The game fits panic.design like a glove. It feels like the domain name itself was the missing piece of the puzzle, bridging the gap between a sleek design portfolio and absolute mechanical chaos. High Score Addictiveness: Implementing the local-storage high score tracking makes you instantly want to hit "Re-Initialize Engine" the second you fail.

What We Learned

We learned a massive amount about bridging the gap between standard web layouts and rigid-body physics engines. More importantly, we learned that the best way to win a hackathon track like Domain Roulette is to lean completely into the bit—taking a bizarre or chaotic concept and executing it with an extreme level of product polish and micro-interactions.

What's next for panic.design

We want to take the chaos global. The next steps include building a live, global server leaderboard using a lightweight backend database so players can fight for the ultimate layout-retention crown. We also want to introduce custom design themes (e.g., a "brutalist design" collapse or a "slick SaaS dashboard" explosion) and add a "Share Your Score" Twitter button so users can brag about surviving the chaos of panic.design.

Built With

Share this project:

Updates