Margin Notes

Written for the variant you picked above: Pencil

Build a button that gets annotated by hand when you point at it. Props: children, pen (one of three drawing styles), inks (one colour per note, cycling), tone {face, label, edge}, onClick and type. The button: a 50px block with 12px corners, a 1.5px border in the edge colour and a hard 3px offset shadow of the same colour, which grows a pixel on hover and collapses on press. Notes, drawn in an SVG overlay that reaches 96px round the button (pointer-events none, aria-hidden). On each hover, choose a set with a seeded random from the hover count: always one note that points at the button — an arrow from the upper left, an arrow from the lower right, or a ring round it (rotating through the three) — plus two or three of: sparkles by the top-right corner (three small crosses), a double underline beneath, a five-point star below right, two exclamation marks above left; never both arrows, never the ring with the underline. Every coordinate wobbles by a few pixels from the same seeded random so it looks hand-drawn and is different every time. Arrows are a cubic curve and a separate two-stroke head; the ring is a little more than one turn, its radius growing slightly so the ends overshoot like a real pen loop. Draw the strokes one after another with pathLength=1 and stroke-dashoffset 1 → 0 (rings 520ms, arrows 300ms, underlines 220ms, small marks 120ms, each starting as the last is 85% done). On leave the notes fade out over 320ms. Keyboard focus draws them; touch draws them on press for 2.6s. Reduced motion: the finished notes fade in. Selected variant — Pencil (pencil): Graphite: 1.7px strokes in #3d3a35 at 90% opacity on a #f7f3ea page; the button #fffdf7 with #22201c label, border and shadow. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at the button and it gets marked up; every hover draws a different set. Keyboard focus draws them too. Motion: Strokes draw in one after another over about 1–1.5s and fade out over 320ms. Reduced motion fades in the finished notes. Accessibility: A real button with its text label; the notes are decorative SVG in an aria-hidden overlay with pointer-events none. The focus ring is a dashed outline in the edge colour. Responsive behavior: The button keeps its size; leave about 90px of room around it for the notes. Touch: A press draws the notes for 2.6s. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at the button and it gets marked up; every hover draws a different set. Keyboard focus draws them too.

Motion

Strokes draw in one after another over about 1–1.5s and fade out over 320ms. Reduced motion fades in the finished notes.

Accessibility

A real button with its text label; the notes are decorative SVG in an aria-hidden overlay with pointer-events none. The focus ring is a dashed outline in the edge colour.

Responsive

The button keeps its size; leave about 90px of room around it for the notes.

On touch

A press draws the notes for 2.6s.