Skip to content

component

Video Ring

By BuiltByKern

Details

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.

12001400146718/148/228/309/79/15
  • All · #3470