Organic Merge Transition

Shaders

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Organic Merge Transition to your project and fits it to your theme.

Code

How Organic Merge Transition is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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;