01 / THE PENCIL CASE

Six ways to leave a mark.

A small toolkit for all the things you want to say.

a little imperfect.
entirely on purpose. ↙

LIVE PREVIEW

Look at you go.

Make the good stuff impossible to miss.

A slightly imperfect loop around anything worth a second look.

MAKE IT YOURS

Ink color

Roughness 1.3

Steady handExtra scribbly

Give it a little lifeSubtle, animated ink

Placement & reproducibility

Pixel nudges preview the next release in this checkout. Inspect installed capabilities before using them with published 0.1.0.

Stroke width Seed Resketch on hoverPadding

JavaScript

import { circle } from "@funsaized/stet";
import "@funsaized/stet/style.css";

// Call after DOM mount; retain and invoke cleanup before unmount.
export function annotate(element) {
  const annotation = circle(element, {
    stroke: "#c84935",
    roughness: 1.3,
    seed: 23,
    boil: 0,
    width: 2.5,
    resketchOnHover: false,
    padding: 12
  });
  return () => annotation.destroy();
}

↑ These are real Stet marks, drawn on real HTML.Meet the API