Holographic Foil

A holographic foil animation for backgrounds. Renders a dynamic, colorful sheen over content. Behaves with subtle movement and tilt effects. Use for visually engaging card interfaces.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/holographic-foil

npx layro-cli add @educlopez/holographic-foil

npx layro-cli add @educlopez/holographic-foil

bunx layro-cli add @educlopez/holographic-foil

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
} from "motion/react";
import {
  type CSSProperties,
  type ReactNode,