CurlyArrow

A collection of handcrafted SVG arrows designed to make interactions feel intuitive and delightful.

Unlike generic arrows that are simply rotated, every arrow in CurlyArrow was manually illustrated from scratch for its specific direction. Each stroke is unique, giving the animation a natural hand-drawn feel while keeping every orientation visually balanced.

The component also includes animated interaction labels—Hover, Click, and Drag—that are individually hand-drawn and animated alongside the arrow.

Features

✍️ 11 handcrafted SVG illustrations
- 8 manually drawn directional arrows
- 3 custom action labels
🧭 Eight unique directions (N, NE, E, SE, S, SW, W, NW)
✨ Smooth hand-drawn stroke animation
↩️ Interactive reverse animation — Hover over the component to smoothly retract both the arrow and action label before they draw again when the pointer leaves.
🎯 Built-in action labels for Hover, Click, and Drag
👀 Automatically animates when entering the viewport
🔁 Continuous, one-time, or custom repeat playback
🎨 Customize colors, size, stroke thickness, spacing, and positioning
📱 Responsive and automatically scales to any container

Why it's different

Every SVG in this component was drawn manually in a vector editor—not AI-generated and not created by rotating a single arrow. Each direction has its own unique curves and proportions, resulting in more natural-looking illustrations and animations.

The interaction doesn't stop once the drawing is complete. Hovering over the component reverses the entire stroke animation, causing both the arrow and action label to smoothly retract before drawing again when the pointer leaves. This subtle detail makes the component feel tactile, responsive, and alive.

Perfect for

Product onboarding
Interactive tutorials
Feature callouts
Landing pages
Documentation
SaaS demos
Design portfolios