A content swapper that reveals a second composition over a first using a staggered pixel/tile clip-path mask, without duplicating interactive DOM.
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import PixelSwap from "@/components/ui/pixel-swap";
export default function PixelSwapDemo() {
const [active, setActive] = React.useState(false);
return (
<div style={{ display: "grid", gap: 20, width: "100%", maxWidth: 420 }}>
<PixelSwap
active={active}
first={
<div
style={{
display: "grid",
placeItems: "center",
padding: 32,
minHeight: 320,
background: "#F0A4CC",
color: "#14171B",
textAlign: "center",
}}
>
<strong>A seed of an idea.</strong>
</div>
}
second={
<div
style={{
display: "grid",
placeItems: "center",
padding: 32,
minHeight: 320,
background: "#95BAE8",
color: "#14171B",
textAlign: "center",
}}
>
<strong>Something taking shape.</strong>
</div>
}
/>
<Button
onClick={() => setActive((value) => !value)}
aria-pressed={active}
>
Swap the study
</Button>
</div>
);
}