Doodle Callout

Pricing 35

About

A hand-drawn arrow that animates itself onto the screen next to a handwritten label that reveals letter by letter, looping to draw attention to a nearby element like a pricing plan or CTA.

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

Code

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

Usage.tsx

"use client";

import { DoodleCallout } from "@/components/ui/doodle-callout";

const ASPECT_RATIO = 457 / 101;

export interface DoodleCalloutDemoProps {
  label?: string;
  width?: number;
  revealGap?: number;
  loopInterval?: number;
}

export default function Demo({
  label = "Most popular",
  width = 280,
  revealGap = 400,
  loopInterval = 8000,
}: DoodleCalloutDemoProps) {
  const resolvedWidth = Number(width);

  return (
    <div className="flex w-full max-w-md items-start justify-center px-6 py-16">
      <DoodleCallout
        label={label}
        width={resolvedWidth}
        height={resolvedWidth / ASPECT_RATIO}
        revealGap={Number(revealGap)}
        loopInterval={Number(loopInterval)}
      />
    </div>
  );
}