Front-end · Single HTML file
Scan the tag. Get the bag home.
A glassmorphism contact page designed to sit behind the QR code on a luggage tag. Whoever finds the bag scans it, lands here and reaches the owner in one tap by phone, WhatsApp or email, or opens the address in Google Maps. The whole thing is one self-contained HTML file with no build step and no backend.
WebGL · move your cursor
0
One-tap contact actions
0
HTML files shipped
0
Build steps
0
Backend servers
// highlights
Whatmakesittick
Made for a QR scan
A finder has seconds and a phone in hand, so every contact method is a single tap: Maps for the address, a dial link for each phone number, WhatsApp, and email with a pre-filled subject line.
Frosted dark-teal glass
A glassmorphism card built on backdrop-filter, with a subtle 3D tilt that follows the mouse.
A rainy backdrop
Diagonal streaks fall behind the card, white ones faster than the cyan ones, over a layer of soft teal blobs drifting for depth.
No frameworks, no canvas
The rain, blobs, glass and tilt are all vanilla HTML, CSS and JavaScript. The only external dependency is JetBrains Mono from Google Fonts.
Host it anywhere
Open the file locally, put it on GitHub Pages, or drop it on Netlify, Vercel or Cloudflare Pages without any configuration.
Works across browsers
Chrome, Safari, Edge and Firefox are supported, with Firefox falling back to a solid background where backdrop-filter isn't available.
// architecture
Howit'sbuilt
- 01QR code on the tagPoints at the hosted URL
- 02One static HTML pageGlass card · rain · blobs · tilt
- 03Native phone handlersMaps · tel: · wa.me · mailto:
step 01
Scan
The finder scans the QR code printed on the tag.
step 02
Land
The static page loads instantly, with nothing to install or sign into.
step 03
Tap
One tap on any contact row.
step 04
Reach
The phone's own apps take over: Maps, dialler, WhatsApp or mail.
// under the hood
Thedetails
# rename the file for root hosting mv luggage-tag.html index.html # Settings -> Pages -> branch: main, folder: / (root) # live at https://<username>.github.io/<repo-name>/ # then point any QR generator at that URL
How each contact row opens
| Row | Opens |
|---|---|
| Address | Google Maps |
| Phone and alternate phone | The dialler, through a tel: link |
| A chat, through wa.me | |
| The mail app, with a pre-filled subject |
A note on privacy
- ◆The live page shows real contact details, since that is its whole job, so this site doesn't link to it or repeat them. The source is on GitHub.
// stack
Builtwith
- HTML5
- CSS3
- Vanilla JavaScript
- JetBrains Mono
- GitHub Pages
- QR code