TOTP Code Ring — 2D HMAC Visualizer

Shared Secret

TOTP Parameters

Time step (period) 30 s

Code length 6 digits

Time acceleration 1×

Live Readouts

Current code

000000

Next code in

30 s

Counter T

Drag across the ring to scrub time and preview past/future codes. Release to return to live.

How it works

This is a real implementation of TOTP (RFC 6238), the algorithm behind Google Authenticator, Authy and every hardware OTP token. It runs genuine HMAC-SHA-1 via the browser's Web Crypto API on the secret you type — nothing here is faked. This 2D view exposes a step the 3D ring hides: the raw 20-byte HMAC digest and exactly which 4 bytes dynamic truncation slices out.

T = floor(unixTime / period)
HOTP(K,T) = Truncate(HMAC-SHA-1(K,T)) mod 10^digits

Dynamic truncation:
offset = last_byte(HMAC) & 0x0F
bin    = (HMAC[offset]   & 0x7F) << 24
       | (HMAC[offset+1] & 0xFF) << 16
       | (HMAC[offset+2] & 0xFF) << 8
       | (HMAC[offset+3] & 0xFF)

Counter T — the shared secret and the current time window (30s by default) are hashed together with HMAC-SHA-1, so both the phone app and the server independently derive the same 20-byte digest without ever transmitting it.
Digest grid — all 20 raw HMAC bytes, drawn left-to-right, top-to-bottom. The low nibble of the very last byte (byte 19) picks a 0-15 offset — the highlighted 4-byte window is the one actually used.
Truncation — those 4 bytes are read as a big-endian 32-bit integer with the top bit cleared (so it's never negative), then reduced mod 10^digits to get a short human-typeable code.
Ring & ticks — one tick per second of the current period; a full lap completes exactly when counter T increments and a new code is generated.
Time acceleration — sweeps the virtual clock forward faster than real time so you can watch many rotations without waiting; scrubbing the ring previews a code without changing the live clock.

At 1× speed with the default period (30s) the code shown matches what a real authenticator app would display for the same Base32 secret at this exact second.

Elapsed ticks (this period) Ticks remaining Truncation window / new-code flash