Holographic Foil Card

About this style

Holographic foils are metallised films embossed with microscopic diffraction patterns, so they split light into rainbow colors that shift as the viewing angle changes. Trading card makers adopted them for rare cards, and the shimmering foil card became a prized object for collectors. The look is now widely recreated in interfaces and web demos, where tilt or pointer position drives the shine. A convincing version keeps the foil in the surface: bands that slide against the tilt, sparkle in the grain, and matte areas that stay matte.

Make a 10-second holographic card reveal: an original collectible card flips face up and tilts in the light while its foil shifts hue with every angle.

<inputs>
- Game: Driftlight, Series Two.
- Card: Comet Heron · Sky · Rare Holo · Power 7 · Grace 4 · 042/180.
- Flavor text: "It fishes the river of stars at dawn."
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Set: dark jade felt #0F3B33 under a soft pool of light, falling to #07211C; the card's soft shadow follows its tilt.
Card: 63 × 88, rounded corners, a thin slab whose front carries the foil shader. Its art is one 1024 × 1430 canvas: a navy frame #1B1F3B with a gold #D9B45A pinstripe; "Comet Heron" in Cinzel 700; an art window; a cream text box with the flavor text in Alegreya Sans italic; type line, stats and number in Saira Condensed 700; all at least 20px on the stage. Original art: a heron of flat geometric shapes wading a river of stars under a comet arc, in #1E2A5C, #2FA39A, #FF7A59 and #F5EBD7.
Foil shader, from view and light directions in card space:
1. Mask: foil on sky, river and frame; heron, name bar and text box stay matte.
2. Rainbow: hue = fract(0.55·(u + v) + 1.6·(0.8·tiltY + 0.6·tiltX)), saturation 0.55, weighted by mask × (0.3 + 0.7·fresnel).
3. Grain: 45° diffraction lines at 3px pitch, brightness ±12%.
4. Sparkle: a seeded 6px glitter grid with tilted micro-normals; each glint lasts at least 0.4s.
5. A glare moving against the tilt; the name embossed in metallic gold via a normal map.
Motion: handled, not spun. The card enters face down and flips once over 0.9s on cubic-bezier(0.65, 0, 0.35, 1); tilts are easeInOutSine segments of 1.2–1.6s, never past 22°.
Layout: centered and 800px tall while tilting, then settling at (760, 540), 780px tall. Caption at x 1180: "Comet Heron" in Cinzel 700, 56px, #F2E6C8; "Driftlight · Series Two" and "042/180 · Rare Holo" in Saira Condensed 600, 26px, #9FC9BE.
Premium is foil as a surface: bands sliding against the tilt, sparkle in the grain, matte staying matte. Cheap is a rainbow gradient over the whole card.
Banned: rainbow over everything, real card games or creatures, glow halos, lens flares, floating glitter, a second flip, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: jade felt; the pool of light fades up.
- 0.8–2.0s: the card slides up face down and flips face up, landing at 16° of tilt.
- 2.0–3.6s: tilt left to right (Y −18° → +16°): bands sweep the sky and frame.
- 3.6–5.0s: tilt top to bottom (X +14° → −12°): the embossed name catches the light.
- 5.0–6.4s: one slow circular tilt of 12°; the foil runs through the whole spectrum.
- 6.4–7.6s: the card glides left and settles at a 6° tilt.
- 7.6–8.6s: caption lines rise 14px and fade in, 0.15s apart.
- 8.6–10s: hold, still.
Other lengths: add or drop tilt segments; keep the 0.9s flip and 1.2s of hold.
</structure>

<build>
One self-contained index.html, inline CSS and JS, on a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaited with document.fonts.load() before seek exists.
window.seek(t) sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. The tilt path is a fixed list of eased segments.
Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
three.js as an ES module pinned to three@0.160.0 via a jsDelivr import map (`three`, `three/addons/`); preserveDrawingBuffer: true; one render per seek. No image, model or typeface files beyond Google Fonts.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Look for foil that doesn't change between tilts, foil on the heron or text box, unreadable card text, glints shorter than 0.4s. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…