Annotations
Marks that look like someone reached in and drew on the page. One trick behind all of them: an SVG stroke with stroke-dasharray equal to its own length, animating dashoffset to zero. Because the path is drawn rather than faded in, the eye reads it as a gesture instead of an effect.
The one rule: aliases only — never a raw hex.
Designed at thumbnail scale first.
Just use a framework
Everything inside the safe area
Two loops when you really mean it.
Loudness is a budget you spend, not a texture you apply.
.an-circle · .an-circle-2 · .an-underline · .an-strike · .an-box · .an-arrow — pathLength="100" normalises every path so one rule drives them all