🐍 Slarrow

An overlay arrow that crawls across the page like a snake — morphing smoothly from one bezier shape to another, and taking as many crazy detours as you like on the way. Drop slarrow.js onto any page.

Click anywhere on the page to send the arrow there.

Detours 3 Speed 2600ms Turn radius 120px Lock lengths Start length 80px Mid length 500px End length 80px Thickness 16px Head length 28px Head width 30px Open head Tail point 50 Curviness 0.35 Color Show targets

How to use it in your own page

import { Slarrow } from './slarrow.js';

const arrow = new Slarrow({ color: '#e1251b', width: 16, shadow: true });

// arrowhead: openHead draws two lines (chevron) vs a filled triangle;
// headLength / headWidth are in px; tail 0=round..1=needle
arrow.openHead = true; arrow.headLength = 40; arrow.headWidth = 44;

// a "shape" is a cubic bezier: [tail, ctrl1, ctrl2, head]
arrow.set(Slarrow.arrowAt({ x: 120, y: 120, angle: 0 }));

await arrow.flyTo(
  Slarrow.arrowAt({ x: 700, y: 400, angle: Math.PI }),
  {
    detours: 3,        // 3 random spots first, then arrive
    duration: 2600,
    turnRadius: 120,   // px — like a car: it can't turn tighter than this
  }
);

// or pass explicit waypoints instead of a detour count:
arrow.flyTo(endShape, { waypoints: [[300,200],[600,500]] });

// helper to make N random spots on the way:
Slarrow.randomWaypoints(5, { seed: 42 });