Thủy Đình

Every part of the theatre is a control

In múa rối nước, puppets perform on the surface of a pond in front of a tiled pavilion called the thủy đình, while a drum opens the show. The skin borrows that stage and gives each piece a job.

Mặt nước the pond

The timeline. Played water turns gold, buffered water lightens, and the waves only move while the video plays.

Con vịt the duck puppet

The playhead. Drag it, or focus it and use the arrow keys. It bobs while playing and rests when paused.

Trống the drum

Play, pause and replay. One beat sends a ring across the water.

Mái đình the roof eave

Holds the title and the screen controls: picture-in-picture, AirPlay and Cast, each shown only where the browser supports it.

Ống tre a bamboo stalk

Volume. The stalk fills node by node as the sound rises.

Sơn mài lacquer

Menus, tooltips and dialogs are black lacquer panels edged in gold leaf.

Made to work for everyone

• Readable over any video. No bare text or icon sits on the picture. Every control carries its own solid surface: the roof, the pond or the lacquered drum.
• Keyboard throughout. Every control can be reached with Tab, menus close with Escape, and focus is a gold ring with a dark halo so it shows on any background.
• Easy to tap. Buttons grow to 44 pixels on touch screens, easing down only in the smallest embeds. Double-tap either side to skip ten seconds, or swipe across the picture to scrub.
• Calm on request. With reduced motion turned on, the water holds still and nothing slides or pulses.
• Fits small spaces. On narrow phones the roof keeps only the title. Below 320 pixels the roof and drum step aside and the pond keeps the essentials.
• Respects system settings. Higher contrast, reduced transparency and forced colours are each handled.

Keyboard shortcuts

Space K

Play or pause

← → J L

Skip back or forward

↑ ↓

Volume up or down

M

Mute

0–9

Jump to 0–90%

F

Fullscreen

C

Captions

I

Picture-in-picture

< >

Slower or faster