@stianlarsen/react-fade-effects

@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

_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.

Future Components

This package is designed to expand with additional fade components, such as:

• FadeChildren: Apply fade-in effects to child elements within a container.
• FadeImages: Animate image elements with fade effects.
• FadeContainers: Apply fades to entire sections or containers.

Each future component will come with its own set of customizable props, following the same flexible design as FadeWords.

Contributing

Contributions are always welcome! Please feel free to open issues or submit pull requests.

License

@stianlarsen/react-fade-effects is MIT licensed.

Contact

For any questions or suggestions, feel free to reach out.

• GitHub: @stianlars1
• Website: https://stianlarsen.com
• Email: [e-mail]