Pressure

A tilt that leans an element away from the point you press, like pushing on a tile.

Wrap an element with ax-pressure and it tilts away from the point you press and sinks a little. Press near an edge and that side sinks, press the middle and the whole element falls.

Pressure runs on Surface: it is the tilt of ax-surface. Other surfaces inside ax-pressure, like ax-reveal, follow your pointer correctly while the element is tilted. If you already use ax-surface, you can tilt it directly with --ax-tilt-mode.

Installation

shell 
npm install @ax-design/pressure

and import it:

js 
import { register } from '@ax-design/pressure';
register();

If you don't use a bundler, load the script instead:

html 
<script src="https://unpkg.com/@ax-design/pressure/build/main.js"></script>
<script>AxPressure.register();</script>

Apple

Tilt

Press the tile near its edge. In absolute mode the pressed side sinks by the tilt depth, a length that does not depend on the size of the element.

The zoom is how far the whole element falls when you press its center.

Try it

4 px
0.8 px
html 
<ax-pressure>
  <div class="tile">
    <img src="apple.svg" alt="">
    <p>Apple</p>
  </div>
</ax-pressure>
css 
ax-pressure {
  --pressure-tilt-depth: 4px;
  --pressure-zoom: 0.8px;
}

Tea

Relative mode

In relative mode the element tilts by a number of degrees, so a large element leans as far as a small one. Use it for elements of very different sizes.

Press the tile near a corner to see the angle.

Try it

8
css 
ax-pressure {
  --pressure-tilt-mode: relative;
  --pressure-tilt-factor: 8;
}

Donut

Perspective

The perspective is the distance of the viewer. A short distance makes the tilt look strong, a long one makes it look flat.

Invert the tilt and the pressed side lifts toward you instead of sinking.

Try it

25 px
css 
ax-pressure {
  --pressure-perspective: 25px;
  --pressure-invert: false;
}

With Reveal Highlight

An ax-reveal inside ax-pressure keeps its light under your pointer while the element is tilted, because the pointer is mapped through the tilt.

Press and move around on the buttons.

Try it

6 px
html 
<ax-pressure>
  <ax-reveal><button>Open</button></ax-reveal>
  <ax-reveal><button>Save</button></ax-reveal>
</ax-pressure>
css 
ax-pressure {
  --pressure-tilt-depth: 6px;
}

Reference

--pressure-tilt-depth property

<length>, default 1px

The depth at which one side sinks when you press the edge of the element.

--pressure-zoom property

<length>, default 0.8px

How far the entire element falls when you press its center.

--pressure-perspective property

<length>, default 25px

The perspective of the tilt.

--pressure-tilt-mode property

absolute | relative, default absolute

Absolute sinks the pressed side by --pressure-tilt-depth. Relative tilts the element by --pressure-tilt-factor degrees.

--pressure-tilt-factor property

<number>, default 2

The angle in degrees for relative mode.

--pressure-invert property

true | false, default false

true lifts the pressed side instead of sinking it.