Louis Studios

Lens Clock

Component 4

About

A live analog clock seen through a breathing fisheye lens, with huge cream numerals that swell off the rim and magnify toward your pointer.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Lens Clock to your project and fits it to your theme.

Code

How Lens Clock is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { LensClock } from "@/components/ui/lens-clock"

export default function LensClockDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-neutral-950 p-8">
      <LensClock size={460} />
    </div>
  )
}

More by Louis Studios

View all
  • Melt Mark

    Melt Mark

    14
  • Dot Tiles

    Dot Tiles

    12
  • Brick Digits

    Brick Digits

    3
  • Wave Type

    Wave Type

    3
  • Peak Chart

    Peak Chart

    1
  • Effort Slider

    Effort Slider

    1
  • Neon Pulse

    Neon Pulse

  • Chrome Arcs

    Chrome Arcs