Holographic card
A collectible card you can turn in your hands: four registered layers slide against each other for depth, and a foil spectrum whose phase follows the viewing angle rather than a clock.
How it works
- Four layers registered on one 1024×1536 canvas — subject (real alpha), background, line art, typography. Everything downstream samples all four with the same UV, so a one-pixel misalignment shows up as a coloured fringe the moment the card tilts.
- The subject is cut with the operating system’s own subject-lift (
VNGenerateForegroundInstanceMaskRequest), not a colour key — it keeps hair, a spear tip and the soft edge of a flowing cape. No image model is involved in the cut-out, only in generating the artwork. - Parallax is not UV-centering. The viewing direction is transformed into the card plane, divided by a bounded normal component, then the UV is offset by signed depth. Subject +0.28, background −0.20 — the opposite signs are what make it read as depth instead of the whole picture sliding.
- Foil is mapped bands (scale 0.55, distortion 7, mapping Y 32°) pushed through a pink→yellow→blue→white ramp in Overlay. The spectrum phase is driven by viewing angle, not by time — that single choice is the difference between a foil and a shimmer.
- Every BSDF is
Metallic=1, Roughness=1. Bronze, gold and armour come alive; flat unsaturated areas go grey. Pick artwork that has metal in it — the material is doing the work, not a filter.
Numbers
- canvas
- 1024 × 1536 (2:3)
- subjectScale
- 1.25
- subjectDepth
- 0.28
- backgroundDepth
- −0.20
- foil
- 0.65
- safeArea
- scale 1.12, offset (−0.06, −0.085)
- subject height
- 65% of card
- line-art ink
- under 4% of the subject
Prompt
Paste this into any coding model to get the effect from scratch. It states every number explicitly — vague words like “smooth” or “modern” produce a different result every time.
Generate the artwork as 2:3 portrait, 1024×1536: a single hero subject, strong readable silhouette, bronze or metal surfaces, dark stormy background with one bright light source. Then build the card from four registered layers on that same canvas: (1) lift the subject with real alpha; (2) erase the subject from the background BEFORE blurring it at 28px, otherwise the blur leaves a ghost of the subject behind the real one; (3) derive line art with a difference-of-Gaussians at σ 1.2 and 3.0, multiplied by 14, values above 170 pushed to white, keeping ink under 4%; (4) typography on a transparent layer. Render with subjectDepth 0.28, backgroundDepth −0.20, foil 0.65, and drive the foil spectrum from the viewing angle rather than from time.Where it breaks
- Landscape source art has to be upscaled about 2× to fill a 2:3 card. Illustration survives that; a photograph does not.
- A still render freezes the foil band at one angle — it can sit right across a dark area and read as a grey wash. Judge colour on the interactive version at several angles, never on the still.
Metallic=1means dark, unsaturated regions reflect their surroundings and drift toward grey. That is the material working as intended, not a bug.- Needs WebGL2. Model plus textures are about 2 MB, so this one loads from a poster instead of auto-playing in the overview carousel.