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

13
docs/development/devlog/2025-12-17-013500_optimized_rolling_foil.md Normal file
View File

@@ -0,0 +1,13 @@
# Optimized Rolling Rainbow Foil
## Objective
Update the foil effect to use a "continuous rainbow" and a "milder white background" as specifically requested.
## Changes
- Modified `FoilOverlay` in `src/client/src/components/CardPreview.tsx`:
- **Continuous Rainbow**: Updated the gradient to encompass the full spectrum (`red` -> `yellow` -> `green` -> `blue` -> `purple` -> `red`) over a linear gradient. This seamless loop ensures the rolling animation (`animate-bg-roll`) is smooth and continuously colorful.
- **Milder White Background**: Removed the heavy soft-light and pulse layers. Replaced them with a very subtle `white/5` overlay using `mix-blend-overlay`. This brightens the foil slightly without washing out the colors.
- **Color Dodge**: Applied `mix-blend-color-dodge` to the container to ensure the rainbow colors interact vibrantly with the underlying card art.
## Result
Foil cards now feature a smooth, full-spectrum rainbow scrolling effect that feels high-quality and "magical," with a balanced brightness level.