services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
60db2a91dfe913ec110ea94e045c0e11c78816d7
mtg-online-drafter/docs/development/devlog/2025-12-17-011500_enhanced_foils.md

1.0 KiB
Raw Blame History

Enhanced Foil Effects

Objective

Make the foil effect on cards "more visible and cooler" by introducing a multi-layered holographic overlay.

Changes

  • Modified src/client/src/components/CardPreview.tsx:
    • Created a consistent FoilOverlay component used by both Mobile and Desktop previews.
    • Layer 1 (Base Holo): Swapped previous subtle gradients for a vibrant amber-300 / fuchsia-400 / cyan-400 gradient with mix-blend-color-dodge. Increased opacity to 100 (blended mode handles the transparency feel).
    • Layer 2 (Shimmer): Added a diagonal white pulse (animate-pulse) with mix-blend-overlay to simulate catching the light.
    • Layer 3 (Depth): Added a top-down white-to-black gradient with mix-blend-soft-light to simulate metallic curvature/surface depth.
    • Fixed linting errors from previous edits (syntax issues with spaces in class strings).

Result

Foil cards now possess a distinct, colorful, and metallic sheen that animates, making them stand out significantly more than standard cards.