---
title: "Clock & Weather — Free Framer component · Best of Framer"
description: "Free Framer component · by LAVAN · Interactive. A smart, interactive Clock & Weather Widget designed for Framer."
canonical: "https://framer.elliotli.dev/component/clock-weather"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Clock & Weather

# Clock & Weather

Morphing Clock & Weather Widget

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

![Clock & Weather preview image 1](https://framer.elliotli.dev/og/component/clock-weather/a594a417ddad78c5/1600x1200.jpg)

## Summary

A smart, interactive Clock & Weather Widget designed for Framer.

## Description

A smart, interactive Clock & Weather Widget designed for Framer. Seamlessly morphing between a clean compact pill view and a detailed expanded card, this component brings smooth spring animations and real-time world clock data directly into your design.

**Key Features**

Morphing Layout Animation: Smooth, layout-based spring transitions powered by Framer Motion when switching between compact and expanded states.

Weather & Clock Dual View: Switch effortlessly between live weather condition details (humidity, air quality, hourly forecast) and world time with a mini monthly calendar.

Global City Database & Auto-Detect: Supports major cities worldwide with timezone-based time calculations and automatic local time detection.

Animated Weather SVG Icons: Fully vector, smooth animated weather icons tailored for sunny, rainy, thunderstorm, snow, and night conditions.

5 Theme Presets & Custom Styling: Includes Obsidian Glass, Midnight Blue, Aurora Emerald, Sunset Glow, Clean Light presets, plus complete color customization control.

Framer Property Controls: Adjust city selection, temperature units (°C/°F), initial views, border-radius, backdrop blur, and physics parameters directly from the Framer sidebar.

**Property Controls**

City: Select from a list of major global cities or set to Auto Detect.

Unit: Toggle between Celsius (°C) and Fahrenheit (°F).

Initial State: Choose default display mode (Compact or Expanded).

Default View: Set the primary tab on expand (Weather or Clock).

Theme: Choose from 5 pre-built themes or customize fully.

Corner Radius & Blur: Fine-tune visual presentation and glass translucency.

Physics Spring Controls: Tweak Stiffness, Damping, and Mass for layout animation.

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

-   All · #4433

## Details

- **Author**: LAVAN
- **Published**: 2026-09-10
- **Updated**: 2026-09-10
- **Added**: 2026-09-10
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase