Melting Cancel

Pricing

About

A real HTML subscription card that melts into glossy drips and a puddle when you hover Cancel plan, then springs back when you hover Keep my plan. Funny churn-flow moment. Uses Chrome 157's HTML-in-Canvas; other browsers get the plain card. Light and dark. More at kit.neebarp.com

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

Code

How Melting Cancel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { MeltingCancel } from "@/components/ui/melting-cancel";

export default function MeltingCancelDemo() {
  return (
    <div style={{ position: "relative", width: "100%", height: 600, overflow: "hidden" }}>
      <MeltingCancel
        eyebrow="POV · your churn flow"
        headline="When users hover"
        headlineEm="“Cancel plan”"
        cardLabel="Your plan"
        plan="Studio"
        planEm="Pro"
        price="$29"
        period="/mo"
        renews="Renews Dec 1"
        features={["Unlimited client sites", "Custom domains", "Priority rendering", "5 team seats"]}
        meterLabel="Projects used"
        projectsUsed={3}
        projectsTotal={5}
        keepLabel="Keep my plan"
        cancelLabel="Cancel plan"
        cancelHotLabel="Wait, really?"
        warning="You'll lose 3 projects and 18.2 GB."
        relief="Good call. Your 3 projects are safe."
      />
    </div>
  );
}