Live width × height badge with a responsive device icon and smooth digit transitions. Great for responsive debugging and polished handoffs.
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.
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
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
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 <svg>…</svg> strings. Fills are converted to currentColor. Uses Icon width and height.
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
Single resize listener, lightweight update cycle
Animates only the digits that changed
Sensible defaults for canvas and preview
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.
Viewport Display code component
Clean defaults and helpful descriptions on every control
Framer Lists
