Sitewright

Iridescent foil

A holographic foil frame that shifts with scroll and pointer position around an opaque content surface.

What it is for

Premium plan cards, membership passes, feature callouts on landing pages.

Use it

1 · site.json
"effects": { "components": ["iridescent-foil"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components iridescent-foil
2 · import it
import { IridescentFoil } from '@/components/fx/ui';

Files

  • components/fx/ui/IridescentFoil.tsx
  • components/fx/ui/_k2.ts
  • ui-iridescent-foil.css styles

Source

Idea from Kitchen; the code is written for this kit.

Credits and licences: third-party notices.

Accessibility

  • Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
  • Reduced motion. With prefers-reduced-motion on, animation settles to its finished state at once.
  • Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.