Surfaces

Floating panel

A box that can be dragged anywhere: docked in its frame or floating over the page, tucked into a side, sized and kept where you left it.

openvibe-shared/ov-floatJSON

Live demo

Drag the box by its body; let go over the frame and it docks, anywhere else it floats. Throw it past a side to tuck it, drag its corner to size it, or use the keys with it focused: arrows move, + and − size, T tucks, F docks or floats, Home puts it back.

LIVEPicture-in-pictureDrag me anywhere
docked
frame
The element it docks in and measures its fractions against. Without one it only floats over the page.
key and defaults
The place kept in this browser, and the streamer's starting x, y and width as fractions of the frame.
aspect and minPx
The source's own shape, and the smallest 16:9 width on a phone-sized frame (150 px for the PiP).
onChange
Every saved place, with the geometry and the instance. OVFloat.store is the account plug; OVFloat.layout() and ov:float say where everything is.

Rule 115: A picture-in-picture goes anywhere, tucks aside and waits with the mark. The same engine moves Live's picture-in-picture and a panel window; on a site with GET/PATCH /api/me/layout the place also follows the person to another device.

Build it

OVFloat.attach(el, { frame, key, defaults, aspect, minPx, onChange })

Props

key
string?
tab
boolean?
frame
element?
minPx
number?
store
object?
aspect
number?
handle
element?
resize
boolean?
defaults
object?
onChange
function?
viewport
string?
legacyKeys
list?

Anatomy

  • boxThe thing that moves: any element, with its own look and children.
  • frameThe element it docks in and measures its fractions against; without one it only floats over the page.
  • tabWhat stays on screen when the box is tucked into a side; a press brings it back.
  • gripThe corner that sizes it, and two fingers that pinch it; a double tap toggles small and large.

Behaviour and access

Keyboard
Keeps the focused control in view
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
No spring, lift or scrub; it is simply where it goes.
Name
A floating panel; its tab says Bring it back
Target
At least 44 × 44 px for the tab and the corner grip
Focus
With focus: arrows move, + and − size, T tucks, F docks or floats, Home puts it back where it started.

States

  • docked
  • floating
  • lifted
  • dragging
  • tucked-left
  • tucked-right
  • resizing
  • active

Tokens

  • --ov-float-tab
  • --ov-ease-spring
  • --ov-dur-3
  • color.accent.strong

Android · Jetpack Compose

Surface

A draggable Surface in a Box: a remembered fraction of its frame, a spring landing, edge snapping, a tucked tab, pinch and corner size, and the place kept per key.

iOS · SwiftUI

A draggable view in a GeometryReader with a spring, edge snapping, a tucked tab, pinch and corner size, and a fraction place kept per key.

Markup

Default

<div class="ov-float" data-ov-float-demo>Drag me anywhere</div>