ComponentsCarousels & media
Colour Split
A picture whose red and blue channels peel apart and lean toward the pointer while the frame tilts, drawn with WebGL.
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { ColourSplit } from "@/components/miyuki-ui/colour-split";
import { landscape } from "@/registry/lib/art";
export default function ColourSplitDemo() {
return (
<ColourSplit
src={landscape("lake-toya-morning", { width: 1280, height: 800, mood: "dawn" })}
alt="Dawn over Lake Tōya, with the far shore and the island in silhouette"
className="aspect-[16/10] w-full max-w-160 rounded-2xl"
>
<div className="dark flex h-full items-end bg-linear-to-t from-background/75 via-background/0 via-45% p-5">
<p className="text-sm font-medium text-foreground tabular-nums">Lake Tōya, 06:10</p>
</div>
</ColourSplit>
);
}Install
npx shadcn@latest add @miyuki-ui/colour-splitThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
ColourSplit
Prop
Type