feat: Implement advanced foil effects with rolling rainbow, circular glare, and mobile entrance animations, alongside a fix for foil rendering on non-foil cards.
This commit is contained in:
15
docs/development/devlog/2025-12-17-011500_enhanced_foils.md
Normal file
15
docs/development/devlog/2025-12-17-011500_enhanced_foils.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user