Viewport Display

Overview Viewport Display shows your current browser size in real time and auto-swaps a device icon based on breakpoints.

Live width × height badge with a responsive device icon and smooth digit transitions. Great for responsive debugging and polished handoffs. Overview Viewport Display shows your current browser size in real time and auto-swaps a device icon based on breakpoints. Every digit animates on change for a clean, premium feel. Style the card, icon, and typography from Property Controls. Optionally drop in your own inline SVGs for desktop, tablet, and mobile. Highlights Live viewport readout: width × height Device-aware icon with desktop, tablet, mobile states Optional custom SVGs per breakpoint Per-digit spring animation on change Extended font control and color control Full card styling: padding, radius, border, shadow Light and dark friendly Zero setup inside Framer Use cases Debug responsive layouts on live pages Show size hints during reviews and handoffs Pin in a dev HUD, navbar, or footer Drop in marketing pages as a subtle, dynamic detail Property Controls Card Background Box Shadow Border Width, Style, Color Padding (per side) Radius (per corner) Icon Gap Icon Width, Height Color Text Color Font (Extended controls. Display font size. Monospace by default.) Custom SVGs Desktop SVG, Tablet SVG, Mobile SVGInline … strings. Fills are converted to currentColor. Uses Icon width and height. Behavior Breakpoints: Desktop ≥1200, Tablet ≥810, Mobile <810 If a custom SVG is missing for a breakpoint, a Lucide icon is used Digits that change animate in with a staggered spring Performance Single resize listener, lightweight update cycle Animates only the digits that changed Sensible defaults for canvas and preview Notes Works inside Framer’s runtime. On first render without window, defaults to 1200 × 800 then syncs on mount. When using custom SVGs, keep markup minimal. Colors come from the Icon color via currentColor. What’s included Viewport Display code component Clean defaults and helpful descriptions on every control