docs: refractor card art mockup and visual spec #53

cal · 2026-04-04T00:34:14Z

cal commented

2026-04-04 00:34:14 +00:00

Summary

Refractor tier card art mockup with approved visual effects. Includes an interactive HTML mockup for iterating on tier visuals and a cherry-pick reference spec documenting what to port to production.

Changes

Diamond tier indicator: 4-quadrant diamond at column header intersection, fills progressively following baseball base path (1st → 2nd → 3rd → Home)
Metallic sheen + pulse glow: Approved effect combo — metallic gradient on filled quads with tight-radius animated glow pulse
Tier colors: T1 orange, T2 red, T3 purple, T4 blue-flame blue
T3 animation: Gold shimmer sweep across header (2.5s loop)
T4 animation: 4-layer system — prismatic rainbow header, gold/teal dual glow pulse, column bar shimmer ripple
Visual spec doc: docs/refractor-visual-spec.md — production handoff reference with exact CSS, colors, and implementation notes

Testing

Interactive HTML mockup — open docs/refractor-tier-mockup.html in a browser to preview all tiers and effects.

🤖 Generated with Claude Code

## Summary Refractor tier card art mockup with approved visual effects. Includes an interactive HTML mockup for iterating on tier visuals and a cherry-pick reference spec documenting what to port to production. ## Changes - **Diamond tier indicator**: 4-quadrant diamond at column header intersection, fills progressively following baseball base path (1st → 2nd → 3rd → Home) - **Metallic sheen + pulse glow**: Approved effect combo — metallic gradient on filled quads with tight-radius animated glow pulse - **Tier colors**: T1 orange, T2 red, T3 purple, T4 blue-flame blue - **T3 animation**: Gold shimmer sweep across header (2.5s loop) - **T4 animation**: 4-layer system — prismatic rainbow header, gold/teal dual glow pulse, column bar shimmer ripple - **Visual spec doc**: `docs/refractor-visual-spec.md` — production handoff reference with exact CSS, colors, and implementation notes ## Testing Interactive HTML mockup — open `docs/refractor-tier-mockup.html` in a browser to preview all tiers and effects. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

cal added 1 commit 2026-04-04 00:34:15 +00:00

docs: refractor tier mockup — diamond indicator, effects, and visual spec f329d74ed8

Interactive mockup for refractor card art with:
- 4-quadrant diamond tier indicator (baseball base-path fill order)
- Metallic sheen + pulse glow effect (approved combo)
- Tier colors: T1 orange, T2 red, T3 purple, T4 blue-flame
- T3 gold shimmer sweep, T4 prismatic rainbow + dual glow + bar shimmer
- Cherry-pick reference: docs/refractor-visual-spec.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Claude added the

ai-reviewing

label 2026-04-04 00:45:27 +00:00

Claude reviewed 2026-04-04 00:47:32 +00:00

Claude left a comment

AI Code Review

Files Reviewed

docs/refractor-tier-mockup.html (added — 2239 lines)
docs/refractor-visual-spec.md (added — 243 lines)

Findings

Correctness

The HTML mockup is self-contained and matches all effects described in the PR body: 4-quadrant diamond with baseball base-path fill order, metallic sheen + pulse glow, T1–T4 tier colors, T3 shimmer sweep, T4 layered animation system.
renderCardHTML() constructs HTML via template literals from TIER_PRESETS — all data is hardcoded config, not user input. No correctness risk.
The spec doc's "Grid-to-Visual Mapping" table (div positions after 45° rotation) aligns with the HTML implementation.
The "What NOT to port" section is well-scoped and prevents cherry-pick confusion (e.g. correctly excludes the mockup control panel, T4b experimental variant, and the unused diamondGlow toggle since metallic always enables it).
Database/API note correctly identifies that diamondFill is derivable from refractor_tier — no new schema fields required.

Security

No external scripts. Only Google Fonts loaded via <link> (standard CDN for mockups).
No fetch(), XHR, localStorage, or document.cookie usage.
All five innerHTML assignments use template literals built from TIER_PRESETS and tierState — fully hardcoded JS config, no user-controlled input reaches innerHTML.
No credentials, tokens, or PII.

Style & Conventions

Branch wip/refractor-card-art → main is consistent with the project's "Feature branches → main" convention.
Files land in docs/ alongside existing design docs — appropriate location.
No Python code changes; no tests needed.

Suggestions

Minor: The Playwright APNG Capture note in the spec (§3) is cut off mid-sentence ("Playwright captures 8 f…") — may want to complete that sentence before treating this spec as the production handoff reference.

Verdict: COMMENT (LGTM)

Pure documentation/design artifacts, no production code touched. Mockup faithfully implements all described effects. Spec doc is well-structured for handoff. Ready to merge.

Automated review by Claude PR Reviewer

## AI Code Review ### Files Reviewed - `docs/refractor-tier-mockup.html` (added — 2239 lines) - `docs/refractor-visual-spec.md` (added — 243 lines) ### Findings #### Correctness - The HTML mockup is self-contained and matches all effects described in the PR body: 4-quadrant diamond with baseball base-path fill order, metallic sheen + pulse glow, T1–T4 tier colors, T3 shimmer sweep, T4 layered animation system. - `renderCardHTML()` constructs HTML via template literals from `TIER_PRESETS` — all data is hardcoded config, not user input. No correctness risk. - The spec doc's "Grid-to-Visual Mapping" table (div positions after 45° rotation) aligns with the HTML implementation. - The "What NOT to port" section is well-scoped and prevents cherry-pick confusion (e.g. correctly excludes the mockup control panel, T4b experimental variant, and the unused `diamondGlow` toggle since metallic always enables it). - Database/API note correctly identifies that `diamondFill` is derivable from `refractor_tier` — no new schema fields required. #### Security - No external scripts. Only Google Fonts loaded via `<link>` (standard CDN for mockups). - No `fetch()`, XHR, `localStorage`, or `document.cookie` usage. - All five `innerHTML` assignments use template literals built from `TIER_PRESETS` and `tierState` — fully hardcoded JS config, no user-controlled input reaches innerHTML. - No credentials, tokens, or PII. #### Style & Conventions - Branch `wip/refractor-card-art` → `main` is consistent with the project's "Feature branches → `main`" convention. - Files land in `docs/` alongside existing design docs — appropriate location. - No Python code changes; no tests needed. #### Suggestions - Minor: The `Playwright APNG Capture` note in the spec (§3) is cut off mid-sentence ("Playwright captures 8 f…") — may want to complete that sentence before treating this spec as the production handoff reference. ### Verdict: COMMENT (LGTM) Pure documentation/design artifacts, no production code touched. Mockup faithfully implements all described effects. Spec doc is well-structured for handoff. Ready to merge. --- *Automated review by Claude PR Reviewer*

Claude added

ai-reviewed

and removed

ai-reviewing

labels 2026-04-04 00:47:57 +00:00

Claude approved these changes 2026-04-04 03:13:28 +00:00

Claude left a comment

Approved via pd-pr

cal added 1 commit 2026-04-04 03:13:33 +00:00

Merge branch 'main' into wip/refractor-card-art e266f814ca

cal merged commit 87599a67d5 into main

2026-04-04 03:13:35 +00:00