https://github.com/utkarsh5026/mayosite

Animate and Dominate - playground ▶️ for the mayonation created by me
https://github.com/utkarsh5026/mayosite

animation animation-library nodejs react typescript

Last synced: 1 day ago
JSON representation

Animate and Dominate - playground ▶️ for the mayonation created by me

• Host: GitHub
• URL: https://github.com/utkarsh5026/mayosite
• Owner: utkarsh5026
• License: mit
• Created: 2025-01-13T13:38:57.000Z (13 days ago)
• Default Branch: main
• Last Pushed: 2025-01-14T11:58:30.000Z (12 days ago)
• Last Synced: 2025-01-14T12:43:28.514Z (12 days ago)
• Topics: animation, animation-library, nodejs, react, typescript
• Language: TypeScript
• Homepage: https://utkarsh5026.github.io/mayosite/
• Size: 592 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🎮 Mayonation Playground

A web-based playground for experimenting with the ✨ Mayonation animation library. This project demonstrates the magic of Mayonation through an interactive interface where creativity meets code! 🚀

## 🌟 Overview

This playground lets you unleash your animation creativity to:

- 🔮 Experiment with mind-bending 3D transformations

- ⏱️ Test different animation timings and easings

- 👁️ Watch your animation effects come to life in real-time

- 🎛️ Shape complex animations through an intuitive UI

## 🎨 Features

### 🎯 Transform Controls

- 🏃‍♂️ **Translation**: Make elements dance along X, Y, and Z axes

- 🔄 **Rotation**: Spin your creations around X, Y, and Z axes

- 📐 **Scale**: Stretch and squeeze in X, Y, and Z dimensions

### ⚡ Animation Settings

- ⏳ Customizable duration (100ms to 3000ms)

- 🌊 Multiple easing functions:

  - 📏 Linear

  - 🚀 Ease In

  - 🪂 Ease Out

  - 🎢 Ease In Out

## 🛠️ Tech Stack

- ⚛️ React + TypeScript

- 🔄 Redux for state management

- 🎨 Tailwind CSS for styling

- 🎯 Radix UI for accessible components

- ✨ Mayonation for animations