Motion

Motion that means something.

The mark draws its ring, drops its V in on a spring and catches the light once. Everything else on OpenVibe moves the same way: one timing, one set of effects, shared by every site. Nothing spins, nothing loops, and with Calm on, nothing moves at all.

Use it on your site The mark

The effects

Each one is a word in data-fx, and words combine: data-fx="lift press". Point at them, press them, scroll to them.

GlintA band of light crosses it when you point at it. For the one thing on a page you want found.data-fx="glint"

Goosely is liveGeese at dawn · 41 watching

GlowThe accent glows up behind it. For cards and tiles that open something.data-fx="glow"

Goosely is liveGeese at dawn · 41 watching

LiftIt rises a little, with a softer shadow, and settles on a spring.data-fx="lift press"

PressIt gives under your finger and springs back. Every button should.data-fx="press"

RippleA ring spreads from the exact point you pressed, in the text colour.data-fx="ripple press"

OpenVibe.LiveGo live from your browser

TiltIt leans toward the pointer, like a card in the hand. Mouse only.data-fx="tilt glint"

Live
Design
Codes
Tools
Games

RevealIts items rise in, one after another, the first time they come on screen.data-fx="reveal"

12,480people went live from a browser

CountA number counts up when it is first seen, and ends on exactly its own text.data-fx="count"

ConfettiFor real moments only: a first stream, a tip, a goal reached.data-fx="confetti press"

ShimmerA placeholder that breathes until its content lands. Never a spinning ring.data-fx="shimmer"

The timing

Three curves and four lengths, as CSS variables on every OpenVibe page. A look can bring its own, and Calm sets every length to zero.

Out --ov-ease-out

Things arriving: a panel opening, a tooltip, a reveal.

Spring --ov-ease-spring

Things you touched: a press springing back, a lift, the mark’s V.

In and out --ov-ease-in-out

Things crossing: a glint, a slide from one place to another.

--ov-dur-1120 msa press
--ov-dur-2200 msa hover
--ov-dur-3320 msa panel or a lift
--ov-dur-4520 msa spring settling

The rules

So that motion stays a signal, never noise.

It means something.

Every move says one thing: this is new, this worked, this is yours to press. A move that says nothing is cut.

The wait is the mark’s own.

Working is its O as dots going round; thinking is three dots rising inside it. Nothing else turns a circle, and there is no borrowed spinner.

Once, then still.

Effects play on a hover, a press or the first time something is seen, then rest. Nothing runs on its own, and nothing moves off screen.

Calm is gentler. Off is still.

Calm, or a device that asks for less motion, plays every effect smaller and slower. Only Off stops them: then nothing moves, nothing counts and no confetti falls.

Never hide to animate.

What is on screen when the page opens is never hidden for an entrance. Only what is further down rises in.

One kit.

Every site uses the same effects and the same timing, so the network feels like one place.

Use it

On OpenVibe sites the navbar loads the kit by itself, only on a page that asks with data-fx. Anywhere else, one script tag. Open source (MIT).

On a web page

<script src="https://openvibe.design/shared/ov-fx.js" defer></script>

<a class="card" data-fx="lift press glow">…</a>
<b data-fx="count">12,480</b>
<button data-fx="confetti press">Send the tip</button>

From script

// From script, for a moment of your own:
OVFx.confetti({ x: 200, y: 120 });

// Markup added later is wired by itself; or ask for it:
OVFx.scan(document.querySelector('#feed'));

The timing in your own CSS

.panel {
  transition: transform var(--ov-dur-3) var(--ov-ease-spring),
              opacity var(--ov-dur-2) var(--ov-ease-out);
}