What I Built
I built G-Force: The Quantum Gravity UI, a satirical project showcasing the (fictional) upcoming "CSS Gravity Level 1" specification.
Instead of a standard layout, this dashboard uses Matter.js to simulate real-world physics for your UI. After a "Quantum Training" phase (collecting entropy from mouse movements), the AI agent (Gemini) accidentally activates the gravity module, causing the entire dashboard—headers, buttons, and stats—to physically detach and tumble into a pile at the bottom of the screen.
Demo
Code
How I Built It
- Matter.js: For real-time 2D physics and collision detection.
- Vite & Vanilla JavaScript: To handle the high-performance DOM-to-Physics body mapping.
- Glassmorphism & Neon Design: To create a "Premium AI Startup" aesthetic that makes the eventual collapse even more hilariously unexpected.
- CSS3 Transforms: Synchronized with the physics engine at 60fps for smooth, heavy tumbling.
Prize Category
I am submitting for:
- Best Google AI Usage: For the mock "Gemini Gravity Stabilizer" and the "Entropy Training" phase where the user must physically generate random data to "calibrate" the AI.
- Best Ode to Larry Masinter: The UI features a floating red 418 Teapot that acts as the "Emergency Fix." When clicked, it "boils" the viewport, generating anti-gravity "steam" that sends your UI floating back into the air.
- Community Favorite: Because every developer has felt like their CSS layout was fighting against gravity.
Built with ❤️ for the DEV April Fools Challenge 2026.
Top comments (0)