---
title: "Shoji Clock — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Joshua Roberts · Interactive. Shoji Clock 🌍 Keep your global team, clients, and visitors in sync."
canonical: "https://framer.elliotli.dev/component/shoji-clock"
---

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

# Shoji Clock

Smart world clock with live weather.

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

![Shoji Clock preview image 1](https://framer.elliotli.dev/og/component/shoji-clock/84044a293ca4c496/1600x1200.jpg)

## Summary

Shoji Clock 🌍 Keep your global team, clients, and visitors in sync.

## Description

## Shoji Clock 🌍

Keep your global team, clients, and visitors in sync. Whether you need a simple local clock for your footer or a robust grid of international timezones for an "About Us" page, this component handles all the complex time math and API fetching for you.

### Best use cases:

Global agency contact pages, remote team rosters, travel and hospitality blogs, booking dashboards, dynamic buttons, and personal portfolio footers.

### How to use:

1.  Drag and drop the component onto your canvas.
    
2.  Choose between Single or Comparison mode, and select your desired timezones.
    
3.  Toggle on Weather, Business Hours, or Visitor Detection.
    
4.  Customize the typography, layout (Row, Column, or Grid), and colors to match your brand and use case perfectly.
    

**_Tip:_** _Wrap the component instance(s) in a frame to add more robust styling and interactivity options_

### Highlights:

-   Zero setup required (No API keys needed for weather)
    
-   Dynamic visitor timezone detection ("You" badge)
    
-   Live weather conditions & temperature (Celsius/Fahrenheit)
    
-   Automatic time-of-day contextual icons and labels
    
-   Built-in business hours availability indicator
    
-   Single clock or multi-city comparison modes
    
-   Calculates exact time deltas (e.g., "+3h 30m")
    
-   Supports Rows, Columns, and CSS Grid layouts
    
-   Independent divider and gap styling
    
-   Upload custom icons or use the beautiful built-in SVGs
    
-   Heavily optimized caching for lightning-fast performance
    

_Crafted by:_ [_Joshua Roberts_](https://joshuaroberts.design/)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-d1qesc6e-kpubUNraDMpTCqJXBLBGwQHmZPG4sh)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-d1qesc6e-E2DFPB1SKF2KttCYpNNlOYcEVcQNPP)

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

-   All · #8800

## Details

- **Author**: Joshua Roberts
- **Price**: $15.00
- **Published**: 2026-05-27
- **Updated**: 2026-05-27
- **Added**: 2026-05-23
- **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