A soft-blob WebGL transition wrapper that morphs two merging organic shapes over its content whenever a key changes, for animating between two UI states.
"use client";
import OrganicMergeTransition from "@/components/ui/organic-merge-transition";
import React from "react";
function OrganicMergeTransitionDemo() {
const [step, setStep] = React.useState(0);
const states = [
{
title: "Plan: Starter",
body: "5 projects, community support, basic analytics.",
},
{
title: "Plan: Pro",
body: "Unlimited projects, priority support, advanced analytics.",
},
];
const current = states[step % states.length];
return (
<div className="flex w-full items-center justify-center p-10">
<div className="w-full max-w-sm">
<OrganicMergeTransition className="border" transitionKey={step}>
<div className="flex flex-col gap-3 p-6">
<span className="font-medium text-lg">{current.title}</span>
<p className="text-muted-foreground text-sm">{current.body}</p>
<button
className="mt-2 w-fit rounded-full bg-foreground px-4 py-2 font-medium text-background text-sm"
onClick={() => setStep((value) => value + 1)}
type="button"
>
Switch plan
</button>
</div>
</OrganicMergeTransition>
</div>
</div>
);
}
export default OrganicMergeTransitionDemo;
Part of SmoothUI — browse the full library on 21st.dev.