Video Ring

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.

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