A player
you can press

Object first. Interface second.

We didn’t start in a design tool. We built a desk keypad in Blender, pressed it, lit it, and then flattened it piece by piece until it became the player.

1. 1 · BRIEF
   A desk objectKeys that latchA small displayOne glaze
   Hi-fi panels and desk instruments, not screens. Matte, quiet, one accent.
2. 2 · THREE DIRECTIONS
   Graphite read as a default dark UI; Instrument got busy. Paper Key won.
3. 3 · THE OBJECT Real parts, real numbers: Ø 52 keys, 2 mm travel, a 14×32 fader cap.
4. 4 · THE FLATTEN The engraved ring became a 1.25 px border. The groove became the timeline.
5. 5 · THE SKIN
   
   What ships: the same object, now CSS, over any footage.

▶ The film in the player above is this process, 27.5 seconds, rendered in Blender.

Eight parts. One dock.

Every control shows its own state on its face — latched, lit or moved — so you can read the player without opening anything.

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8

1. 1 · PLAY KEYThe only orange key. Its glyph morphs between play and pause.
2. 2 · DISPLAYState, speed and time in one black pill: PLAY 1.0×, PAUSED, LOADING, END.
3. 3 · SEEK FADERA ribbed cap on an engraved line. Hover for a framed preview of that moment.
4. 4 · MUTESpeaker glyph shows the level in waves; muted shows a cross.
5. 5 · VOLUME FADERA short bone fader. Arrow keys move it in 5 % steps.
6. 6 · CAPTIONSLatches down 1 px and takes a 2 px accent rim when on.
7. 7 · SETTINGSSpeed, captions and quality, in a bone panel that opens from the key.
8. 8 · FULL SCREENCorners out to enter, corners in to leave. The dock scales up to 1.25×.

Pick a glaze. Pick an accent.

Two settings restyle every part of the player: data-glaze for the material, --media-accent-color for the light. Try it on the real player.

Twelve moments. All designed.

Captured from the real player, not drawn. Mouse, keyboard and thumb.

1. 01 · STARTReady to playOne big key on the poster. Click, tap or Space.
2. 02 · STARTLoadingThree LEDs step in the display. Only after 400 ms.
3. 03 · WATCHINGPlayingThe dock: play, display, faders, keys.
4. 04 · WATCHINGControls hiddenFades away when the pointer rests.
5. 05 · FINDINGSeek previewA framed thumbnail follows the pointer.
6. 06 · FINDINGDraggingThe cap lifts 1 px while you hold it.
7. 07 · SOUNDMutedSpeaker with a cross; the fader keeps its level.
8. 08 · CAPTIONSCaptions onKey latches with an accent rim, text above the dock.
9. 09 · SETTINGSMenu openSpeed, captions, quality in a bone panel.
10. 10 · KEYBOARDFocus + tooltipInk ring, name and shortcut in a pill.
11. 11 · ENDReplayThe big key returns with the replay glyph.
12. 12 · PHONEPhone layout60 px dock, settings in the corner.

Readable over any frame.

The dock is opaque, so contrast never depends on the video. Switch the footage and watch nothing change.

• 0axe (WCAG 2.1 AA) violations, desktop and phone, menus open. report
• 13:1Ink on keys. Display text 16:1. Fills and fader lines ≥ 3:1 on every glaze.
• 44 pxMinimum target everywhere, including the 2 px timeline.
• 2 pxFocus ring, 3 px gap, separate from the pressed state. Keyboard only.
• HCForced colours: keys, accent rims and focus map to system colours.
• RMReduced motion: every state still changes; nothing travels.

Drawn to scale.

Four steps. Any site.

1. 01TERMINAL $ npm i @videojs/html@10
2. 02TERMINAL $ npx degit promoparkllc/tactile-paper-key/src tactile-skin
3. 03JS import '@videojs/html/video/player'; import './tactile-skin/video/skin';
4. 04HTML

   <video-player>
     <media-container class="media-skin media-container media-video"
                      data-theme="tactile" data-preset="video">
       <video src="clip.mp4" playsinline></video>
       <!-- then the rest of tactile-skin/video/skin.html, from <media-poster> on -->
     </media-container>
   </video-player>

Source: github.com/promoparkllc/tactile-paper-key · Apache 2.0 · works with any Video.js 10 media element.