The same MIT foil engine, unmodified, driving a real Amazing Rare card and our Godlike Harrowfield card side by side. Every difference between them is a configuration variable, not a code change — which is the whole point of the exercise.
What the engine is actually composing, in paint order. The stack is ordered
by translateZ, not z-index.
| Layer | What it is | Source |
|---|---|---|
| card__back | Card back, shown while unflipped | tcg.pokemon.com |
| card__front › img | The printed card face at 734×1024 | images.pokemontcg.io/swsh45/21_hires.png |
| --foil | Bespoke, registered to this artwork. A contrast-crushed greyscale luminance map over black — it decides where the shine fires | 021_foil_etched_swsecret_2x.webp |
| --mask | Bespoke. Alpha × 8, crushing partial alpha — it decides what is foil at all | 021_foil_etched_swsecret_2x.webp |
| card__shine | Two glitter tiles + a pointer-tracked radial, soft-light then color-burn | shared glitter.png |
| card__shine::before | The foil map itself, color-burn against a pointer radial, mix-blend-mode: lighten, opacity 0.5 | --foil |
| card__shine::after | Six sunpillar stops, repeating, mix-blend-mode: saturation, brightness falling with --pointer-from-center | gradient only |
| card__glare | The clearcoat — a single specular tracking the pointer | gradient only |
Thirteen values, recomputed every frame from one pointer position. Both cards
below are driven by the identical loop; I reimplemented the spring rather than importing
Svelte, matching the reference's constants (interact k .066 / d .25).
| Variable | Derivation |
|---|---|
| --pointer-x / y | clamped % of the card box |
| --pointer-from-center | clamp(hypot(x−50, y−50) / 50, 0, 1) |
| --pointer-from-top / left | y / 100 · x / 100 |
| --rotate-x / y | −(x−50) / 3.5 · (y−50) / 3.5 |
| --background-x / y | remap 0..100 → 37..63 · 33..67 |
| --card-opacity | 1 while interacting, springs to 0 on leave |
| --seedx / seedy / --cosmosbg | static per card, so no two cards glitter alike |