Viewport Display

This resource allows you to dynamically fetch the viewport width and height, offering full customization options to modify text, styling, and icons.

Framer Lists

Creator

2d ago

Updated

Installs

Framer Lists

Creator

2d ago

Updated

Installs

Make it with Workshop

Build your own component with AI

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.