diff --git a/docs/refractor-tier-mockup.html b/docs/refractor-tier-mockup.html new file mode 100644 index 0000000..ec06cef --- /dev/null +++ b/docs/refractor-tier-mockup.html @@ -0,0 +1,2239 @@ + + + + + +Refractor Tier Visual Design — Paper Dynasty + + + + + + + + +
+

Refractor Tier Visual Design

+
Paper Dynasty — T0 through T4 — Internal border progression, tier gem markers, sacred blue/salmon body
+
+ + +
+ + Applies to T3 and T4 only — T0, T1, T2 always static +
+ + +
+
T0 Standard → T4 Superfractor — Click any card for full-size view
+
+ + +
+ APNG Animation Info + +
+
+ + +
+
+
Full-size — T0 Standard
+
+
+ +
+

Tier Controls

+
Adjust the selected tier
+ +
+ + +
+

Internal Borders

+
+ + +
+
+ + + 3px +
+
+ + + 3px +
+
+ + +
+

Inset Glow (depth)

+
+ + +
+
+ + + 0px +
+
+ + + 0px +
+
+ + + 0% +
+
+ + +
+
+ + +
+

Header Background

+
+ + +
+
+ + +
+

Column Header Gradients

+
+ + +
+
+ + +
+
+ + +
+

Corner Accents (T4)

+
+ + +
+
+ + +
+
+ + + 30px +
+
+ + + 3px +
+
+ + +
+

Tier Diamond

+
+ + +
+
+ + +
+
+ + +
+
+ + + 26px +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ + + + diff --git a/docs/refractor-visual-spec.md b/docs/refractor-visual-spec.md new file mode 100644 index 0000000..313af1a --- /dev/null +++ b/docs/refractor-visual-spec.md @@ -0,0 +1,243 @@ +# Refractor Tier Visual Spec — Cherry-Pick Reference + +Approved effects from `wip/refractor-card-art` mockup (`docs/refractor-tier-mockup.html`). +This document is the handoff reference for applying these visuals to the production card renderer. + +--- + +## 1. Tier Diamond Indicator + +A 4-quadrant diamond icon centered at the intersection of the left/right column headers. +Replaces all per-tier emoji badges. + +### Positioning & Structure + +- **Position**: `left: 600px; top: 78.5px` (centered between column header top/bottom borders) +- **Size**: `19px × 19px` (tips fit within header row bounds) +- **Rotation**: `transform: translate(-50%, -50%) rotate(45deg)` +- **Layout**: CSS Grid `2×2`, `gap: 2px` +- **Background (gap color)**: `rgba(0,0,0,0.75)` with `border-radius: 2px` +- **Base shadow**: `0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5)` +- **z-index**: 20 + +### Fill Order (Baseball Base Path) + +Quadrants fill progressively following the base path: **1st → 2nd → 3rd → Home**. + +| Tier | Quadrants Filled | Visual | +|------|-----------------|--------| +| T0 (Base) | 0 — no diamond shown | — | +| T1 | 1st base (right) | ◇ with right quadrant filled | +| T2 | 1st + 2nd (right + top) | ◇ with two quadrants | +| T3 | 1st + 2nd + 3rd (right + top + left) | ◇ with three quadrants | +| T4 | All 4 (full diamond) | ◆ fully filled | + +### Grid-to-Visual Mapping (after 45° rotation) + +The CSS grid positions map to visual positions as follows: + +| Grid Slot | Visual Position | Base | +|-----------|----------------|------| +| div 1 (top-left) | TOP | 2nd base | +| div 2 (top-right) | RIGHT | 1st base | +| div 3 (bottom-left) | LEFT | 3rd base | +| div 4 (bottom-right) | BOTTOM | Home plate | + +**Render order in HTML**: `[2nd, 1st, 3rd, home]` (matches grid slot order above). + +### Quadrant Fill Styling + +Unfilled quads: `background: rgba(0,0,0,0.3)` (dark placeholder). + +Filled quads use a gradient + inset shadow for depth: + +```css +/* Standard filled quad */ +.diamond-quad.filled { + background: linear-gradient(135deg, {highlight} 0%, {color} 50%, {color-darkened-75%} 100%); + box-shadow: + inset 0 1px 2px rgba(255,255,255,0.45), + inset 0 -1px 2px rgba(0,0,0,0.35), + inset 1px 0 2px rgba(255,255,255,0.15); +} +``` + +### Approved Effect: Metallic Sheen + Pulse Glow + +The approved diamond effect combines metallic inset highlights with an animated glow pulse. + +**Metallic gradient** (replaces standard gradient on filled quads): +```css +background: linear-gradient(135deg, + rgba(255,255,255,0.9) 0%, + {highlight} 20%, + {color} 50%, + {color-darkened-60%} 80%, + {highlight} 100%); +``` + +**Metallic inset shadows** (boosted highlights): +```css +.diamond-quad.metallic.filled { + box-shadow: + inset 0 1px 3px rgba(255,255,255,0.7), + inset 0 -1px 2px rgba(0,0,0,0.5), + inset 1px 0 3px rgba(255,255,255,0.3), + inset -1px 0 2px rgba(0,0,0,0.2); +} +``` + +**Glow pulse animation** (tight diameter, applied to `.tier-diamond` container): +```css +@keyframes diamond-glow-pulse { + 0% { box-shadow: + 0 0 0 1.5px rgba(0,0,0,0.7), + 0 2px 5px rgba(0,0,0,0.5), + 0 0 5px 1px var(--diamond-glow-color); + } + 50% { box-shadow: + 0 0 0 1.5px rgba(0,0,0,0.5), + 0 2px 4px rgba(0,0,0,0.3), + 0 0 8px 3px var(--diamond-glow-color), + 0 0 14px 5px color-mix(in srgb, var(--diamond-glow-color) 25%, transparent); + } + 100% { /* same as 0% */ } +} + +.tier-diamond.diamond-glow { + animation: diamond-glow-pulse 2s ease-in-out infinite; +} +``` + +Metallic effect **automatically** enables the glow pulse (no separate toggle needed in production). + +--- + +## 2. Tier Diamond Colors + +| Tier | Color (body) | Highlight (bright edge) | Glow Color | Intent | +|------|-------------|------------------------|------------|--------| +| T1 | `#d46a1a` | `#f0a050` | `#d46a1a` | Orange | +| T2 | `#b82020` | `#e85050` | `#b82020` | Red | +| T3 | `#7b2d8e` | `#b860d0` | `#7b2d8e` | Purple | +| T4 | `#1a6af0` | `#60b0ff` | `#1a6af0` | Blue flame | + +Progression: warm → hot → regal → transcendent. + +--- + +## 3. T3 Gold Shimmer Sweep (Header Animation) + +A single narrow gold stripe sweeps left-to-right across the card header. + +- **Duration**: 2.5s loop, ease-in-out +- **Gradient**: 105° diagonal, peak opacity 0.38 +- **Key colors**: `rgba(255,240,140,0.18)` → `rgba(255,220,80,0.38)` → `rgba(255,200,60,0.30)` +- **Scope**: Header only (`.card-header` has `overflow: hidden`) +- **z-index**: 5 + +```css +@keyframes t3-shimmer { + 0% { transform: translateX(-130%); } + 100% { transform: translateX(230%); } +} +``` + +### Playwright APNG Capture + +For static card rendering, the shimmer position is driven by `--anim-progress` (0.0–1.0) instead of CSS animation. Playwright captures 8 frames to produce an APNG. + +--- + +## 4. T4 Superfractor — Layered Animation System + +T4 stacks four independent effect layers for a premium look qualitatively different from T3. + +### Layer 1: Prismatic Rainbow Header Sweep + +- Seamless loop using a 200%-wide element with two mirrored rainbow bands +- `translateX(-50%)` over 6s linear = continuous wrap +- Colors: red → gold → green → blue → violet → pink, all at ~0.28 opacity +- z-index: 1 (behind header text at z-index: 2) +- Header children get `position: relative; z-index: 2` to sit above rainbow + +### Layer 2+3: Gold/Teal Dual Glow Pulse + +- Applied via `::before` on the card element +- Gold and teal in opposition: when gold brightens, teal dims and vice versa +- 2s ease-in-out loop +- Inset box-shadows (`45px 12px` gold, `80px 5px` teal) +- z-index: 4 + +```css +@keyframes t4-dual-pulse { + 0% { box-shadow: inset 0 0 45px 12px rgba(201,169,78,0.40), + inset 0 0 80px 5px rgba(45,212,191,0.08); } + 50% { box-shadow: inset 0 0 45px 12px rgba(201,169,78,0.08), + inset 0 0 80px 5px rgba(45,212,191,0.38); } + 100% { /* same as 0% */ } +} +``` + +### Layer 4: Column Bar Shimmer + +- White highlight (`rgba(255,255,255,0.28)`) sweeps across each column header bar +- 1.6s ease-in-out loop, staggered by -0.25s per bar for a ripple effect +- 6 bars total (3 left group, 3 right group) + +--- + +## 5. T4b Variant — Full-Card Rainbow + +Same as T4 but the prismatic rainbow covers the entire card height (not just header). + +- Applied via `::after` on `.pd-card` instead of `.card-header::after` +- Slightly reduced opacity (0.18–0.22 vs 0.28–0.32) +- z-index: 6 (above content) +- Dual glow pulse uses a separate `.dual-pulse-overlay` div at 2.8s (slightly slower) +- Column bar shimmer identical to T4 + +**Status**: Experimental variant. May or may not ship — kept as an option. + +--- + +## 6. Corner Accents (T4 Only) + +L-shaped corner brackets on all four card corners. + +- **Color**: `#c9a94e` (gold) +- **Size**: 35px arms, 3px thick +- **Implementation**: Four absolutely-positioned divs with two-sided borders each +- **z-index**: 6 + +--- + +## 7. Implementation Notes for Production + +### What to port + +1. **Diamond indicator CSS** (`.tier-diamond`, `.diamond-quad`, keyframes) → add to card template stylesheet +2. **Diamond HTML generation** → add to Playwright card renderer (4 divs in a grid) +3. **Metallic + glow effect** → always apply metallic class + glow animation to filled diamonds +4. **T3 shimmer** → APNG capture with `--anim-progress` variable (8 frames) +5. **T4 layered effects** → APNG capture with `--anim-progress` driving all 4 layers +6. **Diamond colors** → store in tier config or derive from tier level +7. **Corner accents** → T4 only, simple border divs + +### What NOT to port + +- The mockup control panel UI (sliders, dropdowns, color pickers) +- The `diamondEffect` dropdown with 5 options (we chose metallic — hardcode it) +- The separate `diamondGlow` toggle (metallic always includes glow) +- Border preset / header type controls (these are already in production tier configs) +- T4b full-card rainbow (unless explicitly promoted later) + +### Database/API considerations + +The diamond fill count is already derivable from the tier level — no new database fields needed: +- `refractor_tier = 1` → `diamondFill = 1`, color = orange +- `refractor_tier = 2` → `diamondFill = 2`, color = red +- `refractor_tier = 3` → `diamondFill = 3`, color = purple +- `refractor_tier = 4` → `diamondFill = 4`, color = blue-flame + +Diamond colors are purely visual (CSS) — they don't need to be stored.