QR Code

A QR code stores text in a square grid of dark and light modules.

This picture is a cloud of paint. You can , , , , , , and .

Shelf: Studio
Kind: Built from a recipe
Your own: Your QR code
Sound: Yes
Licenses: MIT, Apache-2.0

How to play

Type a link in the Splash tab, pick a style or a theme, and tap the code.

Its controls

Control	Kind	Range	Start
Knock loose	Tap
Assemble	Button
Flip	Button
Burst and return	Button
Ripple	Button
Split-flap	Button
Fold	Button
Rain	Button
Knock loose	Button
Point cloud	Button
Alive	Switch		Off
Alive speed	Slider	0 to 100%	50%
Shape	List	2 choices	Square
Frame	List	2 choices	None: filled to the edge
Error correction	List	5 choices	Auto (M, which the scan lab found best)
Code color	Color		#14161c
Background	Color		#ffffff
Gradient	List	3 choices	None
Gradient to	Color		#1d4f9c
Eye colors	List	2 choices	Same as the code
Eye color	Color		#b3261e
Plate	List	4 choices	Paper
Back of the tiles	Color		#e8743b
Alive wave color	Color		#1d4f9c

About it

A QR code stores text in a square grid of dark and light modules. Three big finder patterns tell a camera where the code is and which way up it sits, and Reed-Solomon error correction lets it lose up to 7, 15, 25 or 30 percent (levels L, M, Q and H) and still read back. Masahiro Hara's team at Denso Wave invented it in 1994.

Here every dark module is a crisp cell of splats, in one of seven styles and in a color theme or a country's flag colors, always with the contrast a camera needs. The splash reads its own picture back to check that it scans. Tap it and the modules around your finger are knocked loose and snap back; the Splash tab has eight more motions, each ending on a code that scans. Alive moves colors through the code at the speed you choose, and every frame still scans, because each module keeps nearly the same lightness. Your text never leaves your device.

Controls made by Ryan Kamp, MIT.

Sources and credits

Made in Splashery. Its code is MIT.

Libraries

MIT: gifenc 1.0.3
Apache-2.0: jsQR 1.4.0 (lane LSTUDIO)
MIT: QR Code generator library (Project Nayuki)

In The Splash Manual

Share it

This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.

https://splashery.app/play/?toy=qr-code

<script type="module" src="https://splashery.app/play/src/element.js"></script>
<splashery-toy toy="qr-code"></splashery-toy>