Micro-interactions

Holofoil

Holographic trading-card foil over real content. The diffraction band travels against the tilt while the specular follows it, and the flake only lights where the rainbow currently falls — which is what stops the whole thing reading as one gradient sliding around.

Cook BookHover effect 3D tilt / Flip Perspective Idle animation Compositing Hardware acceleration

Controls

maxTilt14 °

perspective800 px

foil

foilIntensity0.75

sparkle0.50

glare0.45

idleDrift0.20 ×

settle0.12

blendMode

sheenColor

#a855f7

Install

# Holofoil needs no npm packages

Then copy 2 files into your project:

components/registry/holofoil/holofoil.tsx
hooks/use-animation-loop.ts

Props

Prop	Type	Default	Description
maxTilt	number	14	Maximum lean at the card's edge. The tilt is only the carrier here — set it to zero and the foil still moves, because the bands are driven by pointer position rather than by the rotation.
perspective	number	800	Depth of the projection. Lower exaggerates the lean; the value that reads as expensive is nearly always further away than instinct suggests.
foil	"rainbow" \| "reverse" \| "cosmic" \| "linear" \| "none"	"rainbow"	Which diffraction pattern the laminate carries. Rainbow is the repeating twelve-stop spectrum a real holographic sheet produces — it repeats rather than running one rainbow across the card. Reverse runs it the other way so the band travels against the tilt, which is what most people actually recognise as foil.
foilIntensity	number	0.75	Strength of the diffraction band. Past about one it stops being laminate and starts being a sticker.
sparkle	number	0.5	Density of the flake. It is masked by the diffraction band rather than laid over the card, and that coupling is the entire reason the specks read as suspended inside the laminate instead of as dust on your screen.
glare	number	0.45	The broad specular band, kept separate from the foil on purpose. Foil is diffraction and moves against the tilt; glare is reflection and follows it. Running both, opposed, is what gives the surface a material.
idleDrift	number	0.2	How much the foil keeps moving with no pointer on it, on two incommensurate rates so the idle never settles into an obvious period. A card in a case is never quite still, and a completely dead card in a grid reads as an image rather than an object.
settle	number	0.12	Seconds the card takes to catch up to the pointer. Near zero it is welded to the cursor and reads as a texture map; too high and it lags far enough that the foil stops feeling attached to your hand.
blendMode	"color-dodge" \| "screen" \| "overlay" \| "hard-light" \| "plus-lighter"	"color-dodge"	How the foil composites onto whatever you wrapped. Colour-dodge behaves like real foil — it blows out where the card is already bright and does almost nothing in the shadows. Screen is the safe one on a light card.
sheenColor	string (hex)	"#a855f7"	The colour carried by the specular sheen.

What It Demonstrates

Hover effect: Visual change when the cursor moves over an element.
3D tilt / Flip: Rotate in 3D space (rotateX / rotateY) to add depth.
Perspective: How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
Idle animation: Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
Compositing: Letting the GPU move or fade an element on its own layer without redoing layout or paint.
Hardware acceleration: Animating transform and opacity lets the GPU keep motion smooth.

Related Components

Appears In

"use client"; import { memo, useEffect, useRef, type ReactNode } from "react"; import { useAnimationLoop } from "@/hooks/use-animation-loop"; export type HolofoilPattern = "rainbow" | "reverse" | "cosmic" | "linear" | "none"; export type HolofoilBlend = | "color-dodge" | "screen" | "overlay" | "hard-light" | "plus-lighter"; export interface HolofoilProps { children?: ReactNode; maxTilt?: number; perspective?: number; foil?: HolofoilPattern; foilIntensity?: number; sparkle?: number; glare?: number; idleDrift?: number; settle?: number; blendMode?: HolofoilBlend; sheenColor?: string; paused?: boolean; reducedMotion?: boolean; className?: string; } const FOIL_LAYERS: Record<Exclude<HolofoilPattern, "none">, string> = { rainbow: "repeating-linear-gradient(115deg, #ff2f6a 0%, #ffdd55 8%, #4dff9b 16%, #35d7ff 24%, #9b6bff 32%, #ff2f6a 40%)", reverse: "repeating-linear-gradient(-115deg, #35d7ff 0%, #9b6bff 8%, #ff2f6a 16%, #ffdd55 24%, #4dff9b 32%, #35d7ff 40%)", cosmic: "conic-gradient(from 210deg, #ff2f6a, #ffdd55, #4dff9b, #35d7ff, #9b6bff, #ff2f6a)", linear: "linear-gradient(115deg, transparent 30%, #ffffff 48%, #cbd5ff 52%, transparent 70%)", }; const Holofoil = memo( ({ children, maxTilt = 14, perspective = 800, foil = "rainbow", foilIntensity = 0.75, sparkle = 0.5, glare = 0.45, idleDrift = 0.2, settle = 0.12, blendMode = "color-dodge", sheenColor = "#a855f7", paused = false, reducedMotion = false, className, }: HolofoilProps) => { const containerRef = useRef<HTMLDivElement>(null); const cardRef = useRef<HTMLDivElement>(null); const foilRef = useRef<HTMLDivElement>(null); const sparkleRef = useRef<HTMLDivElement>(null); const glareRef = useRef<HTMLDivElement>(null); const live = useRef({ maxTilt, perspective, foil, foilIntensity, sparkle, glare, idleDrift, settle, blendMode, sheenColor, reducedMotion, }); live.current = { maxTilt, perspective, foil, foilIntensity, sparkle, glare, idleDrift, settle, blendMode, sheenColor, reducedMotion, }; const state = useRef({ tx: 0, ty: 0, x: 0, y: 0, drift: 0, over: false }); const loop = useAnimationLoop({ target: containerRef, halted: paused, onFrame: ({ dt }) => { const l = live.current; const s = state.current; if (!s.over && !l.reducedMotion) { s.drift += dt * l.idleDrift; s.tx = Math.sin(s.drift * 1.7) * 0.55; s.ty = Math.cos(s.drift * 1.1) * 0.4; } const k = l.reducedMotion ? 1 : Math.min(1, dt / Math.max(l.settle, 0.02)); s.x += (s.tx - s.x) * k; s.y += (s.ty - s.y) * k; const card = cardRef.current; if (card) { card.style.transform = `rotateY(${(s.x * l.maxTilt).toFixed(3)}deg) rotateX(${(-s.y * l.maxTilt).toFixed(3)}deg)`; } const foilEl = foilRef.current; if (foilEl) { const px = 50 - s.x * 60; const py = 50 - s.y * 60; foilEl.style.backgroundPosition = `${px.toFixed(2)}% ${py.toFixed(2)}%`; foilEl.style.opacity = String( l.foil === "none" ? 0 : Math.min(1, l.foilIntensity * (0.55 + 0.45 * Math.abs(s.x))), ); } const sparkleEl = sparkleRef.current; if (sparkleEl) { sparkleEl.style.backgroundPosition = `${(50 - s.x * 90).toFixed(2)}% ${(50 - s.y * 90).toFixed(2)}%`; sparkleEl.style.maskPosition = `${(50 - s.x * 60).toFixed(2)}% ${(50 - s.y * 60).toFixed(2)}%`; sparkleEl.style.opacity = String(Math.min(1, l.sparkle * 0.8)); } const glareEl = glareRef.current; if (glareEl) { glareEl.style.backgroundPosition = `${(50 + s.x * 55).toFixed(2)}% ${(50 + s.y * 55).toFixed(2)}%`; glareEl.style.opacity = String(Math.min(1, l.glare * (0.4 + 0.6 * Math.hypot(s.x, s.y)))); } }, deps: [], }); useEffect(() => { const foilEl = foilRef.current; if (foilEl) { foilEl.style.backgroundImage = foil === "none" ? "none" : FOIL_LAYERS[foil]; foilEl.style.backgroundSize = foil === "cosmic" ? "180% 180%" : "260% 260%"; foilEl.style.mixBlendMode = blendMode; } const glareEl = glareRef.current; if (glareEl) { glareEl.style.backgroundImage = `radial-gradient(60% 55% at 50% 50%, ${sheenColor}cc 0%, #ffffff66 35%, transparent 72%)`; } loop.paint(); }, [foil, blendMode, sheenColor, loop]); useEffect(() => { loop.paint(); }, [maxTilt, perspective, foilIntensity, sparkle, glare, idleDrift, settle, loop]); const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => { if (e.pointerType === "touch" || live.current.reducedMotion) return; const r = e.currentTarget.getBoundingClientRect(); if (r.width === 0 || r.height === 0) return; const s = state.current; s.over = true; s.tx = ((e.clientX - r.left) / r.width) * 2 - 1; s.ty = ((e.clientY - r.top) / r.height) * 2 - 1; loop.start(); }; const onPointerLeave = () => { state.current.over = false; loop.start(); }; return ( <div ref={containerRef} className={className ?? "relative"} style={{ perspective: `${perspective}px` }} onPointerMove={onPointerMove} onPointerLeave={onPointerLeave} > <div ref={cardRef} className="relative isolate overflow-hidden rounded-2xl" style={{ transformStyle: "preserve-3d", willChange: "transform" }} > {children} <div ref={foilRef} aria-hidden className="pointer-events-none absolute inset-0" style={{ backgroundRepeat: "repeat" }} /> <div ref={sparkleRef} aria-hidden className="pointer-events-none absolute inset-0" style={{ mixBlendMode: "color-dodge", backgroundImage: "radial-gradient(#ffffff 0.7px, transparent 0.8px), radial-gradient(#ffffff 0.5px, transparent 0.6px)", backgroundSize: "37px 41px, 23px 29px", backgroundPosition: "50% 50%", maskImage: "repeating-linear-gradient(115deg, #000 0%, #fff 8%, #000 16%)", maskSize: "260% 260%", }} /> <div ref={glareRef} aria-hidden className="pointer-events-none absolute inset-0" style={{ mixBlendMode: "plus-lighter", backgroundSize: "180% 180%" }} /> </div> </div> ); }, ); Holofoil.displayName = "Holofoil"; export default Holofoil;

Holofoil

Controls

Install

Props

What It Demonstrates

Related Components

Tilt

Spotlight Shell

Torchlight

Pixel Transition

Border Glow

Hover List

Appears In

Controls