Interactive States and Animations Project

This is a React project created with Create React App. It showcases a collection of demos illustrating different types of animations and interactive states in user interfaces. These elements are intended to enhance UI/UX design by providing prominence, interaction feedback, and aesthetic value.

👉 live demo here!

Main Features

• Demos: The project includes a series of demos located in the src/demos directory. Each demo showcases different interactive states and animations using customizable and re-usable components. Examples of these demos include fully-interactive buttons, checkable buttons, animation cycles, and more.

• Interactive Button Component: This re-usable button component, found in src/components/interactive-button/interactive-button.tsx, is highly customizable. It can handle success, error, and loading states, and can even be used as a toggle switch.

• Effects: The src/effects directory contains a variety of modules showcasing experiments for increasing prominence and adding animations to interactive elements. These include color changes, opacity changes, border and shadow contrasts, various movement effects, resizing, shape alterations, and more.

• Themes: The project includes two themes, modernTheme and shadowTheme, which can be found under src/style. These themes can be applied across the application and are customizable according to your needs.

Getting Started

1. Clone this repository
2. Install dependencies with npm install or yarn / pnpm
3. Start the local development server with npm start or yarn start

The project will start at http://localhost:3000.

Customization

You are encouraged to customize and experiment with the components, themes, and effects provided in this project. Most of them can be adjusted and tailored according to your needs by modifying the appropriate .tsx files.

Contributing

Contributions to this project are always welcome. Feel free to open issues or submit pull requests.