"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>
);
}
Part of Hyperiux Vault — browse the full library on 21st.dev.