Skip to content
This repository was archived by the owner on May 14, 2026. It is now read-only.

Streaming card dissolve: longer + actually pixelated - #25

Merged
mondominator merged 1 commit into
mainfrom
feat/pixel-dissolve-cards
May 5, 2026
Merged

mondominator merged 1 commit into
mainfrom
feat/pixel-dissolve-cards

Conversation

@mondominator

Copy link
Copy Markdown
Owner

Summary

  • Fix exit animation getting truncated: `setExitingSessions` was clearing the card from the DOM after 420ms while the CSS exit ran 550ms — the last ~25% never rendered. Both sides bumped to 1200ms.
  • Replace the `feDisplacementMap`-based warp with 6 stepped `feComponentTransfer` filter variants that share a `feTurbulence` seed; each variant shifts the `feFuncA` intercept so progressively more pixels get masked out via `feComposite operator="in"`. Same pixels disappear in the same order, just more at each step.
  • Enter timing bumped to 1400ms; exit 1200ms.

Why

Existing animation was a smooth wobble (displacement map) that finished too fast to register. New version is a chunky pixel-dissolve — closer to a classic Photoshop dissolve / 8-bit fade than a film fade.

Test plan

  • `npm test` — 41 passed
  • `npm run lint` — no new warnings
  • `npm run build` — clean
  • Visual check on live OpsDec after deploy

Two fixes bundled together because they're entangled:

1. The exit animation was getting truncated. setExitingSessions cleared
   the card from the DOM after 420ms, but the CSS animation ran 550ms,
   so the final ~25% never rendered. Bumped both sides to 1200ms.
2. The "pixel dissolve" was a feDisplacementMap warp, which wobbles
   pixels rather than chunking them. Replaced with 6 stepped filter
   variants that share a feTurbulence seed and shift the feFuncA
   intercept; each variant masks a progressively larger fraction of
   the source via feComposite operator="in". Same pixels disappear
   in the same order, just more of them at each step. Filter URLs
   don't interpolate, so the @Keyframes snap between variants for
   the chunky pixel-falling-off look.

Enter timing also bumped to 1400ms.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@mondominator
mondominator merged commit 7a1dfcd into main May 5, 2026
1 check passed
@mondominator
mondominator deleted the feat/pixel-dissolve-cards branch May 5, 2026 15:03
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant