〰️SCAN-LINES〰️

Turn images into synthwave / cyberpunk animations! Upload a photo, then use the controls to adjust the colors, speed, wave starting position / frequency, trail strength, turbulence, and more.

Click the 🎲 button underneath the canvas to randomize all input parameters, this can give interesting colour / movement styles. You can then open the controls at the top right of the screen to fine-tune the parameters one-by-one.

How this works: particle waves are created at one edge of the canvas, and then "scan" across the canvas while searching for edges of the input image. When an edge is found, some interaction physics that will cause particles to freeze position, change color, or move as an oscillating wave.

This program tends to work best with input photos that are quite minimal (not too much noise or background objects, clean edges or silhouettes). Consider cropping your image or running a background removal before inputting into this tool -- this might help to pick out the key edges of your image.

You can export your creation as an image or video afterwards.

A few hotkeys for the pros:

• [r]: randomize all inputs (useful to find interesting parameters for a new image)
• [c]: choose random color palette
• [space]: pause/play the animation
• [enter]: restart the animation
• [v]: start and stop video export
• [s]: save a screenshot image
• [u]: upload new image

This tool is completely free, open source (MIT license), without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.

If you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!

The code used to create the animation is quite resource-intensive, so it may run with some lag if your computer doesn't have enough computing power, too many tabs open, low battery, etc.

If the video export feature does not work for you, please try a free screen-recording tool such as OBS Studio.

This project is coded using vanilla Javascript, HTML5 canvas, and CSS (see github repo). Video creation and encoding is done using mp4 muxer.

I do not have access to any images that you upload here, as all processing is done "client-side" (i.e., no videos or images are saved/stored by me — they stay on your computer only).

If you enjoyed this, you may be interested in my other free / open source projects:

• Particular Drift: turn photos into flowing particle animations
• Video-to-ASCII: turn videos into ASCII pixel art
• Shape Shimmer: turn photos into funky wave animations
• Colliding Scopes: turn photos into kaleidoscope animations
• Force-Field Animation: turn photos into particle animations
• Manual Brick Breaker: play brick breaker by waving your hands around

Feel free to reach out to discuss, ask questions, or just to say hi! You can find me @stereo.drift on instagram, or through the other places below :)