Split Canvas

Shaders 37

About

Scroll-driven WebGL pixel-blind transition between images on a grid canvas, with editorial captions, light/dark theming, container-responsive layout, and reduced-motion support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Split Canvas to your project and fits it to your theme.

Code

How Split Canvas is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import SplitCanvas, { type SplitCanvasItem } from "@/components/ui/split-canvas";

const ASSETS = "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/pixelated-image";

const items: SplitCanvasItem[] = [
  {
    image: `${ASSETS}/banana.png`,
    label: "01",
    title: "Slow-ripened banana",
    description: "Picked late and blended whole for a naturally sweet, creamy base — no added sugar, ever.",
  },
  {
    image: `${ASSETS}/cherry.png`,
    label: "02",
    title: "Tart summer cherry",
    description: "Pressed within hours of harvest to keep the bright, deep-red bite that fades on the shelf.",
  },
  {
    image: `${ASSETS}/mango.png`,
    label: "03",
    title: "Sun-dried mango",
    description: "Alphonso mangoes, dried slowly in open air until the flavour turns rich and almost floral.",
  },
  {
    image: `${ASSETS}/pineapple.png`,
    label: "04",
    title: "Cold-pressed pineapple",
    description: "A sharp, clean finish that cuts through every blend and keeps the whole range feeling fresh.",
  },
  {
    image: `${ASSETS}/watermelon.png`,
    label: "05",
    title: "Crisp watermelon",
    description: "Light, hydrating, and gone by the end of August — our most-requested seasonal pour.",
  },
];

const settings = {
  gridSize: 16,
  numSlices: 32,
  canvasSize: 560,
  gridOpacity: 0.15,
};

export default function SplitCanvasDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <main className="w-full bg-background text-foreground">
      <SplitCanvas
        items={items}
        gridSize={s.gridSize}
        numSlices={s.numSlices}
        canvasSize={s.canvasSize}
        gridOpacity={s.gridOpacity}
      />
      <footer className="flex h-[50vh] items-center justify-center border-t border-border px-6 text-center text-sm text-muted-foreground">
        Five fruits, pressed fresh every morning.
      </footer>
    </main>
  );
}