Holo Foil

It tilts toward the pointer while a foil sheen and a glare slide across, like a rare trading card. For collectibles, badges, membership cards, tickets and achievements.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add holo-foil

Usage

Example

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

<HoloFoil foil="spectrum">
  <MemberCard />
</HoloFoil>

Source

Installs to components/galactrex/holo-foil.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The card face.
`foil`	`"silver" \| "spectrum"`	`"silver"`	Monochrome metal or rainbow foil.
`tilt`	`number`	`12`	Largest tilt in degrees.
`intensity`	`number`	`0.55`	Foil strength, 0 to 1.
`className`	`string`	—	Extra classes for the outer element.

Variants

Silver. Monochrome sheen that fits any brand.
Spectrum. The full rainbow foil for rare moments.

Accessibility

Effects are aria-hidden layers; the card content is untouched.

Motion and reduced motion

Spring tilt and gradient position follow motion values without re-rendering.
Touch and reduced motion: flat card with a still sheen.