01 · Ring carouselCheck-in
Loading demo
A 3D carousel. Drag, flick or use the arrow keys.
(Index) Lab14 live demos
Lab
Interactive pieces from recent projects.
02 · Emoji reactionsCheck-in
Loading demo
Pick an emoji and it flies to its chip as the count updates. On touch, hold and slide.
03 · Foil cardCheck-in
Loading demo
A card that tilts and catches the light under the pointer. The featured tiles on this site use it.
04 · Glossy panel, rolling digitsCheck-in
Loading demo
Press Check in to update the count. Scrub the chart with a mouse, a finger or the arrow keys.
05 · Hold to confirmCheck-in
Loading demo
Destructive actions confirm with a short hold. A quick tap shows a hint.
See it in context: Check-in live ↗ · Case study
06 · Crest tilt and holo100K Club
Loading demo
The crest tilts toward the pointer with a gold sweep. Click to cycle the five rank finishes.
07 · Silk shader100K Club
Loading demo
A WebGL background that brightens toward the pointer. Click to send a ring.
08 · Metal lettering100K Club
Loading demo
Rank names in metal lettering, one finish per rank.
See it in context: 100K Club live ↗ · Case study
09 · WebGL mesh gradientMMO Nodes
Loading demo
A WebGL gradient with one color that follows the pointer.
10 · Command paletteMMO Nodes
Loading demo
The command palette from the prototype, also used across this site (⌘K).
See it in context: MMO Nodes live ↗ · Case study
11 · Holo character cardsMega Roll
Loading demo
Character cards that tilt, with foil on the art window.
12 · Playable ability cardsMega Roll
Loading demo
Tap to shuffle the fan, or drag the top card up to play it. Enter plays it from the keyboard.
See it in context: Mega Roll live ↗ · Case study
13 · The Sheet and the RegistryRat Mats
Loading demo
Every number in a 500-mat edition, with 12 marked squares. Type a number to find it on the sheet.
14 · Scroll-direction tickerRat Mats
Loading demo
A ticker that changes direction as you scroll the page.
See it in context: Rat Mats live ↗ · Case study