---
title: "Motion · OpenVibe.Design"
canonical: "https://openvibe.design/motion"
updated: null
---

# Motion · OpenVibe.Design

HTML: [Motion · OpenVibe.Design](https://openvibe.design/motion)

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](#use) [The mark](/brand)

## 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.

 **Glint** A 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 live** Geese at dawn · 41 watching](#mo-glow)

 **Glow** The accent glows up behind it. For cards and tiles that open something. `data-fx="glow"`   

[**Goosely is live** Geese at dawn · 41 watching](#mo-lift)

 **Lift** It rises a little, with a softer shadow, and settles on a spring. `data-fx="lift press"`   

 **Press** It gives under your finger and springs back. Every button should. `data-fx="press"`   

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

**OpenVibe.Live** Go live from your browser

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

- Live
- Design
- Codes
- Tools
- Games

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

**12,480** people went live from a browser

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

 **Confetti** For real moments only: a first stream, a tip, a goal reached. `data-fx="confetti press"`   

 **Shimmer** A 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-1`**120 ms**a press
- `--ov-dur-2`**200 ms**a hover
- `--ov-dur-3`**320 ms**a panel or a lift
- `--ov-dur-4`**520 ms**a 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);
}
~~~~