Isometric Heart

Component

About

An interactive isometric heart figure, drawn and animated in SVG, that beats faster on hover and fills with a cube burst when clicked to "like" it.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";

import Heart from "@/components/ui/heart";

export default function HeartDemo() {
  const [liked, setLiked] = React.useState(false);

  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-[420px]">
        <Heart liked={liked} onActivate={() => setLiked(!liked)} />
      </div>
    </div>
  );
}