component
Video Ring
By BuiltByKern

Details
- BuiltByKernAuthor
- componentType
- 2026-08-01Published
- 2026-09-01Updated
- 2026-08-01Added
- SectionsCategories
Summary
Video Ring is a BuiltByKern micro hero controller: your video fills the frame while a circular play/pause control tracks progress on a radial ring.
Description
Video Ring is a BuiltByKern micro hero controller: your video fills the frame while a circular play/pause control tracks progress on a radial ring. Autoplay, loop, and mute when you need them; pause when offscreen or the tab is hidden. Fit cover/contain/fill, corner placement, blur glass button, and a keyboard focus accent. Canvas-safe static progress and reduced-motion aware. Zero external packages beyond Framer. Desktop click/tap is the product — no auto-demo. Categories / tags Components · Video · Media · Interaction · Hover · Motion · Hero Features Floating play/pause control with radial timeline ring Progress from currentTime / duration (smooth, no janky re-renders) Autoplay / loop / muted + pause offscreen / tab hidden Object prop groups: Media · Playback · Appearance · Control Corner placement + inset · Fit · blur glass · veil Keyboard focus accent · play/pause labels · aria-pressed Canvas / export static preview + reduced-motion safe Zero external dependencies beyond Framer No Auto Demo — interaction is the product BuiltByKern
Introduction
Video with a floating play/pause
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #3470