Iris Aperture Card

Installation

pnpm dlx shadcn@latest add @cleverui/card-iris-aperture

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CardIrisAperture } from '@/components/ui/card-iris-aperture'

Exampletsx

import { CardIrisAperture } from '@/components/ui/card-iris-aperture'

export default function CardIrisApertureDemo() {
  return (
    <div className="mx-auto flex min-h-[560px] max-w-md items-center px-4 py-16 sm:px-6">
      <CardIrisAperture
        meta="OPTICS 02"
        title="Field lens, series VII"
        description="Hover the plate, six blades swing through discrete f-stops and the mono readout ticks from f/8 to f/1.4."
        blades={6}
        restOpen={0.35}
        className="w-full"
      />
    </div>
  )
}

API reference

CardIrisAperture accepts the following props.

Prop	Type	Default	Description
`title`*	`string`	–	–
`description`	`string`	–	–
`meta`	`string`	`'OPTICS 02'`	mono micro-label on the card sill
`blades`	`number`	`6`	iris blade count (5–8, clamped)
`restOpen`	`number`	`0.35`	aperture opening fraction at rest (clamped 0.2–0.6)
`href`	`string`	–	optional link on the title, focusing it drives the iris for keyboard parity

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'title' >: className, event handlers, aria attributes and the rest pass straight through.

Related components

Constellation Card

A card whose border is a constellation, seeded stars joined by hairline segments that twinkle in slow sequence, then re-wire into a new star graph on hover. The frame is the show.

Drawer Card

Card whose bottom edge is a drawer, hover or focus slides a hidden action row up from behind a hairline, click-through safe and permanently open on touch.

Frost Wipe Card

A condensation card for React, the pane mists over with canvas breath, your pointer squeegees it clear, droplets run, and it slowly re-fogs. Tailwind token colors throughout.

Liquid Gauge Card

A React metric card filled with token-tinted liquid, pointer motion sloshes the spring-driven meniscus while the fill height plots the real value. Tailwind-only material gauge.

Magnetic Cluster

A cluster of small cards with social physics, hover one and its neighbors lean two to three degrees toward it on springs, deferring to the focus. The group reacts as a field.

Moire Veil Card

A React card veiled by two hairline plates whose misalignment breeds moiré bands, pointer drift shears the top plate so interference sweeps the surface. Pure Tailwind tokens.

Frequently asked questions

How do I install the Iris Aperture Card component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/card-iris-aperture`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Iris Aperture Card require?

Iris Aperture Card uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Iris Aperture Card to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code