Iridescent Foil Button

A holographic foil CTA button with pointer-reactive hue/angle shifts, soft specular sheen, and fine grain texture. Built as a drop-in button with proper focus states, disabled support, and reduced-motion-safe scale behavior.

UniqueUI CLI

npx uniqueui add iridescent-foil-button

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/iridescent-foil-button.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Usage

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

export default function Example() {
  return (
    <IridescentFoilButton variant="vivid">
      Start Free Trial
    </IridescentFoilButton>
  );
}

Props

Prop	Type	Description
`variant`	`"default" \| "subtle" \| "vivid"`	Controls base gradient and foil intensity.
`grainOpacity`	`number`	Opacity for the turbulence grain overlay. Recommended range: 0.03-0.08.
`hueRange`	`number`	Maximum hue swing in degrees driven by pointer position.
`children`	`React.ReactNode`	Button label or custom content.