Live App

Image Snake

A pointer-driven photo cascade where images slither across the canvas, following your cursor like a living chain. Zero dependencies.

Vanilla JS Pointer Events 60fps Animation requestAnimationFrame Zero Dependencies

↗ Launch App ▧ Screenshots ⚙ How It Works

Year 2026

Type Web App

Status ● Live

001 Overview

Your cursor becomes the head of a living chain — 30 photo slots slithering behind it in real time, each frame recycling from front to back so your entire library loops endlessly. Images follow a bell-curve of size — small at the head, peaking mid-chain, tapering at the tail — giving the stream natural depth and a focal point that moves with you.

002 How It Works

Trail Recording

Every frame, the cursor position is pushed to a 3,000-point trail array. This historical path gives the snake its organic, curving shape — every twist of your wrist is preserved.

Position Solver

Each image walks the trail segment-by-segment, accumulating distance until it finds its target position. The angle at each point drives the rotation for that organic slither.

Front-to-Back Recycling

Every 120px of cursor travel, the lead image detaches and teleports to the back of the chain with a new photo. Position-snapped to the tail so it appears seamlessly.

Bell Curve Sizing

Images ramp from small at the head, peak at 65% of the chain, then taper at the tail. The 0.6 multiplier on taper keeps visual weight at both ends.

Differential Easing

Head tracks the cursor at 0.25 easing, tail lags at 0.06. This gradient creates the snake-like feel — the tail whips and oscillates on direction changes.

Zero-Latency Upload

Images use URL.createObjectURL() so they never leave the browser. Drag-and-drop or file picker — full privacy, instant preview, no server round-trip.

Trail path with bell-curve sizing — head → peak → tail

003 Features

Rotation Toggle

Enable or disable random rotation per image. When off, all photos stay perfectly aligned — useful for clean, editorial presentations. When on, each image tilts based on trail direction.

Rounded Corners

Toggle border-radius on all photo frames. The radius scales with image size — larger mid-chain photos get proportionally more rounding for optical consistency.

Image Upload

Drag-and-drop or file picker. Uses URL.createObjectURL() so images never leave the browser — zero upload, zero latency, full privacy.

Infinite Cycling

The library loops endlessly. Whether you have 5 images or 500, the snake continuously cycles through them as you move. Modulo wrap handles the loop.