@pacem/pacem-fx

Visual effects for the Pacem JS ecosystem: gradients (pacem-fx-gradient with -linear/-radial/-stop children), a ripple effect, a pulse effect, a "fancy" text effect, a hero transition, and a list transition — 9 custom elements in total.

Depends on @pacem/pacem-foundation and @pacem/pacem-core.

Part of the Pacem JS ecosystem. Install @pacem/pacem instead if you want every package bundled together.

Installation

npm install @pacem/pacem-fx

Usage

As an ES module

import { Components } from '@pacem/pacem-fx';

In the browser, without a bundler

<script src="node_modules/@pacem/pacem-foundation/dist/browser/pacem-foundation.min.js"></script>
<script src="node_modules/@pacem/pacem-core/dist/browser/pacem-core.min.js"></script>
<script src="node_modules/@pacem/pacem-fx/dist/browser/pacem-fx.min.js"></script>

<button id="my-button">Click me</button>
<pacem-fx-ripple target="#my-button"></pacem-fx-ripple>

TypeScript

Typings ship in typings/index.d.ts and are resolved automatically via the package's exports field — both for the ES module import style and for the ambient Pacem global used by the plain <script> include above.

Custom elements

pacem-fx-fancy, pacem-fx-gradient, pacem-fx-gradient-linear, pacem-fx-gradient-radial, pacem-fx-gradient-stop, pacem-fx-hero, pacem-fx-list, pacem-fx-pulse, pacem-fx-ripple — see @pacem/pacem's dist/vscode.html-custom.json for attributes and editor IntelliSense support.

License

Apache-2.0 © Pacem