Components
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).
npx @21st-dev/cli@beta add dqnamo/iridescent-foilLoading preview...
"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>
);
}