Iris Circle Effect

Original · free

A circular iris opens from the centre to reveal the image on hover.

byWeb InnoventixReact + Tailwind

iriscircleimageeffect

Open

Copy prompt gives Claude Code, Cursor or v0 a ready-to-paste prompt that recreates this exact component.

npx shadcn@latest add https://webinnoventix.com/r/imgfx-iris-circle.json

Open

imgfx-iris-circle.tsx

"use client";

export default function ImgfxIrisCircle() {
  return (
    <section className="relative w-full bg-white px-6 py-20 dark:bg-neutral-950 sm:px-10 sm:py-28">
      <style>{`
        .irisfx-frame {
          --irisfx-r: 0%;
        }
        .irisfx-frame:hover .irisfx-reveal,
        .irisfx-frame:focus-within .irisfx-reveal {
          --irisfx-r: 75%;
        }
        .irisfx-reveal {
          clip-path: circle(var(--irisfx-r) at 50% 50%);
          transition: clip-path 720ms cubic-bezier(0.65, 0, 0.35, 1);
          will-change: clip-path;
        }
        .irisfx-ring {
          transition: opacity 480ms ease, transform 720ms cubic-bezier(0.65, 0, 0.35, 1);
          transform: scale(0.35);
          opacity: 0;
        }
        .irisfx-frame:hover .irisfx-ring,
        .irisfx-frame:focus-within .irisfx-ring {
          transform: scale(1);
          opacity: 1;
        }
        .irisfx-hint {
          transition: opacity 360ms ease;
        }
        .irisfx-frame:hover .irisfx-hint,
        .irisfx-frame:focus-within .irisfx-hint {
          opacity: 0;
        }
        @media (prefers-reduced-motion: reduce) {
          .irisfx-reveal { --irisfx-r: 75%; transition: none; clip-path: none; }
          .irisfx-ring, .irisfx-hint { transition: none; }
        }
      `}</style>

      <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </p>
        <h2 className="mt-3 text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Iris Circle Reveal
        </h2>
        <p className="mt-3 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
          A circular aperture opens from the centre, drawing the eye straight to
          the subject before the full frame settles into view.
        </p>

        <figure
          tabIndex={0}
          className="irisfx-frame group relative mt-10 aspect-square w-full max-w-md overflow-hidden rounded-2xl bg-neutral-100 shadow-lg outline-none ring-1 ring-neutral-200 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-900 dark:ring-neutral-800"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Sunlit landscape emerging through an expanding circular aperture"
            loading="lazy"
            draggable={false}
            className="irisfx-reveal absolute inset-0 h-full w-full object-cover"
          />

          <div
            aria-hidden="true"
            className="irisfx-ring pointer-events-none absolute left-1/2 top-1/2 h-[92%] w-[92%] -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white/70 ring-offset-0 dark:ring-white/50"
          />

          <figcaption className="irisfx-hint pointer-events-none absolute inset-0 flex items-center justify-center">
            <span className="rounded-full bg-neutral-900/80 px-4 py-2 text-xs font-medium uppercase tracking-wider text-neutral-50 backdrop-blur-sm dark:bg-neutral-50/85 dark:text-neutral-900">
              Hover to reveal
            </span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}