Signature

Pixel page transition

A full-screen pixel dissolve between pages, drawn on one fixed <canvas> (not thousands of elements), started with pixelTransition(). Squares fill in a noisy left-to-right sweep, then clear the same way. Reduced motion turns it into a short plain fade.

demos/page-transition.tsx

import { Button } from "pixelbits/button";
import { pixelTransition } from "pixelbits/page-transition";

// <PixelTransition /> is mounted once in this site's layout.
export default function Demo() {
  return (
    <Button
      variant="primary"
      onClick={() => pixelTransition(() => new Promise((r) => setTimeout(r, 300)))}
    >
      Run a page transition
    </Button>
  );
}

Installation

npm: import

import { PixelTransition, pixelTransition } from "pixelbits/page-transition";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/page-transition.json

API

<PixelTransition>

Example

// once, in the root layout
<PixelTransition />

Prop	Type	Default	Description
size	number	32	Square size in CSS px.
duration	number	480	Duration of covering (and of uncovering) in ms.
color	string	"var(--pb-text)"	Fill color; any CSS color.
className	string	—	Extra classes for the canvas.