Iris: a Video.js 10 skin shaped like a camera lens
Iris is a Video.js 10 skin shaped like a camera lens and read like a watch. Pause and the blades shut. Scrub and the preview opens like an iris.
The problem
A skin ends up on sites its designer never sees, from a podcast to a portfolio. Most skins choose between personality and fitting in. Iris keeps every control where people expect it and puts its personality into how things move.
The idea
A lens and a watch are the most legible small, round interfaces people own.
Play sits in a lens. Its ring fills chapter by chapter, so progress reads at a glance.
Scrub, and the preview opens like an aperture, from a small circle to the full frame.
Speed rolls out into seven keys, 0.5× to 2×. Any speed is one move, not six presses.
Volume stretches into a capsule with ten steps and the level at its end.
Press a key, and the feedback grows from the control you would have touched.
Easy on any screen
Settings opens straight on quality from Mux and only shows a row when there’s a real choice. On phones, menus become a sheet across the player, within reach of a thumb.
Accessible by default
Every control works by keyboard, with a visible focus ring, and menus can be closed from the keyboard. Dark frosted surfaces sit behind every control, so icons stay readable over bright and dark footage. Captions, reduced motion and forced colors are built in, and the screen-reader announcer comes from Video.js 10.
Polish
All 25 player states are designed, from loading and errors to captions and the end screen. One accent and one corner radius restyle everything. Iris is built from Video.js 10’s own components and is open source under Apache 2.0.
Streamed on Mux
Everything you watch comes from a single Mux asset. Mux streams the film in adaptive quality, so the Settings menu opens on real renditions, from Auto up to 1080p. The poster is a Mux thumbnail, and every frame inside the iris preview comes from Mux’s storyboard, so the aperture opens onto the exact moment you’re scrubbing to.
Mux playback ID: lIEE8jhRtmZTwvTyz1t5V01b4PukwZBSzXHnuxMGMtRc
The film
Wing It! (CC) Blender Foundation | studio.blender.org
(http://studio.blender.org)Licensed under CC BY 4.0. Sound captions written for this demo.
2
7
403
Lens — never sign what you can't read.
My submission for the Figma Config Makeathon.
You sign leases you didn't fully read. Pay bills you couldn't really check. Open lab results and can't tell if the number is bad. It's not you — the documents that decide your money, your home, and your health are built to be unreadable, with the parts that can hurt you buried where you'd never find them.
Lens reads them back to you. Drop in any document and it knows what it's looking at, reads every line, and shows you exactly what matters — and what to do about it.
Bills — "Am I being overcharged?" On a $169.77 power bill, it cleared the 8 fair charges (and explained them) and flagged 4 that weren't — a late fee on a payment that arrived early, a paper charge after you'd gone paperless, a $9.99 plan you never signed up for. $30.98 you shouldn't pay, with how to get it back.
Contracts — "What am I agreeing to?" On a lease, it read all 14 clauses and surfaced the 3 working against you — an auto-renewal that locks you in unless you cancel 60 days out, and an entry clause that breaks state law — each with the exact move to make.
Lab results — "Should I worry?" It lays every marker on a calm range, shows the trend over time, and turns a scary-looking number into the precise questions to ask your doctor. It won't diagnose you — it makes you walk in informed instead of afraid.
Why it fits "design matters more than ever": ask any AI to summarize a contract and you get another wall of text. Lens makes the opposite bet — the understanding lives in the interaction: the green/red triage, the document that flags itself, the calm spectrum that turns panic into orientation. Strip the design away and you're holding the same unreadable page.
Everything is processed locally — your documents stay yours.
🔗 Live project: https://clad-speck-44671030.figma.site
(https://clad-speck-44671030.figma.site/)🎨 Figma Community: https://www.figma.com/community/file/1649506511157192753
2
267
Roamr — An AI Travel Companion Built Entirely in Google Stitch
Most travel apps help you book a trip. Roamr explores what happens after that.
The product guides travelers through packing, airport mode, arrival, destination discovery, itineraries, travel documents, local assistance, and memories—all within one connected experience.
Built entirely inside Google Stitch:
• Product concept and UX flows
• Design system generation using Design.md
(http://Design.md)• Multi-screen mobile experience
• Visual assets and imagery
• Motion concepts and interaction design
• Iterative refinement through conversational editing
One of my favorite parts of the process was variation generation. Exploring subtle refinements or entirely different directions took seconds, making iteration dramatically faster than traditional workflows.
Project: https://stitch.withgoogle.com/projects/5471238858897057276
1
192