Clock & Weather

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

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.

Morphing Clock & Weather Widget