Case study · Product UX
Pixel Pass: an OTP screen people actually enjoy
A 4-digit verification screen that plays like a tiny 8-bit platformer, with real OTP rules, SMS autofill, accessibility and not a single image file.
- Our role
- Concept, design, build
- Platforms
- Phone, tablet, desktop
- Rules
- Whole-code check, 3 lives
- Assets
- 0 image or audio files
- Stack
- React, TypeScript, Framer Motion
- Status
- Live, open source
Inside the flow
In short
The goal: turn the dullest screen in every app, entering a one-time code, into a moment people enjoy, without weakening security or accessibility. The result: an OTP screen that plays like a tiny 8-bit platformer, with real-world verification rules, zero image files and full screen-reader support.
Challenge 01
How do you make an OTP screen fun without breaking real security rules?
The problem
A game that reveals which digit is right would leak the code one digit at a time, which no real OTP should do.
How we solved it
- Checked the code as a whole: all blocks turn green or all turn red, with no per-digit hints.
- A wrong code shatters all four blocks and the user retypes everything, like a real OTP.
- Used three hearts as the rate limit: three wrong codes expire the code and send a fresh one.
Challenge 02
How do you keep a long animation from slowing people down?
The problem
Charming animations become annoying the second time, and some users just want to get in.
How we solved it
- A Skip ▸▸ button fast-forwards any check.
prefers-reduced-motionmakes the whole flow near-instant.- The hero stays still while typing, so nothing distracts from entering the code.
Challenge 03
How do you support paste and SMS autofill in a custom-drawn input?
The problem
Custom slot UIs often break the things people rely on: paste, backspace and the phone's one-tap SMS code.
How we solved it
- One hidden native input catches typing, backspace and paste.
autocomplete="one-time-code"keeps iOS and Android SMS autofill working.- The fourth digit submits automatically.
Challenge 04
How do you ship pixel art and sound with zero asset files?
The problem
Sprite sheets and audio files add weight, blur on high-density screens and complicate caching.
How we solved it
- Drew every sprite from string grids into crisp SVG, sharp at any size.
- Synthesised all chiptune sound effects live with WebAudio, with a mute toggle.
- Self-hosted fonts, so no third-party requests.
Challenge 05
How do you keep a complex, animated flow reliable and portable?
The problem
Timers spread across components make animated flows fragile, and hard to stop or port to mobile.
How we solved it
- A pure state machine (input → checking → failed or verified) with no timers or DOM, ready to port to a Flutter Cubit.
- A separate director runs the timeline with cancellable steps, so closing stops any animation instantly.
- One
verifyDigits()function to swap in a real verification API.
Challenge 06
How do you make a visual game accessible?
The problem
A screen-reader user cannot see blocks turn green or red.
How we solved it
- Announced each result in words, for example "Wrong code. Type all 4 digits again. 2 lives left."
- Visible focus ring on the active slot, and full keyboard use.
Results & lessons
What it delivered, and what we would do again
Pixel Pass is live (demo code 1997) and open source on GitHub. It shows how we design memorable product moments, such as sign-up, payments and onboarding, without sacrificing security or accessibility.
- Delight must never weaken security.
- Always give people a way to skip the show.
- Keep logic in a pure state machine so UI and platforms can change.
Quick answers
Pixel Pass at a glance
What is Pixel Pass?
Pixel Pass is an open-source 4-digit OTP verification screen built in React and TypeScript. A pixel hero bumps each digit like a game block; the code is checked as a whole, with three lives as the rate limit.
Does Pixel Pass work with SMS autofill?
Yes. A hidden native input with autocomplete one-time-code keeps iOS and Android SMS autofill, paste and backspace working.
Can ImliStack design memorable flows like this for our product?
Yes. We design and build product moments such as sign-up, verification, payments and onboarding that feel good to use while meeting security and accessibility requirements.
Next step
Tell Us Your Problem. We'll Help You Build the Solution.
Tell us what you are working on. You will get a considered reply from an engineer — with questions, a suggested approach or an honest “we are not the right fit”.