Iridescent Foil

Cards 52

About

A holographic foil surface built entirely from layered CSS gradients — a base foil, a soft color film, a pearl sheen, a directional shine, and a specular glare, blended with mix-blend modes. Moving the pointer over the element (or scrolling the page) shifts the iridescent color and specular highlight across the surface via requestAnimationFrame-driven CSS custom properties. Wrap any content as children; element or document scroll-progress modes; dependency-free (ships a CSS module).

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

Code

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

Usage.tsx

"use client";

import { IridescentFoil } from "@/components/ui/iridescent-foil";

export default function Default() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-neutral-100 p-8">
      <IridescentFoil className="group aspect-[1.6/1] w-80 rounded-2xl">
        <div className="flex h-full flex-col justify-between p-6 text-neutral-500">
          <p className="font-mono text-[10px] uppercase tracking-[0.2em] text-neutral-400">
            A product by
          </p>
          <div className="text-center leading-tight">
            <p className="font-serif text-[10px] uppercase tracking-[0.25em] text-neutral-400">
              The
            </p>
            <p className="font-serif text-xl font-medium uppercase tracking-wide text-neutral-600">
              Interface Company
            </p>
            <p className="mt-0.5 font-serif text-[10px] uppercase tracking-[0.35em] text-neutral-400">
              of London
            </p>
          </div>
          <div className="flex justify-end">
            <div className="flex size-5 items-center justify-center rounded-full bg-neutral-400/30 transition-colors duration-200 group-hover:bg-[#0090ff]">
              <svg
                aria-hidden="true"
                className="size-3 text-neutral-500 transition-colors duration-200 group-hover:text-white"
                fill="currentColor"
                viewBox="0 0 256 256"
              >
                <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" />
              </svg>
            </div>
          </div>
        </div>
      </IridescentFoil>
    </div>
  );
}