@stianlarsen/react-fade-effects
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

@stianlarsen/react-fade-effects

npm version

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.

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.

Package Sidebar

Install

npm i @stianlarsen/react-fade-effects

Weekly Downloads

3

Version

1.0.6

License

MIT

Unpacked Size

24 kB

Total Files

14

Last publish

Collaborators

  • stianlarsen