Splashery
QR Code, a still.

Family I, Studio

Plate 7

QR Code

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

Playground

Family
Studio
Origin
Raised from a recipe
Habit
Diurnal: kept on the page
Voice
Yes, with the sound on
Your own
Your QR code
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.

Notes

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.

Its controls

ControlKindRangeStart
Knock looseTap
AssembleButton
FlipButton
Burst and returnButton
RippleButton
Split-flapButton
FoldButton
RainButton
Knock looseButton
Point cloudButton
AliveSwitchOff
Alive speedSlider0 to 100%50%
ShapeList2 choicesSquare
FrameList2 choicesNone: filled to the edge
Error correctionList5 choicesAuto (M, which the scan lab found best)
Code colorColor#14161c
BackgroundColor#ffffff
GradientList3 choicesNone
Gradient toColor#1d4f9c
Eye colorsList2 choicesSame as the code
Eye colorColor#b3261e
PlateList4 choicesPaper
Back of the tilesColor#e8743b
Alive wave colorColor#1d4f9c

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>

Compare with