@ax-design/pressure

Web component that implements Tilt Effect of Axiom Design System.

Installation

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

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

and import it:

//CommonJS
require('@ax-design/pressure').register();

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

Usage

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:

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

Style Controlling

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

--pressure-tilt-depth

Type: <length>

Default: 1px

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

--pressure-zoom

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.

--pressure-perspective

Type: <length>

Default: 25px

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