MARGEM / A FIGUEIRA PLAYER STUDY

Give a thought
somewhere to stay.

Most video interfaces help us move through time. MARGEM gives us a place to keep what that time means.

In a book, a margin is where a reader becomes a participant: a question, a connection, a small reminder. This skin brings that familiar idea to video. It is designed for creative films, lectures, process studies and any viewing experience worth returning to.

One visual idea, three useful behaviours.

Watch. The picture has a quiet, generous stage. Essential controls sit on an opaque ink surface, so they stay legible over both light and dark footage. Focus view lets the viewer put the companion aside.

Notice. Four curved leaves form a spatial chapter atlas. Each leaf is a real navigation target, not a decorative model. The active chapter is lime; a small cursor follows playback along the thread. The ordinary chapter buttons provide the same navigation without 3D or a pointer.

Keep. Save a moment, optionally add a note, and return to its timestamp. Notes become pins in the atlas and small marks on the seek bar. They can be edited, removed, restored after the latest deletion, and exported as plain text.

Visual language.

Warm ivory, evergreen ink and a sharp lime accent. A clear sans serif carries the interface; an expressive italic serif introduces the human voice. Fine rules, small numbered chapters and generous space borrow the rhythm of a printed journal. MARGEM means “margin” in Portuguese.

Motion with a purpose.

The atlas uses original procedural geometry. A slight pointer response suggests folded paper, while chapter colour and the moving thread explain the video’s position. It renders on demand rather than running an idle animation loop. Reduced-motion preferences disable pointer tilt and interface transitions; chapter navigation remains available.

Designed for more than a mouse.

• Keyboard-operable playback controls, seeking, volume, speed and fullscreen.
• Visible focus indicators, labelled controls, live status announcements and native dialogs that close with Escape.
• Mobile layout with the companion below the picture and enlarged transport targets.
• Captions for the film’s visual text and original sound, plus ordinary buttons alongside the spatial atlas.
• No autoplay. No account. No analytics. Notes remain in browser storage on this device; export is available if storage is unavailable or a portable copy is needed.

Built for a real player.

The skin uses Video.js 10.3.0 HTML components for playback, seeking, buffering, time, volume, captions, fullscreen and status announcements. Three.js draws the companion atlas. HTML, CSS and a small custom element join the experience together. The media, typography and JavaScript are served locally from the same static site, with no API key or runtime service.

This is a working prototype, not a claim of certified accessibility. The current preview has been checked in the available browser at desktop and mobile widths. Real-device and additional-browser testing remain useful before a wider production release.

An original film for the study.

“The shape of attention” is a 44-second procedural tesseract study in four chapters. Its four-dimensional hypercube, editorial composition and ambient tones were created for this entry. It uses no stock footage, paid generation, external voices or downloaded music. The source includes its renderer and an asset manifest.