Warped Circle Transition

Dashboards 4

About

A wavy, hand-warped circle reveal transition that wipes between two pieces of UI content, keyed by a transitionKey prop.

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import WarpedCircleTransition from "@/components/ui/warped-circle-transition";

const settings = { duration: 1120 };

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const [key, setKey] = useState(0);

  return (
    <div
      className="flex h-screen w-full items-center justify-center bg-background"
      onClick={() => setKey((k) => k + 1)}
    >
      <WarpedCircleTransition transitionKey={key} duration={s.duration}>
        <div className="flex h-64 w-64 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
          Click to transition
        </div>
      </WarpedCircleTransition>
    </div>
  );
}