Silica
A glass code field where each box flips to mint
A four-digit code field for one-time passwords, made of frosted glass. Good for: login checks, two-step verification and phone or email confirmation. How it works: when the fourth digit is in, a band of light reads across the boxes, then each box turns over in turn and lands green with its digit still on it, and a check appears by the title. A wrong code turns the boxes red, shakes and clears them. It also takes a pasted code, the phone's one-time-code autofill and the arrow keys, and has a resend timer. How to use: copy the files into your React app, swap the sample code for your own check, and remove the sample message. Built with React and TypeScript, no other libraries.
$7.50 — one-time price, free updates
- A UI component for any site
- React and Vite · npm install and it runs
- Use it in unlimited client projects
Built with React, CSS.
What is in the zip
- index.html
- src/App.tsx
- src/app.css
- src/env.d.ts
- src/main.tsx
- src/otp.ts
- src/sound.ts
- tsconfig.json
Version history
- v1.0.0, 2026-11-06 — First release. Silica shipped, with the reel recorded from the real page.