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:
@@ -41,3 +41,16 @@
|
||||
- [Mobile Long-Press Preview](./devlog/2025-12-17-005500_mobile_long_press.md): Completed. Implemented long-press trigger for card magnification on small screens.
|
||||
- [Mobile Fullscreen Preview](./devlog/2025-12-17-010000_mobile_fullscreen_preview.md): Completed. Updated mobile preview to be a centered fullscreen overlay.
|
||||
- [Mobile Preview Animations](./devlog/2025-12-17-010500_mobile_preview_animations.md): Completed. Implemented phase-in layout and phase-out animations for mobile preview.
|
||||
- [Mobile Preview Polish](./devlog/2025-12-17-011000_mobile_preview_polish.md): Completed. Refined mobile enter/exit easing and added premium foil finish.
|
||||
- [Enhanced Foil Effects](./devlog/2025-12-17-011500_enhanced_foils.md): Completed. implemented a multi-layer holographic sheen for foil cards.
|
||||
- [Rolling Rainbow Foil](./devlog/2025-12-17-012000_rolling_rainbow_foil.md): Completed. Updated foil effect to feature a scrolling, milder rainbow shimmer.
|
||||
- [Card Visibility Boost](./devlog/2025-12-17-013000_card_visibility_boost.md): Completed. Added mild white overlay to all card previews for better visibility on dark backgrounds.
|
||||
- [Optimized Rolling Foil](./devlog/2025-12-17-013500_optimized_rolling_foil.md): Completed. Implemented continuous full-spectrum rainbow foil effect with mild white sheen.
|
||||
- [Metallic Foil Refinement](./devlog/2025-12-17-014000_metallic_foil_refinement.md): Completed. Adjusted foil to emphasize metallic shimmer/glare over rainbow color saturation.
|
||||
- [Circular Foil Animation](./devlog/2025-12-17-014500_circular_foil_animation.md): Completed. Replaced linear glare with a rotating gaussian circular sheen.
|
||||
- [Mild Foil Animation](./devlog/2025-12-17-015000_mild_foil_animation.md): Completed. Tuned down foil brightness and overlay intensity to be milder and consistent with non-foils.
|
||||
- [Pro Foil Implementation](./devlog/2025-12-17-020000_pro_foil_implementation.md): Completed. Implemented advanced CSS-based holographic texture and animation.
|
||||
- [Universal Preview Animations](./devlog/2025-12-17-020500_universal_preview_animations.md): Completed. Enabled entrance/exit animations for card previews on all devices.
|
||||
- [Mobile Touch Interaction](./devlog/2025-12-17-021000_mobile_touch_fix.md): Completed. Updated long-press logic to persist preview during finger movement, closing only on release.
|
||||
- [Entrance Animation Fix](./devlog/2025-12-17-021500_entrance_animation_fix.md): Completed. Implemented 'isMounted' state to ensuring scale-in animation triggers correctly on first render.
|
||||
- [Foil Bug Fix](./devlog/2025-12-17-022000_foil_bug_fix.md): Completed. Fixed regression where foil animations applied to non-foil cards on desktop.
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
# Mobile Preview Enhancements
|
||||
|
||||
## Objective
|
||||
Enhance the mobile card preview with sophisticated entrance/exit animations and a premium foil effect.
|
||||
|
||||
## Changes
|
||||
- **Refined Animations**:
|
||||
- **Entering**: Uses `scale-100 opacity-100 ease-out` to simulate the card smoothly arriving into view.
|
||||
- **Exiting**: Uses `scale-95 opacity-0 ease-in` to simulate the card receding and fading away.
|
||||
- The transition duration is set to 300ms for a fluid feel.
|
||||
|
||||
- **Foil Overlay**:
|
||||
- Added a multi-layered foil effect for cards with `isFoil=true`.
|
||||
- **Layer 1**: A moving pulse gradient (`bg-gradient-to-tr` with `via-white/20`) that simulates light catching the surface.
|
||||
- **Layer 2**: A static color-dodge gradient (`bg-gradient-to-br` with purple/pink/blue) to give the characteristic holographic tint.
|
||||
|
||||
- **Effect Implementation**:
|
||||
- The `FloatingPreview` component now orchestrates these classes based on the `isClosing` prop passed from the wrapper.
|
||||
|
||||
## Result
|
||||
The mobile experience now feels premium, with cards gracefully popping in and out, and foils displaying a distinctive animated sheen.
|
||||
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.
|
||||
@@ -0,0 +1,15 @@
|
||||
# Rolling Rainbow Foil Effect
|
||||
|
||||
## Objective
|
||||
Implement a "milder but more colorful" foil effect with a "rolling rainbow" animation and a mild white overlay, consistent across mobile and desktop.
|
||||
|
||||
## Changes
|
||||
- **CSS Animation**: Added `@keyframes bg-roll` and `.animate-bg-roll` utility in `main.css` to create a continuous background position scrolling effect.
|
||||
- **Enhanced Foil Overlay**: Updated `FoilOverlay` in `CardPreview.tsx`:
|
||||
- **Layer 1 (Rolling Rainbow)**: Uses a wide `gradient-to-r` spanning red -> blue -> red (`200% width`). It uses `animate-bg-roll` to scroll horizontally, simulating the color shifting of a foil card as it moves.
|
||||
- **Layer 2 (Light Glint)**: Retained a subtle diagonal `white/30` pulse (`mix-blend-overlay`) for dynamic lighting.
|
||||
- **Layer 3 (White Sheen)**: Added a static `white/10` overlay (`mix-blend-soft-light`) to provide the requested "mild white overlay" for a glossy finish.
|
||||
- **Lint Fix**: Cast `card.finish` to string to resolve TypeScript type overlap errors.
|
||||
|
||||
## Result
|
||||
Foil cards now exhibit a smooth, colorful, rolling rainbow reflection that looks premium and dynamic without being overly chaotic.
|
||||
@@ -0,0 +1,13 @@
|
||||
# General Card Visibility Boost
|
||||
|
||||
## Objective
|
||||
Add a mild white overlay to all magnified card previews (both mobile and desktop) to improve visibility against dark backgrounds, as requested.
|
||||
|
||||
## Changes
|
||||
- Modified `src/client/src/components/CardPreview.tsx`:
|
||||
- Inserted a `<div className="absolute inset-0 bg-white/10 pointer-events-none mix-blend-overlay" />` into the `FloatingPreview` component.
|
||||
- This overlay is applied to **every** card, regardless of finish (Foil/Normal) or device type.
|
||||
- It sits immediately on top of the image but below the Foil effects, ensuring it brightens the base art without washing out the holographic details.
|
||||
|
||||
## Result
|
||||
All card previews now have slightly lifted blacks and increased brightness, making them "pop" more against the dark UI backdrops.
|
||||
@@ -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.
|
||||
@@ -0,0 +1,13 @@
|
||||
# Metallic Foil Refinement
|
||||
|
||||
## Objective
|
||||
Adjust the foil effect to prioritize "visible shimmer" over "color tinting," preventing the effect from washing out the card's original colors.
|
||||
|
||||
## Changes
|
||||
- Modified `FoilOverlay` in `src/client/src/components/CardPreview.tsx`:
|
||||
- **Reduced Saturation**: Lowered the opacity of the rolling rainbow layer from `60` down to `30`. This keeps the dynamic color shift but makes it much more subtle, preventing it from overpowering the artwork.
|
||||
- **Increased Shimmer**: Added a strong `via-white/40` diagonal glare layer with `mix-blend-overlay` and `opacity-80`. This adds a bright, metallic "pop" that moves (`animate-pulse`) across the card, simulating high-gloss reflection.
|
||||
- **Screen Gloss**: Changed the top finish layer to `mix-blend-screen` with `white/5`. This adds a neutral brightness that lifts the metallic look without shifting the hue.
|
||||
|
||||
## Result
|
||||
The foil effect now looks like a highly reflective metallic surface (the "effect" is visible) rather than a colored filter, preserving the integrity of the original card art.
|
||||
@@ -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.
|
||||
@@ -0,0 +1,16 @@
|
||||
# Mild Foil Animation
|
||||
|
||||
## Objective
|
||||
Reduce the intensity of foil effects to make the static appearance identical to non-foil cards (as requested), while keeping the animation "mildly visible" rather than dominating.
|
||||
|
||||
## Changes
|
||||
- Modified `FoilOverlay` in `src/client/src/components/CardPreview.tsx`:
|
||||
- **Removed Static Gloss**: Deleted the `bg-white/5 mix-blend-screen` layer. This ensures the base brightness of foil cards matches the standard "Universal Gloss" shared with non-foils.
|
||||
- **Softened Circular Glare**:
|
||||
- Reduced the white intensity in the radial gradient from `0.5` to `0.25`.
|
||||
- Reduced the layer opacity from `80` to `25`.
|
||||
- This makes the rotating white sheen subtle and ghostly rather than a bright spotlight.
|
||||
- *Retained*: The low-opacity rolling rainbow layer (`opacity-30`) to provide the necessary color play.
|
||||
|
||||
## Result
|
||||
Foil cards now look cleaner and less washed out, matching the visual weight of normal cards, but possess a delicate, rotating shimmer that catches the eye without distracting from the art.
|
||||
@@ -0,0 +1,20 @@
|
||||
# Pro Foil Implementation
|
||||
|
||||
## Objective
|
||||
Implement a high-fidelity "Pro" foil effect using generic CSS techniques inspired by community "Holo" styles, creating a sophisticated rainbow and texture mapping.
|
||||
|
||||
## Changes
|
||||
- **CSS Class `foil-holo`**:
|
||||
- Added to `src/client/src/styles/main.css`.
|
||||
- This class builds a complex multi-layered background image stack:
|
||||
- **Layer 1**: Vertical Repeating Rainbow (`0deg` linear gradient).
|
||||
- **Layer 2**: Diagonal Texture (`133deg` repeating linear gradient with hard-light/hue stops).
|
||||
- Uses `background-blend-mode: screen, hue` to mix these layers dynamically.
|
||||
- Uses `mix-blend-mode: color-dodge` to composite onto the card image.
|
||||
- Includes a custom animation `foil-shift` (15s linear infinite) that shifts the background position vertically and diagonally, creating an "always active" shimmering effect.
|
||||
- **CardPreview Update**:
|
||||
- Updated `FoilOverlay` to use the `.foil-holo` class.
|
||||
- Retained the **Gaussian Circular Glare** (`radial-gradient` + `animate-spin-slow`) as a top-layer "spotlight" effect.
|
||||
|
||||
## Result
|
||||
The foil effect is now significantly more intricate, featuring vertical color bands and diagonal textures that shift over time, mimicking the look of high-end TCG holofoils (like "Secret Rares" or "Full Arts").
|
||||
@@ -0,0 +1,18 @@
|
||||
# Universal Preview Animations
|
||||
|
||||
## Objective
|
||||
Implement graceful appearing and disappearing animations for card previews on **all** screens (Desktop + Mobile), ensuring a polished feel uniform across the platform.
|
||||
|
||||
## Changes
|
||||
- Modified `src/client/src/components/CardPreview.tsx`:
|
||||
- **CardHoverWrapper**: Updated the logic for `shouldShow` state management. Removed the `isMobile` restriction on the exit delay. Now, **all devices** respect the 300ms unmount timeout, giving the exit animation time to play before the component is removed from the DOM.
|
||||
- **FloatingPreview (Desktop Mode)**:
|
||||
- Added `transition-all duration-300` to the desktop container's inner div.
|
||||
- Applied dynamic classes based on `isClosing`:
|
||||
- **Entering**: `scale-100 opacity-100 ease-out`
|
||||
- **Exiting**: `scale-95 opacity-0 ease-in`
|
||||
- This effectively replicates the "pop-in / pop-out" animation that was previously mobile-only.
|
||||
- Fixed duplicated syntax errors introduced during the update logic.
|
||||
|
||||
## Result
|
||||
On desktop, hovering over a card now triggers a smooth scale-up phase-in. When the mouse leaves, the card preview shrinks slightly and fades out gracefully rather than disappearing instantly. This matches the mobile long-press behavior.
|
||||
@@ -0,0 +1,16 @@
|
||||
# Mobile Touch Interaction Logic
|
||||
|
||||
## Objective
|
||||
Enhance mobile usability by modifying the long-press behavior. The preview should persist while the user moves their finger across the screen (e.g., to inspect different parts of the card or simply drift) and only disappear upon releasing the finger (`touchend`).
|
||||
|
||||
## Changes
|
||||
- Modified `src/client/src/components/CardPreview.tsx`:
|
||||
- Updated `handleTouchMove` in `CardHoverWrapper`.
|
||||
- Removed the `setIsLongPressing(false)` call inside the movement threshold check.
|
||||
- **Logic**:
|
||||
- If the user moves their finger *before* the 500ms long-press timer completes, the timer is cleared (canceling the preview), interpreting the action as a scroll.
|
||||
- If the user moves their finger *after* the preview has appeared (`isLongPressing` is true), the movement is ignored, and the preview **remains visible**.
|
||||
- The preview is now effectively closed only by `handleTouchEnd` (lifting the finger).
|
||||
|
||||
## Result
|
||||
This creates a much more forgiving and "tactile" experience on mobile, allowing users to hold their thumb on a card and shift it slightly without the preview abruptly vanishing.
|
||||
@@ -0,0 +1,17 @@
|
||||
# Entrance Animation Fix
|
||||
|
||||
## Objective
|
||||
Ensure the card preview plays the "scale-up fade-in" animation when it first appears (mounting), not just when disappearing.
|
||||
|
||||
## Changes
|
||||
- Modified `FloatingPreview` in `src/client/src/components/CardPreview.tsx`:
|
||||
- Introduced a generic `isMounted` state initialized to `false`.
|
||||
- Added a `useEffect` that sets `isMounted` to `true` on the next animation frame after mount.
|
||||
- Updated CSS logic to check a combined `isActive` state (`isMounted && !isClosing`).
|
||||
- **Logic**:
|
||||
- **Mount (0ms)**: `isActive` is false `->` `opacity-0 scale-95`.
|
||||
- **Next Frame (~16ms)**: `isMounted` becomes true `->` `isActive` becomes true `->` `transition-all` triggers to `opacity-100 scale-100`.
|
||||
- **Unmount Trigger**: `isClosing` becomes true `->` `isActive` becomes false `->` Transitions back to `opacity-0 scale-95`.
|
||||
|
||||
## Result
|
||||
The card preview now smoothly "pops in" from 95% scale and 0 opacity every time it is triggered, providing a consistent, high-quality feel to the UI interactions.
|
||||
13
docs/development/devlog/2025-12-17-022000_foil_bug_fix.md
Normal file
13
docs/development/devlog/2025-12-17-022000_foil_bug_fix.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# Bug Fix: Unconditional Foil Overlay
|
||||
|
||||
## Objective
|
||||
Correct the issue where foil holographic animations were appearing on non-foil cards in the desktop view.
|
||||
|
||||
## Changes
|
||||
- Modified `FloatingPreview` in `src/client/src/components/CardPreview.tsx`:
|
||||
- In the desktop return block, the code manually embedding the foil effect divs (introduced in a previous step) was missing the `{isFoil && ...}` conditional wrapper.
|
||||
- Replaced the manual div insertion with the `<FoilOverlay />` component, which encapsulates the foil logic correctly.
|
||||
- Wrapped this component call in the `{isFoil && <FoilOverlay />}` check to ensure it only renders for cards with `foil` or `etched` finishes.
|
||||
|
||||
## Result
|
||||
Foil animations now strictly adhere to card metadata, appearing only on actual foil cards as intended. Normal cards display cleanly without any holographic overlay.
|
||||
Reference in New Issue
Block a user