Welcome to project Axiom!

Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design to a single design language.

This repo contains code of tilt effect effect of Fluent design System.

To use this package, install by one of following:

Load the package directly:

<script src="https://unpkg.com/@ax-design/pressure" />

```
<script>AxPressure.register()</script>
```

Load the package by esmodule:

<script type="module">
import { register } from 'https://unpkg.com/@ax-design/pressure/es/index.js'
register()
</script>

Load the package by module loader or bundler:
yarn add @ax-design/pressure or npm i @ax-design/pressure

CommonJS

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

ESModule

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

General Button

In order to use this component, we need to prepare some HTML:

<ax-pressure>
              <button class="ax-pressure-button">Hello</button>
            </ax-pressure>
            <ax-pressure>
              <button class="ax-pressure-button">World</button>
            </ax-pressure>

Zoom Factor

.my-tile-container{
              --pressure-zoom: 1;
            }

Tilt Depth

.my-tile-container{
              --pressure-tilt-depth: 50px;
            }

Perspective

.my-tile-container{
              --pressure-perspective: 5px;
            }