feat: APNG animated card effects for T3/T4 refractor tiers #186

New Issue

cal · 2026-04-06T21:47:34Z

cal commented

2026-04-06 21:47:34 +00:00

T3 gold shimmer and T4 prismatic rainbow effects have CSS animations defined with animation-play-state: paused in tier_style.html. A future pipeline should capture multi-frame PNGs and assemble APNGs for animated card display.

Requires:

Frame capture loop in Playwright (step through --anim-progress values)
APNG assembly (e.g. via apng Python library)
S3 path convention for .apng files
Bot/web display support for animated images

Spec: docs/superpowers/specs/2026-04-06-refractor-card-art-pipeline-design.md — Out of Scope, Ticket 2

T3 gold shimmer and T4 prismatic rainbow effects have CSS animations defined with `animation-play-state: paused` in `tier_style.html`. A future pipeline should capture multi-frame PNGs and assemble APNGs for animated card display. **Requires:** - Frame capture loop in Playwright (step through `--anim-progress` values) - APNG assembly (e.g. via `apng` Python library) - S3 path convention for `.apng` files - Bot/web display support for animated images **Spec:** `docs/superpowers/specs/2026-04-06-refractor-card-art-pipeline-design.md` — Out of Scope, Ticket 2

Claude added the

ai-working

label 2026-04-07 02:31:17 +00:00

cal referenced this issue from a commit

2026-04-07 02:36:50 +00:00

feat: APNG animated card effects for T3/T4 refractor tiers (#186)

Claude referenced a pull request that will close this issue

2026-04-07 02:37:07 +00:00

feat: APNG animated card effects for T3/T4 refractor tiers (#186) #188

Claude commented

2026-04-07 02:37:23 +00:00

PR #188 opened: #188

Approach: CSS animations are paused in tier_style.html for static PNG capture. For APNG generation, each frame is rendered by injecting an override <style> tag that sets animation-play-state: running !important and a negative animation-delay to seek the animation to a specific point — no actual animation playback required, fully deterministic.

T3 gold shimmer: 12 frames × 200ms over the 2.5s cycle
T4 prismatic sweep + diamond glow: 24 frames × 250ms over the 6s cycle
New endpoint: GET /{player_id}/{card_type}card/{d}/{variant}/animated (T0–T2 returns 404)
Cache path: storage/cards/cardset-{id}/{type}/{player_id}-{date}-v{variant}.apng

S3 upload and bot/web display remain as follow-up work in other repos.

PR #188 opened: https://git.manticorum.com/cal/paper-dynasty-database/pulls/188 **Approach**: CSS animations are paused in `tier_style.html` for static PNG capture. For APNG generation, each frame is rendered by injecting an override `<style>` tag that sets `animation-play-state: running !important` and a negative `animation-delay` to seek the animation to a specific point — no actual animation playback required, fully deterministic. - T3 gold shimmer: 12 frames × 200ms over the 2.5s cycle - T4 prismatic sweep + diamond glow: 24 frames × 250ms over the 6s cycle - New endpoint: `GET /{player_id}/{card_type}card/{d}/{variant}/animated` (T0–T2 returns 404) - Cache path: `storage/cards/cardset-{id}/{type}/{player_id}-{date}-v{variant}.apng` S3 upload and bot/web display remain as follow-up work in other repos.

Claude added

ai-pr-opened

and removed

ai-working

labels 2026-04-07 02:37:30 +00:00

cal referenced this issue from a commit

2026-04-07 03:22:09 +00:00

feat: APNG animated card effects for T3/T4 refractor tiers (#186)

cal closed this issue

2026-04-07 03:22:50 +00:00

cal referenced this issue from a commit

2026-04-07 03:22:51 +00:00