orb lock screen

pro

Get the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.

A motion study of a biometric unlock on a phone drawn in code: a dark slab with a bezel and a pill cutout, on a dark 1080 × 1080 stage. A glowing iris orb lives in the pill. The screen wakes at 7:24 (Wednesday, 11 November), the pill opens into a scanner and the orb looks down at a face drawn as a depth map of dots while a scan line sweeps it (Scanning · Hold still). The first face is a stranger: the orb stops down and grows red veins, the dots shake and drop away in red and the phone shakes its head (Not you · Access denied). The pill closes and opens again for Mira (Welcome back, Mira · Unlocked): the palette turns cool blue, the padlock swings open and three glass notifications blur in over their placeholders, Messages (Door is open, come on in.), Wallet (You paid $24.00 with card ending 4417, Kiln Café) and Calendar (Standup in 20 min, Room 4), with Swipe up to open, before the screen goes back to sleep. The orb and the face are one WebGL fragment shader (fbm nebula, flowing iris fibres, aperture blades, fresnel rim, specular), the phone is HTML and CSS with React, Geist, a stage that scales to fit any window, and frame-exact rendering (window.__render(t), window.__LOOP, window.__MANUAL).

what you get

prompt
Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
project
The Vite + React source code as a .zip, ready to run.
figma file
The editable design as a .fig file to import into Figma.

what's inside

  • lock screen
  • biometric unlock
  • WebGL shader
  • iris orb
  • dot face scan
  • notifications
  • phone mockup
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • webgl

fonts

Geist

Free fonts, linked in the prompt.

colors

  • #06040A
  • #07050C
  • #F6F0FA
  • #FF1A8C
  • #5C1AF2
  • #9EB8FF
  • #3DDC84
  • #FF5A6E

license

With monthly or yearly: personal and commercial work, client projects included. Don't resell or share the template, prompt or files.

read the license