1.0.5 • Published 12 months ago

@avent-ui/magneto v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

AventUI - Magneto

The Magneto component acts like any traditional container , but with magnetic properties. It includes controls for period, and amplitude in both axis allowing for dynamic, magnetic-like motion effects.

Installation

1. Install the Component via npm:

npm install @avent-ui/magneto

2 . Tailwind CSS setup

AventUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add the following code to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@avent-ui/magneto/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Import any Component

import { Magneto } from '@avent-ui/magneto';

3. Use it as a replacement for any container tag

<Magneto>
    Avent UI is Amaaaazing!!
</Magneto>

Properties

PropTypeDescriptionDefault
periodXnumberFrequency of the magnetic movement along the X axis0.3
periodYnumberFrequency of the magnetic movement along the Y axis0.3
amplitudeXnumberIntensity of movement along the X axis1
amplitudeYnumberIntensity of movement along the Y axis1
1.0.5

12 months ago

1.0.4

12 months ago

1.0.2

12 months ago

1.0.1

12 months ago

1.0.0

12 months ago