Sketch

TS

import { … } from "@fungi.computer/caps/enhance/sketch";

Circle and underline

TSX

import { sketch } from "@fungi.computer/caps/enhance/sketch";
import { useEffect, useRef } from "react";

export default function CircleAndUnderline() {
  const root = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const node = root.current;
    if (!node) return;
    return sketch(node);
  }, []);
  return (
    <div ref={root}>
      <div data-sketch-root className="relative max-w-sm p-lg">
        <p>
          Plate <span data-sketch="circle">14</span> shows the{" "}
          <span data-sketch="underline">gill spacing</span> up close.
        </p>
      </div>
    </div>
  );
}

Leader note

TSX

import { sketch } from "@fungi.computer/caps/enhance/sketch";
import { useEffect, useRef, type CSSProperties } from "react";

type LeaderStyle = CSSProperties & { "--caps-sketch-leader": string };

const leaderStyle: LeaderStyle = { "--caps-sketch-leader": "on" };

export default function LeaderNote() {
  const root = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const node = root.current;
    if (!node) return;
    return sketch(node);
  }, []);
  return (
    <div ref={root}>
      <div data-sketch-root className="relative max-w-sm p-lg">
        <div data-sketch-item className="flex items-start gap-3">
          <div data-sketch-target className="text-4xl">
            🍄
          </div>
          <p
            data-sketch-leader-x="0.5"
            data-sketch-leader-y="0.5"
            style={leaderStyle}
          >
            The cap curls under as it matures.
          </p>
        </div>
      </div>
    </div>
  );
}