OpenVibe Kit · patterns from production

Patterns that hold up in production

Each pattern pairs a live demo with its rule, the bug that taught it, shared tokens, and generated native examples.

Streams that hold still

Patch in placeWhen one event changes, only its row changes.Follow the bottomScroll follows new events only while the reader is at the end.Keep the anchorContent above the viewport can change without moving the visible row.Smooth foldsFolds change height in place and remain interruptible.Fade in new rowsOnly newly added rows enter; updates do not replay the entrance.

Status in one line

Progress stripA short status first; details stay one tap away.Outcome lineThe outcome and its recovery actions share one calm row.

One row per thing

One row per thingAttempts belong inside the task that owns them.

Elements

Pill buttons with iconsUse icon and text together for an action.Status badgesStatus always has a word as well as a color.Metadata chipsKeep secondary metadata compact and breakable.One-line empty statesExplain the empty state and give one way forward.Tabs, not foldsChoose one navigation model for a set of peer views.44 px targetsEvery interactive target is at least 44 px.Ask with a buttonThe next step is the most visible thing on the page.Coloured words mix with the textOne rule for words in colour, on every theme.Status is a dot and a wordA dot for the eye, a word for everyone, and nothing when away from it.Drop anywhere, watch a trayThe page is the drop target; the tray is the receipt.

Motion

Motion tokensShare timings across platforms and respect the system setting.

Navigation

Site switcherUse openvibe-shared/site-switcher.js and the shared navbar trigger.One navbar per pageThe shared Frame owns the page navbar.Bottom tabs without overlapScrollable content has enough bottom inset for the tabs and safe area.Watch and camera screens own the screenOne chat, no floating buttons, and nothing over the picture but its own controls.One menu buttonOne menu, one button; the menu opens on this site.Sites put their own content in the menuReal entries from the site itself, checked, or nothing.Your things in every barMessages, balances and your status, the same on every site.Six places in the bar, the rest under MoreSix in the bar, the rest one tap away.

Layout that holds

Decorations stay out of contentA flourish lands on its own bar’s edge and fades there.One set of columns for a listRows of one list line up with each other.Numbers line up under their headerDigits stack, and the header sits over them.Tables scroll inside themselvesWhole words in cells; only the table scrolls.Measure at restWait for the motion to settle before you measure.Drag or tap, never bothSmall moves are taps; real moves are drags.Floating surfaces clear the toastsTwo things in one corner never cover each other.Wide tables become labelled cardsNothing is left out, nothing scrolls sideways, and every value says what it is.The hero draws its own placesThe first screen shows this site, not the network’s wallpaper.On a phone, New is a floating button over a sheetAdding is one button; its choices wait in a sheet.One card that is also a rowOne item, two layouts, one switch.An even grid: no card alone on a rowColumns that divide the cards.

Brand

The mark at workThe mark carries its identity through loading and site changes.

Agents

Ask your agent, with the question waitingOne chip, the context in the box, never sent.Levels with a floor that never movesFour cards, and the floor in view.The agent’s line leaves the work in viewOne line above the work, four states.

Honest numbers

A column earns its placeEmpty columns stay out; one plain line says what is missing.A missing number is not zeroMissing sorts last and wins nothing.A starting value is not a resultNo games, no rating: the words say so.A number names its sourceThe value, then what it rests on.A price says when it was checkedChecked today, or “may have changed”.