Guide Arrows

Create a hand-drawn guide arrow. A scene where a casual dotted arrow guides the eye from a handwritten-style label ("start here!") to the primary button. The arrow is an SVG curve (stroke-dasharray "1 7" with round caps makes the dotted hand-drawn look) that DRAWS ITSELF toward the target: animate pathLength 0 to 1 over 0.9s with easing cubic-bezier(0.22, 1, 0.36, 1), starting at 0.5s, followed by a small arrowhead path drawing in at the tip (250ms). The label fades in first (0.2s) in the accent color, monospace, tilted a few degrees, and keeps gently rocking (rotate -6 → -3 → -6, 2.4s loop). When the arrow lands, the target button acknowledges: one pulse of scale to 105% with an expanding accent ring shadow (0 to 8px at 12% opacity and back), at ~1.7s. Keep the arrow decorative (aria-hidden); the scene should make sense without it. Accessibility: the target button keeps its normal accessible name. If prefers-reduced-motion is set, show the finished arrow and label statically with no pulse. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.