ASCII Dissolve Transition

Component 32

About

A draggable before/after transition where the seam is a band of ASCII glyph noise that outgoing content frays into and incoming content resolves out of, reversible by dragging the slider back.

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

Code

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

Usage.tsx

import { AsciiDissolveTransition } from "@/components/ui/transition-ascii-dissolve";

export default function AsciiDissolveTransitionDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <AsciiDissolveTransition
        className="h-80 w-full max-w-xl"
        defaultValue={0.35}
        from={
          <div className="flex h-full w-full items-center justify-center bg-neutral-900 text-2xl font-semibold text-white">
            Before
          </div>
        }
        to={
          <div className="flex h-full w-full items-center justify-center bg-blue-600 text-2xl font-semibold text-white">
            After
          </div>
        }
      />
    </div>
  );
}