About Viewport Display
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 <svg>…</svg> 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
