Aperture Rings

Backgrounds

About

A pure-CSS ambient background of concentric rotating rings and ticks, like a camera aperture or watch bezel, for hero sections and empty states.

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

Code

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

Usage.tsx

import { ApertureRings } from "@/components/ui/aperture-rings";

export default function Demo() {
  const color = "#b9cce4";
  return (
    <ApertureRings
      color={color}
      background="#08070c"
      className="h-screen w-full"
    >
      <div
        className="pointer-events-none flex h-full items-end justify-between p-6 font-mono text-[11px] uppercase tracking-[0.16em]"
        style={{ color, opacity: 0.55 }}
      >
        <span>f / 1.4</span>
        <span>1 / 250 s</span>
      </div>
    </ApertureRings>
  );
}