Hand-drawn
Hand-drawn sticker
A note stuck on the margin: a square of paper at a tilt with a drawn shadow, tape or a pin, text in a handwritten face. For editor's marks: “important!”, “free dates in May”, “here →”.
What you can change
- text or children, pin, paper, tilt
- accent and ink, rough and boil, tone
- positioning from outside: the note does not know where it stands
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/sketch-023?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
One file, zero dependencies, “use client”. The host is an inline-block with a paper background (yellow sticky by default), rotated by tilt from the top edge; it straightens slightly on hover. The frame is rectPoints on the box (ResizeObserver), the shadow the same outline offset 5/6px in a muted colour. pin: tape — a translucent strip on top, pin — a drawn push-pin head, none — nothing. children replace the text. Three boil frames via @property --frame and step-end. Fonts via <link precedence>, palette --vibeui-sketch-023-* with light-dark, reduced-motion turns motion off.
Tags
- sketch
- hand-drawn
- handwritten
- doodle
- rough
- boil
- sticker
- note
- post-it
- annotation
- margin
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…