@stianlarsen/react-fade-effects NPM

@stianlarsen/react-fade-effects

A versatile React library for applying various fade-in effects to your UI components. Starting with the FadeWords component, this library will grow to include multiple fade-related components, such as fading text, images, children elements, and more.

Preview

Text effect Component

_A preview of @stianlarsen/react-face-effects

Website coming soon with examples and demos

Features

Smooth Fade Animations: Easily create engaging fade-in effects for different types of UI elements.
Highly Configurable: Adjust the animation's duration, delay, stagger time, and more to match your design needs.
Ease of Integration: Drop the components into your project and customize them with minimal setup.
Built with TypeScript: Ensures type safety and a better development experience.

Installation

Install the package using npm:

npm install @stianlarsen/react-fade-effects

Or using yarn:

yarn add @stianlarsen/react-fade-effects

Usage

FadeWords Component

The FadeWords component allows you to create smooth fade-in effects for text.

Example

import { FadeWords } from "@stianlarsen/react-fade-effects";

function App() {
  return (
    <FadeWords
      words="Effortless Task Management with TaskBuddy"
      duration={1}
      delay={0.2}
      variant="up"
      scaleSize={1.05}
    />
  );
}

`FadeWords` Component Props

The FadeWords component accepts several props to customize its behavior and appearance:

Prop	Type	Description
`words`	`string` or `string[]`	The text or array of words to be displayed with the fade effect.
`className`	`string`	Additional CSS classes to apply to the component.
`filter`	`boolean`	Apply a blur filter during the animation. Defaults to `true`.
`duration`	`number`	Duration of the animation in seconds. Defaults to `1`.
`staggerTime`	`number`	Time in seconds to stagger the animation between words. Defaults to `0.1`.
`delay`	`number`	Delay before the animation starts in seconds. Defaults to `0.2`.
`variant`	default, up, down, left, or right	The direction of the animation. Defaults to `default`.
`scaleSize`	`number`	Scale size for the words during the animation. Defaults to `1`.
`once`	`boolean`	Whether the animation should occur only once. Defaults to `true`.
`translateAmount`	`number`	Custom translate value for the animation. Defaults to `15` for `up`/`down` and `15` for `left`/`right`.