How Wiggly me works.
The experience combines pointer input, a chain of animated segments and a lightweight canvas renderer.
1. The head follows you
The first point in the worm follows the current mouse or touch position. Movement is smoothed so the head glides rather than teleporting.
2. The body follows the head
Every body point follows the point before it while maintaining a target spacing. Together, those points form the flexible path that gives the worm its characteristic motion.
3. The browser draws each frame
The site uses the HTML canvas element to draw the background, body gradient, highlights, head and face. The animation updates through the browser's frame loop.
Controls
- Length: changes how many points make up the body.
- Scene: selects a new background palette.
- Color: changes the worm's body and head colors.
- Face: cycles through several expressions.
- Sun or moon: switches between lighter and darker variants.
- Reset: places the worm back into a fresh starting position.
Devices and accessibility
The interaction supports both pointer and touch input. On small landscape screens, secondary controls are hidden to give the worm more room. The information pages use semantic headings, keyboard-accessible links and responsive layouts.