Handwritten Response

Text 63

About

A text component that reveals an AI answer as if it were handwritten in marker pen, with words inking in as they stream and inline markup for a highlighter swipe, a hand-drawn circle, and a crossed-out correction.

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

Code

How Handwritten Response 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 { HandwrittenResponse } from "@/components/ui/handwritten-response";

const ANSWER =
  "Five years side by side - ==NVIDIA== is up ((+874%)) and ==AMD== +453%. " +
  "But since ~~Januar~~ January AMD has more than ==doubled.==";

export default function HandwrittenResponseDemo() {
  const [key, setKey] = React.useState(0);

  return (
    <div className="bg-background flex h-full min-h-[460px] w-full flex-col items-center justify-center gap-6 p-8 text-center">
      <HandwrittenResponse key={key} className="max-w-[560px] text-balance">
        {ANSWER}
      </HandwrittenResponse>
      <button
        type="button"
        onClick={() => setKey((k) => k + 1)}
        className="text-muted-foreground hover:text-foreground text-sm underline underline-offset-4"
      >
        Write it again
      </button>
    </div>
  );
}