twc-031 / A study by Syafril · not client work
A member card for a fictional barbershop, Pangkas Tiang Merah: tilt it to catch a holographic foil cut into barber-pole stripes, flip it to its stamp card and add sample stamps — ten, then an eleventh cut free, as an example that is valid nowhere. Only the stamp count is kept, in this browser; there are no points, prices, wallet passes or payment features.
READ THE DESIGN
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
An ID-1 graphite card with the shop’s name, a sample member and a short sample number — no chip, long number, expiry or network mark. A visitor’s brand renames it and inks its front; the member and number stay labelled samples.
A CSS rainbow cut into barber-pole stripes moves with the tilt on the right of the card only, so the lettering reads at 4.5:1 or more on the actual pixels. Shine once sweeps it from a keyboard; reduced motion holds it still.
The panel repeats the card: the count, how many stamps are left and that the free 11th cut is a sample. Adding a stamp turns the card to its back; a full card says so; storage that fails is reported, never hidden.
#e8eaec#1d2024#b3242b#dde1e6#f7f5f0#565c65WHAT IS HERE / WHAT COMES NEXT
A loyalty card on a page, not in an app.
This tool includes a working workspace and its own component book. Its controls operate on local state.
Exports are generated in your browser. No account, cloud storage or external service is connected.
Fictional design study. Pangkas Tiang Merah does not exist; the member, the number TM-0042, the stamps and the free 11th cut are samples valid nowhere. The visitor adds stamps themself, so they prove no visit. The card has no chip, long number, expiry, network mark or contactless symbol.
Page scope, brand assets, content, handover, hosting, costs and support are discussed in a consultation before work begins. The demo is a reference for that conversation.
Prepare a brief for this directionA stamp card in the pocket. A neighbourhood barber keeps regulars with a small printed card that gets a stamp per cut; Kilau makes that card the page. Its front is graphite with a foil of red-pole stripes that shines as it tilts, the shop’s name and a sample member; its back is pearl card stock with ten stamp rings, the tenth ringed red as the goal. Nothing on it reads as a bank card: no chip, long number, expiry or network mark.
Graphite and chrome from the barber’s counter, red from the pole, pearl from the printed card. The front is a dark ID-1 card (1.586:1) whose right side carries a rainbow foil cut into diagonal pole stripes; the foil never sits under the text column. The back’s filled stamps are red-striped rings, the empty ones dashed and numbered. The rainbow is decoration only, never a colour that carries meaning.
Bungee 400, drawn for vertical city signage like the board outside a barber’s, sets the wordmark, the titles, the name on the card and the stamp count; it stays legible on graphite and next to the foil. DM Sans carries labels, buttons and reading text with tabular figures. Rubik Mono One 400 stays an unused recorded fallback.
Two pages, the card and How to try. At 1440 the card sits left, about 580px wide, and a 360px panel right holds the side switch, Shine once and the sample stamps. Below 760px it reads title → card the width of the screen → panel. The stamp count and the sample note are also in the panel at reading size, so the card’s small lettering is never the only source.
The card leans toward a pointer or a sideways finger (at most 8°, the shared demo-kit tilt) and the foil and its highlight move with it; vertical scrolling stays the browser’s. Shine once sweeps the card one way and back in 0.9s, for keyboards. Flipping turns the card in 0.48s; a new stamp is pressed in once. With reduced motion — also when it changes while the page is open — the card is flat, the foil still, Shine once hidden and sides change at once.
A static bilingual Next.js demo. The foil is CSS only: a gradient cut by a striped mask, positioned from the tilt with sin(), and a registered custom property for the keyboard sweep — no WebGL, canvas or device orientation. The stamp count is stored as { version: 1, stamps: 0–10 } under collection-kilau-member-v1, at most 256 bytes, validated with zod/mini before every read and write.
Front and Back · stamps are aria-pressed buttons; the hidden side is inert and focus stays on the button. Text on the card is measured against the actual foil pixels at 4.5:1 or more, and every fact on it is repeated in the panel. Adding a stamp is announced in a status line; a full card keeps the button focusable and says why it is off. Start the card over asks first and returns focus.
A digital business card for a small trade.
Choose a lane, keep the ticket.