Mobile-First Breakpoint Cascade Simulator (2D)
Interactive 2D simulator of the real CSS mobile-first cascade: edit an ordered list of min-width breakpoints, each overriding a subset of layout properties, drag a viewport-width slider and watch the engine resolve the cascade property-by-property — exactly like a browser — while a mock layout reflows and a live breakdown shows which breakpoint won each property.
This is the same real cascade-resolution model as the 3D version, rendered as a flat mock layout instead of a 3D tower. An ordered, user-editable list of min-width breakpoints — each overriding only some of columns / font-size / padding — is resolved exactly the way a browser resolves competing CSS rules: walk the list in ascending order, apply every rule whose threshold the current viewport satisfies, and let later rules win per property, not per breakpoint. Drag the viewport slider and the mock layout genuinely reflows to the freshly computed values, while the breakdown panel names the exact breakpoint that contributed each final property.
Interactive 3D simulator of mobile-first CSS breakpoint cascades: drag a viewport-width slider and compare min-width (mobile-first) vs max-width (desktop-first) media-query strategies, watching render-blocking payload and time-to-first-render change across 3G, 4G and WiFi.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install