---
title: "Viewport Display — Free Framer component · Best of Framer"
description: "Free Framer component · by Anoop · Text. Overview Viewport Display shows your current browser size in real time and auto-swaps a device icon based on breakpoints."
canonical: "https://framer.elliotli.dev/component/viewport-display"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Viewport Display

# Viewport Display

[View on Framer](https://framer.com/marketplace/components/viewport-display/?via=elliot-li)

![Viewport Display preview image 1](https://framer.elliotli.dev/og/component/viewport-display/ce8b160ef40a6015/1600x1200.jpg)

## Summary

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

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6955

## Details

- **Author**: Anoop
- **Published**: 2025-09-03
- **Updated**: 2025-09-03
- **Added**: 2025-08-24
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing