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