DocsLens Clock

Lens Clock

A live clock widget that frames a corner of a large dial. The view pans with the hour hand and the edges fall out of focus. Set a time zone to show any city.

Installation

pnpm dlx shadcn@latest add @componentry/lens-clock

Dependencies: framer-motion

Usage

Without a theme prop the palette follows the dark class on an ancestor. Size it with a width class; everything inside scales with the card.

API Reference

PropTypeDefault
timeZonestring

IANA time zone, such as "America/Los_Angeles". Omit it to use the viewer's zone. The clock stays live either way.

—
timeDate

Fixed moment to display, shown in timeZone. Omit it to keep the clock live.

—
theme"light" | "dark"

Force a palette. Omit it to follow the surrounding dark class.

—
classNamestring

Additional styles. Defaults to w-72.

—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousLayered StackNextLiquid Glass Carousel
import { LensClock } from "@/components/ui/lens-clock"
 
export default function Demo() {
  return <LensClock />
}