KQ-431 · PIXEL/DISSOLVE

Pixel Dissolve

A transition between panels: change the index and the old panel dissolves in seeded pixel blocks — each block flips at its own hashed moment — while the new panel appears in the same blocks. Between transitions the surface is the live panel.

KQ-431 · PIXEL/DISSOLVE

Fieldline · north face

Ridge camp holds through the window.

Wind has eased since the six a.m. check. The crew above the treeline can push for the saddle before the next front rolls in.

  • Access trailcleared
  • Weather windowclosing
  • Equipment cachestaged

block by block

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pixel-dissolve

Props

PropTypeDefaultDescription
index / childrennumber · ReactNode[]Which panel shows; the children are the panels.
block / duration / seednumber · number · numberBlock size in px, the dissolve's length in seconds, and which order the blocks flip in.