Shoji Clock

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