docs(docs): 📝 readme, license, changelog

Author: alckordev

CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2025-01-XX
+
+### Added
+
+- Initial release of @iscodex/tailwindcss-animate
+- Support for Tailwind CSS v4 with @utility and @theme syntax
+- 85+ animation utilities across 11 categories:
+  - Attention Seekers (16 animations)
+  - Back Entrances/Exits (8 animations)
+  - Bouncing Entrances/Exits (10 animations)
+  - Dashing (4 animations)
+  - Fading Entrances/Exits (10 animations)
+  - Flippers (5 animations)
+  - Rotating Entrances/Exits (10 animations)
+  - Sliding Entrances/Exits (8 animations)
+  - Specials (6 animations)
+  - Zooming Entrances/Exits (10 animations)
+- Animation control utilities:
+  - Duration control with arbitrary values
+  - Delay control with arbitrary values
+  - Direction control (normal, reverse, alternate)
+  - Fill mode control (none, forwards, backwards, both)
+  - Iteration count control (finite and infinite)
+  - Play state control (running, paused)
+  - Timing function control (ease, linear, cubic-bezier)
+  - Animation composition control (replace, add, accumulate)
+- CSS custom properties for global animation theming
+- Modular architecture with organized animation categories
+
+[1.0.0]: https://github.com/iscodex/tailwindcss-animate/releases/tag/v1.0.0

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Francisco Luis Rios Vega
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -4,12 +4,11 @@ Extended animation utilities for Tailwind CSS v4. Modern, lightweight, and fully
 
 ## Features
 
-- **Tailwind CSS v4 Native** - Built with `@utility` and `@theme` syntax
+- **Tailwind CSS v4** - Built with `@utility` and `@theme` syntax
 - **Zero Configuration** - Just import and start animating
 - **Fully Customizable** - Control duration, delay, timing, and more
 - **CSS Custom Properties** - Easy theming and dynamic control
 - **Modular Architecture** - Import only what you need
-- **TypeScript Support** - Complete type definitions included
 
 ## Installation
 
@@ -48,41 +47,135 @@ Start using animations:
 - `animate-flash` - Flashing effect
 - `animate-head-shake` - Head shake movement
 - `animate-heart-beat` - Heart beating effect
-- `animate-jello` - Jello wobble effect
+- `animate-jelly` - Jello wobble effect
 - `animate-rubber-band` - Rubber band stretch
 - `animate-shake-x` - Horizontal shake
 - `animate-shake-y` - Vertical shake
 - `animate-swing` - Pendulum swing
 - `animate-tada` - Celebration effect
 - `animate-wiggle` - Gentle rotation wiggle
 - `animate-wobble` - Side-to-side wobble
+- `animate-float` - Floating effect
+- `animate-spin` - Continuous rotation
+- `animate-ping` - Ping radar effect
+- `animate-pulse` - Pulse opacity
+- `animate-bounce` - Bouncing effect
 
-### Dashing Animations
+### Back Entrances
 
-- `animate-dash-in-left` - Fast slide in from left
-- `animate-dash-in-right` - Fast slide in from right
-- `animate-dash-out-left` - Fast slide out to left
-- `animate-dash-out-right` - Fast slide out to right
+- `animate-back-in-down` - Back entrance from top
+- `animate-back-in-start` - Back entrance from left
+- `animate-back-in-end` - Back entrance from right
+- `animate-back-in-up` - Back entrance from bottom
 
-### Bouncing Effects
+### Back Exits
+
+- `animate-back-out-down` - Back exit to bottom
+- `animate-back-out-start` - Back exit to left
+- `animate-back-out-end` - Back exit to right
+- `animate-back-out-up` - Back exit to top
+
+### Bouncing Entrances
 
 - `animate-bounce-in` - Bounce entrance
 - `animate-bounce-in-down` - Bounce in from top
+- `animate-bounce-in-start` - Bounce in from left
+- `animate-bounce-in-end` - Bounce in from right
 - `animate-bounce-in-up` - Bounce in from bottom
+
+### Bouncing Exits
+
 - `animate-bounce-out` - Bounce exit
+- `animate-bounce-out-down` - Bounce out to bottom
+- `animate-bounce-out-start` - Bounce out to left
+- `animate-bounce-out-end` - Bounce out to right
+- `animate-bounce-out-up` - Bounce out to top
+
+### Dashing
+
+- `animate-dash-in-start` - Fast slide in from left
+- `animate-dash-in-end` - Fast slide in from right
+- `animate-dash-out-start` - Fast slide out to left
+- `animate-dash-out-end` - Fast slide out to right
+
+### Fading Entrances
 
-### Rotating Effects
+- `animate-fade-in` - Fade entrance
+- `animate-fade-in-down` - Fade in from top
+- `animate-fade-in-start` - Fade in from left
+- `animate-fade-in-end` - Fade in from right
+- `animate-fade-in-up` - Fade in from bottom
+
+### Fading Exits
+
+- `animate-fade-out` - Fade exit
+- `animate-fade-out-down` - Fade out to bottom
+- `animate-fade-out-start` - Fade out to left
+- `animate-fade-out-end` - Fade out to right
+- `animate-fade-out-up` - Fade out to top
+
+### Flippers
+
+- `animate-flip` - 3D flip effect
+- `animate-flip-in-x` - Flip in on X-axis
+- `animate-flip-in-y` - Flip in on Y-axis
+- `animate-flip-out-x` - Flip out on X-axis
+- `animate-flip-out-y` - Flip out on Y-axis
+
+### Rotating Entrances
 
 - `animate-rotate-in` - Rotating entrance
+- `animate-rotate-in-down-start` - Rotate in from top-left
+- `animate-rotate-in-down-end` - Rotate in from top-right
+- `animate-rotate-in-up-start` - Rotate in from bottom-left
+- `animate-rotate-in-up-end` - Rotate in from bottom-right
+
+### Rotating Exits
+
 - `animate-rotate-out` - Rotating exit
+- `animate-rotate-out-down-start` - Rotate out to bottom-left
+- `animate-rotate-out-down-end` - Rotate out to bottom-right
+- `animate-rotate-out-up-start` - Rotate out to top-left
+- `animate-rotate-out-up-end` - Rotate out to top-right
 
-### Special Effects
+### Sliding Entrances
+
+- `animate-slide-in-down` - Slide in from top
+- `animate-slide-in-up` - Slide in from bottom
+- `animate-slide-in-start` - Slide in from left
+- `animate-slide-in-end` - Slide in from right
+
+### Sliding Exits
+
+- `animate-slide-out-down` - Slide out to bottom
+- `animate-slide-out-up` - Slide out to top
+- `animate-slide-out-start` - Slide out to left
+- `animate-slide-out-end` - Slide out to right
+
+### Specials
 
 - `animate-hinge` - Door hinge effect
 - `animate-jack-in` - Pop-up like jack-in-the-box
 - `animate-jack-out` - Reverse jack-in effect
+- `animate-roll-in` - Rolling entrance
+- `animate-roll-out` - Rolling exit
+- `animate-particle` - Particle effect
+
+### Zooming Entrances
+
+- `animate-zoom-in` - Zoom entrance
+- `animate-zoom-in-down` - Zoom in from top
+- `animate-zoom-in-up` - Zoom in from bottom
+- `animate-zoom-in-start` - Zoom in from left
+- `animate-zoom-in-end` - Zoom in from right
+
+### Zooming Exits
 
-_And many more..._
+- `animate-zoom-out` - Zoom exit
+- `animate-zoom-out-down` - Zoom out to bottom
+- `animate-zoom-out-up` - Zoom out to top
+- `animate-zoom-out-start` - Zoom out to left
+- `animate-zoom-out-end` - Zoom out to right
 
 ## Control Utilities
 
@@ -127,12 +220,6 @@ _And many more..._
 <div class="animate-bounce animate-ease-in-out">Smooth bounce</div>
 ```
 
-### Composition
-
-```html
-<div class="animate-bounce animate-wiggle animate-add">Combined animations</div>
-```
-
 ## CSS Custom Properties
 
 Customize animations globally using CSS custom properties:
@@ -155,7 +242,9 @@ Customize animations globally using CSS custom properties:
 ### Hover Animations
 
 ```html
-<button class="hover:animate-wiggle transition-all">Hover to wiggle</button>
+<button class="hover:animate-wiggle hover:animate-infinite">
+  Hover to wiggle
+</button>
 ```
 
 ### Responsive Animations
@@ -172,17 +261,13 @@ Customize animations globally using CSS custom properties:
 <div class="animate-spin animate-duration-[3.5s]">Custom timing</div>
 ```
 
-## Contributing
-
-Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
-
 ## License
 
 MIT License - see [LICENSE](LICENSE.md) file for details.
 
 ## Changelog
 
-See [CHANGELOG.md](CHANGELOG.md) for version history.
+See [CHANGELOG](CHANGELOG.md) for version history.
 
 ## Links
 
@@ -193,4 +278,4 @@ See [CHANGELOG.md](CHANGELOG.md) for version history.
 
 ---
 
-Made with ❤️ by [@iscodex](https://github.com/iscodex)
+Made with ❤️ by [@alckordev](https://github.com/alckordev)

package.json

@@ -30,7 +30,7 @@
   "files": [
     "/src",
     "/README.md",
-    "/LICENSE"
+    "/LICENSE.md"
   ],
   "author": "Francisco Luis Rios Vega <[email protected]>",
   "license": "MIT",

web/app/routes/configurator.tsx

@@ -102,9 +102,11 @@ export default function Configurator() {
             ))}
           </div>
         </Sidebar>
-        <div className="relative">
+        <div className="relative p-16">
           <div className="absolute inset-0 dots-pattern opacity-70" />
-          Content
+          <div className="relative z-10">
+            <div className="animate-bounce md:animate-fade-in lg:animate-none bg-pink-500 w-10 h-10"></div>
+          </div>
         </div>
         <Sidebar position="end" className="w-90">
           <div className="mb-8 px-6">