About
A before/after slider whose divider is a waterline. Drag it and the liquid lags, bulges and settles like a wave in a tank. Works with any two React nodes, full keyboard support (arrows, Shift for bigger steps, Home/End) and an ARIA slider.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tide Compare to your project and fits it to your theme.
Code
How Tide Compare is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { TideCompare } from "@/components/ui/tide-compare"
const photo = "https://cdn.21st.dev/assets/mirror/b4/b40f87249d04578f4d23f3a07a4837439809f97ce744c4cf2f3aa349a6a5999f.jpg"
export default function TideCompareDemo() {
return (
<div className="flex h-full min-h-[560px] w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-4xl">
<TideCompare
className="aspect-[16/10] w-full"
beforeLabel="Original"
afterLabel="Graded"
before={<img src={photo} alt="Beach at noon, ungraded" className="h-full w-full object-cover saturate-[0.35] contrast-90 brightness-110" draggable={false} />}
after={<img src={photo} alt="Beach at noon, colour graded" className="h-full w-full object-cover saturate-150 contrast-110 hue-rotate-[-8deg]" draggable={false} />}
/>
<p className="mt-4 text-center text-sm text-muted-foreground">Drag the waterline. Fling it and let it settle.</p>
</div>
</div>
)
}
More by Neebarp
View all
Iron Filings
10
Seismograph Stat
Thermal Lens