services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7b47d566c23f1bbf7cd40bd6654a8b0d61c42d99
mtg-online-drafter/docs/development/devlog/2025-12-17-014500_circular_foil_animation.md

1.1 KiB
Raw Blame History

Circular Foil Animation

Objective

Replace the linear "pulsing" glare with a "gaussian circular animation" to provide a smoother, rotating metallic sheen.

Changes

  • CSS Animation: Added .animate-spin-slow in main.css to rotate elements over an 8-second loop.
  • Foil Component (src/client/src/components/CardPreview.tsx):
    • Removed the pulsing linear gradient.
    • Added a rotating radial gradient:
      • Positioned with absolute inset-[-50%] to create a canvas larger than the card.
      • Uses a white radial gradient (rgba(255,255,255,0.5) 0% -> transparent 60%) centered on this larger canvas.
      • The animate-spin-slow class rotates this entire large gradient layer around the center of the card.
    • This creates an effect where a soft "spotlight" or "sheen" continually drifts across the card surface in a circular pattern, simulating light moving over a holographic texture.

Result

The foil glare is now a soft, rotating circular highlight, giving a distinctly different and more sophisticated "gaussian" light play compared to the previous linear pulse.