Splashery
QR Code, a still.

No. 007 of 460 · Studio · Built from a recipe

QR Code

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

Play it in the Playground

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

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

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)
MIT, Apache-2.0
zxing-wasm 3.1.4, with zxing-cpp (copied from Splashery)

In The Splash Manual

  1. Chapter 9: Codes and pages
  2. Chapter 10: Make your own

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>

Back to the machineThe Studio machine

Nearby in the collection