Holo Foil

A rounded holographic foil card with an animated rainbow sheen, crinkles and glitter, on a dark gradient with fine grain. It fills its positioned parent and freezes its animation when the user prefers reduced motion. Built on the shaders library (MIT) and rendered with WebGPU.

Installation

CLI

npx @modus-ui/cli add holo-foil

Manual

1. Install shaders with npm install shaders.
2. Copy the code from the component tab.
3. Create a file at components/ui/holo-foil.tsx.
4. Paste the code.

Usage

import { HoloFoil } from "@/components/ui/holo-foil";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <HoloFoil />
      <div className="relative z-10 p-8">
        <h1>Content over the effect</h1>
      </div>
    </div>
  );
}

Props