services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement advanced foil effects with rolling rainbow, circular glare, and mobile entrance animations, alongside a fix for foil rendering on non-foil cards.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 01:11:50 +01:00
parent 119af95cee
commit f7d22377fa
16 changed files with 314 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/development/devlog/2025-12-17-014500_circular_foil_animation.md Normal file
View File

@@ -0,0 +1,17 @@
# 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.