Web component that implement tilt effect of Axiom Design System.

Usage no npm install needed!

<script type="module">
  import axDesignPressure from 'https://cdn.skypack.dev/@ax-design/pressure';



Web component that implements Tilt Effect of Axiom Design System.

npm version CI Status MIT Licence



// with npm
npm install @ax-design/pressure

// with yarn
yarn add @ax-design/pressure

and import it:


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


To add a reveal effect on your web application, you need to wrap a ax-pressure component with the component you want to add tile effect. Here's an example:

  <div class="tile">
    <img class="tile-icon" src="./images/apple.svg" alt="Icon of Apple" />
    <p class="tile-title">Apple</p>

Style Controlling

Pressure component uses custom properties to manage the style of the tile effect.


Type: <length>

Default: 1px

Description: The depth at which one side sinks down when the mouse presses the edge of the element.


Type: <length>

Default: 0.8px

Description: The extent to which the entire element falls down when the mouse is pressed down the center of the element.


Type: <length>

Default: 25px

Description: To give the element some perspective, check out this tutorial.