NBTCA Cards
Member cards and event passes for the NBTCA computer association. Cards tilt with the pointer or the phone and catch foil as they lean. A pass plays footage through the letters of one large word, and at the door its sticker peels back to show the code. Once staff scan it, the stub tears off.
Visit websitem1ng
MemberCampus repair day
- Venue
- Library hall
- Date
- Saturday
- Time
- 13:30
How a pass is built
This pass uses the same five layers and the same tilt as the real one, with a gradient in place of footage. Move the pointer or tilt your phone.
- The footage A looping video, or a moving gradient when an event has none.
- The sheet Solid white, blended with screen, so white stays white.
- The word Black type that screen turns clear, so the footage shows through.
- The print Name, foil seal, venue, time and the entry code.
- The glare A highlight that follows the pointer.
The problem
Club events ran on paper sign-in sheets and polls in group chats. Members had nothing that said they belonged, and organisers could not easily count who came or collect the details students need for course credit. I wanted cards people enjoy holding, passes that work at a door with poor signal, and no server to run.
How it works
- Cloudflare Access signs people in, with Logto as the only identity provider. Logto roles decide who is a member and who can run events.
- The entry code is not in the page until an hour before the start, so a screenshot carries nothing. Staff scan it at /scan or with the phone camera, a pass checks in once, and the stub tears off on the holder’s screen.
- Passes open and scans queue without signal. Events export to calendars, and torn passes stay on the holder’s page as stubs.
- An event can collect validated student IDs for course credit and export attendees as a CSV that keeps leading digits in Excel.
- A live entry wall, event albums, share posters and a yearly recap. Foil warms as an event fills, and members can pull a card off the wall and throw it back.
- Effects animate only translate and opacity, the lanyard spring sleeps once the pass rests, and pages read a handful of indexed rows to stay inside the D1 free tier that other club services share.
- Each pass design is one Astro file, and a workbench shows every design in every state from preview to torn.
Built with
Astro and TypeScript on Cloudflare Workers, with D1 for data, R2 for portraits and footage, and sounds synthesised with Web Audio. Built in four days, from the first commit to share posters.