@stellix-agency/motion 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,357 @@
+# Magic Motion 🎬
+
+An intuitive and powerful GSAP wrapper for creating stunning animations with ease. Built for Solid.js and Astro projects.
+
+## Features
+
+✨ **Fluent API** - Chain animations naturally with an intuitive syntax  
+🎯 **TypeScript First** - Full type safety with comprehensive JSDoc  
+📜 **Scroll Animations** - Easy ScrollTrigger integration  
+🎨 **Rich Presets** - Common animation patterns out of the box  
+🔧 **Utility Functions** - Stagger, batch, parallax, and more  
+⚡ **Lightweight** - Minimal wrapper over GSAP's powerful engine  
+🔥 **Auto Types** - No manual type declarations needed (v1.0.1+)
+
+## Installation
+
+```bash
+npm install @stellix-agency/motion gsap
+```
+
+> **Note**: As of v1.0.1, you no longer need to create a manual `directives.d.ts` file! Types are now automatically included.
+
+## Quick Start
+
+### Basic Usage
+
+```typescript
+import { Motion } from '@stellix-agency/motion';
+
+const element = document.querySelector('.box');
+const motion = new Motion(element);
+
+motion
+  .fadeIn()
+  .slideUp(50)
+  .scale(1.2)
+  .rotate(360);
+```
+
+### Solid.js Directive
+
+```tsx
+import { animate, easings } from '@stellix-agency/motion';
+
+function MyComponent() {
+  return (
+    <h1
+      use:animate={(m) =>
+        m.fadeIn({ ease: easings.smoothOut })
+         .wait(0.5)
+         .rotate(360, { ease: easings.elasticOut })
+      }
+      class="opacity-0 font-bold text-2xl mt-20 text-center"
+    >
+      Hello World
+    </h1>
+  );
+}
+```
+
+> **Note**: You may see a "'animate' is declared but its value is never read" warning. This is expected and can be ignored - the import is required for the directive to work. See [USAGE.md](./USAGE.md) for details.
+
+## Core API
+
+### Motion Class
+
+The `Motion` class provides a fluent API for chaining animations:
+
+#### Fade Animations
+
+```typescript
+motion.fadeIn(options?)          // Fade in
+motion.fadeOut(options?)         // Fade out
+motion.fade('in' | 'out' | 'inOut', options?)  // Fade variant
+```
+
+#### Slide Animations
+
+```typescript
+motion.slideUp(distance?, options?)      // Slide up
+motion.slideDown(distance?, options?)    // Slide down
+motion.slideLeft(distance?, options?)    // Slide left
+motion.slideRight(distance?, options?)   // Slide right
+motion.slide(direction, distance?, options?)  // Slide in any direction
+```
+
+#### Transform Animations
+
+```typescript
+motion.scale(scale, options?)         // Scale element
+motion.rotate(degrees, options?)      // Rotate element
+motion.skew(x, y, options?)          // Skew element
+motion.moveTo(x, y, options?)        // Move to coordinates
+```
+
+#### Effects
+
+```typescript
+motion.blur(amount, options?)        // Blur effect
+```
+
+#### Custom Animations
+
+```typescript
+motion.animate(vars, options?)       // Custom GSAP properties
+```
+
+#### Timeline Control
+
+```typescript
+motion.wait(duration)               // Add delay
+motion.setDuration(duration)        // Set default duration
+motion.setEase(ease)               // Set default easing
+```
+
+#### Playback Control
+
+```typescript
+motion.play()                      // Play animation
+motion.pause()                     // Pause animation
+motion.restart()                   // Restart animation
+motion.reverse()                   // Reverse animation
+motion.kill()                      // Kill and cleanup
+```
+
+#### Scroll Trigger
+
+```typescript
+motion.onScroll(options?)          // Add ScrollTrigger
+```
+
+### Animation Options
+
+```typescript
+interface AnimationOptions {
+  duration?: number;        // Animation duration (default: 0.8s)
+  ease?: string;           // Easing function (default: "power4.out")
+  delay?: number;          // Delay before start
+  // ...all GSAP TweenVars
+}
+```
+
+### Scroll Options
+
+```typescript
+interface ScrollAnimationOptions {
+  start?: string;          // Start position (default: "top 85%")
+  end?: string;           // End position
+  toggleActions?: string; // Actions (default: "play none none reverse")
+  // ...all ScrollTrigger.Vars
+}
+```
+
+## Presets
+
+Pre-configured animation settings for common use cases:
+
+```typescript
+import { presets } from '@stellix-agency/motion';
+
+motion.fadeIn(presets.fast)       // Quick animation (0.3s)
+motion.fadeIn(presets.normal)     // Standard animation (0.8s)
+motion.fadeIn(presets.slow)       // Slow animation (1.5s)
+motion.scale(1.2, presets.bounce) // Bouncy animation
+motion.fadeIn(presets.spring)     // Spring-like animation
+motion.fadeIn(presets.smooth)     // Smooth ease in/out
+motion.fadeIn(presets.elastic)    // Elastic bounce
+```
+
+## Easings
+
+Common easing functions:
+
+```typescript
+import { easings } from '@stellix-agency/motion';
+
+motion.fadeIn({ ease: easings.smoothOut })
+motion.scale(1.2, { ease: easings.backOut })
+motion.rotate(360, { ease: easings.elasticOut })
+```
+
+Available easings: `linear`, `easeIn`, `easeOut`, `easeInOut`, `smoothIn`, `smoothOut`, `smoothInOut`, `bounceOut`, `bounceIn`, `bounceInOut`, `elasticOut`, `elasticIn`, `backOut`, `backIn`, `circOut`, `circIn`, `expoOut`, `expoIn`
+
+## Utility Functions
+
+### Stagger
+
+Animate multiple elements with a stagger delay:
+
+```typescript
+import { stagger } from '@stellix-agency/motion';
+
+stagger('.card', (motion, index) => {
+  motion.fadeIn().slideUp().onScroll();
+}, 0.1); // 0.1s delay between each
+```
+
+### Batch
+
+Apply the same animation to multiple elements:
+
+```typescript
+import { batch } from '@stellix-agency/motion';
+
+batch('.item', (motion) => {
+  motion.fadeIn({ duration: 0.5 });
+});
+```
+
+### Scroll Entrance
+
+Quick scroll-triggered entrance animation:
+
+```typescript
+import { scrollEntrance } from '@stellix-agency/motion';
+
+const element = document.querySelector('.hero');
+scrollEntrance(element, { duration: 1 });
+```
+
+### Hover
+
+Create hover animations:
+
+```typescript
+import { hover } from '@stellix-agency/motion';
+
+const cleanup = hover(
+  element,
+  { scale: 1.1, y: -10 },
+  { duration: 0.3 }
+);
+
+// Call cleanup() when done
+```
+
+### Parallax
+
+Create parallax scroll effects:
+
+```typescript
+import { parallax } from '@stellix-agency/motion';
+
+parallax(element, 0.5); // 0.5 = speed multiplier
+```
+
+### Reveal
+
+Reveal animation from a direction:
+
+```typescript
+import { reveal } from '@stellix-agency/motion';
+
+reveal(element, 'bottom', { duration: 1 });
+// directions: 'left' | 'right' | 'top' | 'bottom'
+```
+
+## Examples
+
+### Hero Section with Scroll Trigger
+
+```typescript
+const hero = new Motion(heroElement);
+hero
+  .fadeIn({ duration: 1.2 })
+  .slideUp(100, { duration: 1 })
+  .scale(1, { ease: 'back.out(1.7)' })
+  .onScroll({ start: 'top center' });
+```
+
+### Staggered Cards
+
+```typescript
+stagger('.card', (motion, index) => {
+  motion
+    .fadeIn()
+    .slideUp(30)
+    .scale(1)
+    .onScroll();
+}, 0.15);
+```
+
+### Complex Sequence
+
+```typescript
+const element = new Motion(box);
+element
+  .fadeIn({ duration: 0.5 })
+  .wait(0.2)
+  .slideUp(50, { duration: 0.8 })
+  .scale(1.2, { duration: 0.5, ease: 'back.out(1.7)' })
+  .rotate(360, { duration: 1 })
+  .wait(0.5)
+  .slideDown(20, { duration: 0.3 });
+```
+
+### Solid.js Component
+
+```tsx
+import { animate } from '@stellix-agency/motion';
+
+function AnimatedCard() {
+  return (
+    <div 
+      class="card"
+      use:animate={(m) => 
+        m.fadeIn()
+         .slideUp(50)
+         .scale(1)
+         .onScroll({ start: 'top 90%' })
+      }
+    >
+      <h2>Card Title</h2>
+      <p>Card content</p>
+    </div>
+  );
+}
+```
+
+### Custom Animation with GSAP Properties
+
+```typescript
+motion.animate({
+  background: 'linear-gradient(45deg, #667eea 0%, #764ba2 100%)',
+  borderRadius: '50%',
+  boxShadow: '0 10px 30px rgba(0,0,0,0.3)'
+}, { duration: 1.5, ease: 'power2.inOut' });
+```
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  AnimationOptions,
+  ScrollAnimationOptions,
+  SlideDirection,
+  FadeVariant,
+  AnimationPreset
+} from '@stellix-agency/motion';
+```
+
+## Browser Support
+
+- Modern browsers with ES6+ support
+- Requires GSAP 3.14.2+
+- ScrollTrigger plugin included
+
+## License
+
+MIT © Stellix Agency
+
+## Credits
+
+Built with ❤️ by [Stellix Agency](https://stellix.agency)  
+Powered by [GSAP](https://gsap.com)

package/dist/index.d.ts

@@ -1,23 +1,125 @@
-interface MotionOptions extends gsap.TweenVars {
-    d?: number;
-    e?: string;
-}
-declare class MotionCore {
-    private tl;
-    private el;
-    private defaults;
-    constructor(el: HTMLElement);
-    private add;
-    in(options?: MotionOptions): this;
-    move(x: number, y: number, options?: MotionOptions): this;
-    scale(s: number, options?: MotionOptions): this;
-    wait(d: number): this;
-    /**
-     * Utilisation du type Vars de ScrollTrigger (le plus moderne)
-     */
-    onScroll(st?: ScrollTrigger.Vars): this;
-}
+import { M as Motion, A as AnimationOptions } from './jsx.js';
+export { a as AnimationPreset, F as FadeVariant, S as ScrollAnimationOptions, b as SlideDirection } from './jsx.js';
 
-declare function animate(el: HTMLElement, accessor: () => (m: MotionCore) => void): void;
+/**
+ * Solid.js directive for declarative animations
+ *
+ * @example
+ * ```tsx
+ * import { animate } from '@stellix-agency/motion';
+ *
+ * // The directive is used via use:animate, not called directly
+ * <div use:animate={(m) => m.fadeIn().slideUp().onScroll()}>
+ *   Content
+ * </div>
+ * ```
+ *
+ * @remarks
+ * This function is used as a Solid.js directive and should be imported
+ * even if your IDE shows it as unused. The import is required for the
+ * directive to work properly.
+ */
+declare function animate(element: HTMLElement, accessor: () => (motion: Motion) => void): void;
 
-export { MotionCore, type MotionOptions, animate };
+/**
+ * Create a stagger animation for multiple elements
+ * @param elements - Array of elements or CSS selector
+ * @param callback - Function that receives Motion instance for each element
+ * @param staggerDelay - Delay between each element animation (default: 0.1s)
+ */
+declare function stagger(elements: HTMLElement[] | NodeListOf<HTMLElement> | string, callback: (motion: Motion, index: number) => void, staggerDelay?: number): Motion[];
+/**
+ * Batch multiple elements with the same animation
+ * @param elements - Array of elements or CSS selector
+ * @param callback - Function that receives Motion instance
+ */
+declare function batch(elements: HTMLElement[] | NodeListOf<HTMLElement> | string, callback: (motion: Motion) => void): Motion[];
+/**
+ * Create a scroll-triggered entrance animation
+ * @param element - Element to animate
+ * @param options - Animation options
+ */
+declare function scrollEntrance(element: HTMLElement, options?: AnimationOptions): Motion;
+/**
+ * Create a hover animation using GSAP
+ * @param element - Element to animate on hover
+ * @param hoverVars - Animation properties on hover
+ * @param options - Animation options
+ */
+declare function hover(element: HTMLElement, hoverVars: gsap.TweenVars, options?: AnimationOptions): () => void;
+/**
+ * Create a parallax scroll effect
+ * @param element - Element to apply parallax
+ * @param speed - Parallax speed multiplier (default: 0.5)
+ */
+declare function parallax(element: HTMLElement, speed?: number): gsap.core.Tween;
+/**
+ * Create a reveal animation (commonly used for text/images)
+ * @param element - Element to reveal
+ * @param direction - Direction from which to reveal
+ * @param options - Animation options
+ */
+declare function reveal(element: HTMLElement, direction?: 'left' | 'right' | 'top' | 'bottom', options?: AnimationOptions): Motion;
+
+/**
+ * Predefined animation presets for common use cases
+ */
+declare const presets: {
+    /**
+     * Quick and snappy animation
+     */
+    fast: AnimationOptions;
+    /**
+     * Standard animation speed
+     */
+    normal: AnimationOptions;
+    /**
+     * Slow and smooth animation
+     */
+    slow: AnimationOptions;
+    /**
+     * Bouncy entrance animation
+     */
+    bounce: AnimationOptions;
+    /**
+     * Spring-like animation
+     */
+    spring: AnimationOptions;
+    /**
+     * Smooth ease in and out
+     */
+    smooth: AnimationOptions;
+    /**
+     * Sharp entrance
+     */
+    sharp: AnimationOptions;
+    /**
+     * Elastic bounce effect
+     */
+    elastic: AnimationOptions;
+};
+/**
+ * Common easing functions
+ */
+declare const easings: {
+    linear: string;
+    easeIn: string;
+    easeOut: string;
+    easeInOut: string;
+    smoothIn: string;
+    smoothOut: string;
+    smoothInOut: string;
+    bounceOut: string;
+    bounceIn: string;
+    bounceInOut: string;
+    elasticOut: string;
+    elasticIn: string;
+    backOut: string;
+    backIn: string;
+    circOut: string;
+    circIn: string;
+    expoOut: string;
+    expoIn: string;
+};
+
+export { AnimationOptions, Motion, Motion as MotionCore, animate, batch, easings, hover, parallax, presets, reveal, scrollEntrance, stagger };

package/dist/index.js

@@ -1 +1 @@
-import{gsap as p}from"gsap";import{ScrollTrigger as m}from"gsap/ScrollTrigger";import{gsap as n}from"gsap";import{ScrollTrigger as l}from"gsap/ScrollTrigger";var o=class{tl;el;defaults={d:.8,e:"power4.out"};constructor(t){this.el=t,n.set(this.el,{opacity:0,y:20}),this.tl=n.timeline({paused:!0}),Promise.resolve().then(()=>{this.tl.scrollTrigger||this.tl.play()})}add(t,e){let{d:r,e:s,...a}=e||{};return this.tl.to(this.el,{...t,duration:r??this.defaults.d,ease:s??this.defaults.e,...a},">"),this}in(t){return this.add({opacity:1,y:0},t)}move(t,e,r){return this.add({x:t,y:e},r)}scale(t,e){return this.add({scale:t,ease:e?.e??"back.out(1.7)"},e)}wait(t){return this.tl.to({},{duration:t},">"),this}onScroll(t){return l.create({trigger:this.el,start:"top 85%",animation:this.tl,toggleActions:"play none none reverse",...t}),this}};function h(i,t){let e=t(),r=new o(i);setTimeout(()=>{e(r)},0)}typeof window<"u"&&p.registerPlugin(m);export{o as MotionCore,h as animate};
+import"./chunk-YEOCNWCQ.js";import{gsap as b}from"gsap";import{ScrollTrigger as M}from"gsap/ScrollTrigger";import{gsap as l}from"gsap";import{ScrollTrigger as p}from"gsap/ScrollTrigger";var r=class{timeline;element;defaultDuration=.8;defaultEase="power4.out";hasScrollTrigger=!1;constructor(t,i=!0){this.element=t,l.set(this.element,{opacity:0,y:20}),this.timeline=l.timeline({paused:!0}),i&&Promise.resolve().then(()=>{this.hasScrollTrigger||this.play()})}addAnimation(t,i){let{duration:n,ease:o,delay:a,...s}=i||{};return this.timeline.to(this.element,{...t,duration:n??this.defaultDuration,ease:o??this.defaultEase,delay:a??0,...s},">"),this}fadeIn(t){return this.addAnimation({opacity:1},t)}fadeOut(t){return this.addAnimation({opacity:0},t)}fade(t="in",i){switch(t){case"in":return this.fadeIn(i);case"out":return this.fadeOut(i);case"inOut":return this.fadeIn(i).fadeOut(i);default:return this.fadeIn(i)}}slide(t,i=50,n){let o={up:{y:0,x:0},down:{y:i,x:0},left:{x:0,y:0},right:{x:i,y:0}};return this.addAnimation(o[t],n)}slideUp(t=50,i){return this.addAnimation({y:0},i)}slideDown(t=50,i){return this.addAnimation({y:t},i)}slideLeft(t=50,i){return this.addAnimation({x:-t},i)}slideRight(t=50,i){return this.addAnimation({x:t},i)}moveTo(t,i,n){return this.addAnimation({x:t,y:i},n)}scale(t,i){return this.addAnimation({scale:t},{ease:"back.out(1.7)",...i})}rotate(t,i){return this.addAnimation({rotation:t},i)}blur(t,i){return this.addAnimation({filter:`blur(${t}px)`},i)}skew(t,i,n){return this.addAnimation({skewX:t,skewY:i},n)}animate(t,i){return this.addAnimation(t,i)}wait(t){return this.timeline.to({},{duration:t},">"),this}setDuration(t){return this.defaultDuration=t,this}setEase(t){return this.defaultEase=t,this}onScroll(t){return this.hasScrollTrigger=!0,p.create({trigger:this.element,start:"top 85%",animation:this.timeline,toggleActions:"play none none reverse",...t}),this}play(){return this.timeline.play(),this}pause(){return this.timeline.pause(),this}restart(){return this.timeline.restart(),this}reverse(){return this.timeline.reverse(),this}getTimeline(){return this.timeline}kill(){this.timeline.kill(),this.hasScrollTrigger&&p.getById(this.timeline.scrollTrigger?.vars.id)?.kill()}};import{onCleanup as c}from"solid-js";function d(e,t){try{let i=t();if(typeof i!="function"){console.warn("[Magic Motion] animate directive expects a function");return}let n=new r(e);setTimeout(()=>{try{i(n)}catch(o){console.error("[Magic Motion] Error setting up animation:",o)}},0),c(()=>{n.kill()})}catch(i){console.error("[Magic Motion] Error initializing animation:",i)}}import{gsap as m}from"gsap";function h(e,t,i=.1){return Array.from(typeof e=="string"?document.querySelectorAll(e):e).map((o,a)=>{let s=new r(o,!1);return a>0&&s.wait(i*a),t(s,a),s.play(),s})}function f(e,t){return Array.from(typeof e=="string"?document.querySelectorAll(e):e).map(n=>{let o=new r(n);return t(o),o})}function g(e,t){return new r(e,!1).fadeIn(t).slideUp(30,t).onScroll()}function A(e,t,i){let{duration:n=.3,ease:o="power2.out",...a}=i||{},s=()=>{m.to(e,{...t,duration:n,ease:o,...a})},u=()=>{m.to(e,{scale:1,x:0,y:0,rotation:0,duration:n,ease:o,...a})};return e.addEventListener("mouseenter",s),e.addEventListener("mouseleave",u),()=>{e.removeEventListener("mouseenter",s),e.removeEventListener("mouseleave",u)}}function O(e,t=.5){return m.to(e,{y:()=>window.innerHeight*t,ease:"none",scrollTrigger:{trigger:e,start:"top bottom",end:"bottom top",scrub:!0}})}function y(e,t="bottom",i){let n=new r(e,!1);return{left:()=>n.slideRight(100,i),right:()=>n.slideLeft(100,i),top:()=>n.slideDown(100,i),bottom:()=>n.slideUp(100,i)}[t]().fadeIn(i)}var w={fast:{duration:.3,ease:"power2.out"},normal:{duration:.8,ease:"power4.out"},slow:{duration:1.5,ease:"power4.out"},bounce:{duration:.8,ease:"elastic.out(1, 0.5)"},spring:{duration:.6,ease:"back.out(1.7)"},smooth:{duration:1,ease:"power2.inOut"},sharp:{duration:.4,ease:"power4.in"},elastic:{duration:1,ease:"elastic.out(1, 0.3)"}},v={linear:"none",easeIn:"power2.in",easeOut:"power2.out",easeInOut:"power2.inOut",smoothIn:"power4.in",smoothOut:"power4.out",smoothInOut:"power4.inOut",bounceOut:"bounce.out",bounceIn:"bounce.in",bounceInOut:"bounce.inOut",elasticOut:"elastic.out(1, 0.3)",elasticIn:"elastic.in(1, 0.3)",backOut:"back.out(1.7)",backIn:"back.in(1.7)",circOut:"circ.out",circIn:"circ.in",expoOut:"expo.out",expoIn:"expo.in"};typeof window<"u"&&b.registerPlugin(M);export{r as Motion,r as MotionCore,d as animate,f as batch,v as easings,A as hover,O as parallax,w as presets,y as reveal,g as scrollEntrance,h as stagger};

package/dist/jsx.d.ts

@@ -0,0 +1,221 @@
+/**
+ * Base animation options that extend GSAP's TweenVars
+ */
+interface AnimationOptions extends Omit<gsap.TweenVars, 'duration' | 'ease'> {
+    /**
+     * Animation duration in seconds
+     * @default 0.8
+     */
+    duration?: number;
+    /**
+     * Easing function for the animation
+     * @default "power4.out"
+     */
+    ease?: string | gsap.EaseFunction;
+    /**
+     * Delay before animation starts in seconds
+     * @default 0
+     */
+    delay?: number;
+}
+/**
+ * Options for scroll-triggered animations
+ */
+interface ScrollAnimationOptions extends ScrollTrigger.Vars {
+    /**
+     * When the animation should start relative to the viewport
+     * @default "top 85%"
+     */
+    start?: string;
+    /**
+     * When the animation should end relative to the viewport
+     */
+    end?: string;
+    /**
+     * Actions to perform: onEnter, onLeave, onEnterBack, onLeaveBack
+     * @default "play none none reverse"
+     */
+    toggleActions?: string;
+}
+/**
+ * Direction for slide animations
+ */
+type SlideDirection = 'up' | 'down' | 'left' | 'right';
+/**
+ * Fade animation variants
+ */
+type FadeVariant = 'in' | 'out' | 'inOut';
+/**
+ * Preset animation configurations
+ */
+interface AnimationPreset {
+    duration: number;
+    ease: string;
+    [key: string]: any;
+}
+
+/**
+ * Core animation class providing a fluent API for GSAP animations
+ *
+ * @example
+ * ```ts
+ * const motion = new Motion(element);
+ * motion.fadeIn().slideUp(50).scale(1.2).onScroll();
+ * ```
+ */
+declare class Motion {
+    private timeline;
+    private element;
+    private defaultDuration;
+    private defaultEase;
+    private hasScrollTrigger;
+    /**
+     * Creates a new Motion instance
+     * @param element - The HTML element to animate
+     * @param autoStart - Whether to automatically start the animation (default: true)
+     */
+    constructor(element: HTMLElement, autoStart?: boolean);
+    /**
+     * Internal method to add animations to the timeline
+     */
+    private addAnimation;
+    /**
+     * Fade in animation
+     * @param options - Animation options
+     */
+    fadeIn(options?: AnimationOptions): this;
+    /**
+     * Fade out animation
+     * @param options - Animation options
+     */
+    fadeOut(options?: AnimationOptions): this;
+    /**
+     * Fade animation with variant
+     * @param variant - Fade variant ('in', 'out', or 'inOut')
+     * @param options - Animation options
+     */
+    fade(variant?: FadeVariant, options?: AnimationOptions): this;
+    /**
+     * Slide animation in a specific direction
+     * @param direction - Direction to slide ('up', 'down', 'left', 'right')
+     * @param distance - Distance to slide in pixels (default: 50)
+     * @param options - Animation options
+     */
+    slide(direction: SlideDirection, distance?: number, options?: AnimationOptions): this;
+    /**
+     * Slide up animation (commonly used for entrance)
+     * @param distance - Distance to slide in pixels
+     * @param options - Animation options
+     */
+    slideUp(distance?: number, options?: AnimationOptions): this;
+    /**
+     * Slide down animation
+     * @param distance - Distance to slide in pixels
+     * @param options - Animation options
+     */
+    slideDown(distance?: number, options?: AnimationOptions): this;
+    /**
+     * Slide left animation
+     * @param distance - Distance to slide in pixels
+     * @param options - Animation options
+     */
+    slideLeft(distance?: number, options?: AnimationOptions): this;
+    /**
+     * Slide right animation
+     * @param distance - Distance to slide in pixels
+     * @param options - Animation options
+     */
+    slideRight(distance?: number, options?: AnimationOptions): this;
+    /**
+     * Move to specific coordinates
+     * @param x - X coordinate in pixels
+     * @param y - Y coordinate in pixels
+     * @param options - Animation options
+     */
+    moveTo(x: number, y: number, options?: AnimationOptions): this;
+    /**
+     * Scale animation
+     * @param scale - Scale factor (1 = original size)
+     * @param options - Animation options (default ease: "back.out(1.7)")
+     */
+    scale(scale: number, options?: AnimationOptions): this;
+    /**
+     * Rotate animation
+     * @param degrees - Rotation in degrees
+     * @param options - Animation options
+     */
+    rotate(degrees: number, options?: AnimationOptions): this;
+    /**
+     * Blur animation (requires CSS filters support)
+     * @param amount - Blur amount in pixels
+     * @param options - Animation options
+     */
+    blur(amount: number, options?: AnimationOptions): this;
+    /**
+     * Skew animation
+     * @param x - Skew X in degrees
+     * @param y - Skew Y in degrees
+     * @param options - Animation options
+     */
+    skew(x: number, y: number, options?: AnimationOptions): this;
+    /**
+     * Custom animation with any GSAP-supported properties
+     * @param vars - GSAP animation variables
+     * @param options - Animation options
+     */
+    animate(vars: gsap.TweenVars, options?: AnimationOptions): this;
+    /**
+     * Add a delay/pause in the animation sequence
+     * @param duration - Wait duration in seconds
+     */
+    wait(duration: number): this;
+    /**
+     * Set the default duration for subsequent animations
+     * @param duration - Duration in seconds
+     */
+    setDuration(duration: number): this;
+    /**
+     * Set the default easing for subsequent animations
+     * @param ease - Easing function or string
+     */
+    setEase(ease: string | gsap.EaseFunction): this;
+    /**
+     * Add ScrollTrigger to the animation
+     * @param options - ScrollTrigger options
+     */
+    onScroll(options?: ScrollAnimationOptions): this;
+    /**
+     * Play the animation timeline
+     */
+    play(): this;
+    /**
+     * Pause the animation timeline
+     */
+    pause(): this;
+    /**
+     * Restart the animation timeline
+     */
+    restart(): this;
+    /**
+     * Reverse the animation timeline
+     */
+    reverse(): this;
+    /**
+     * Get the underlying GSAP timeline
+     */
+    getTimeline(): gsap.core.Timeline;
+    /**
+     * Kill the animation and clean up
+     */
+    kill(): void;
+}
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface Directives {
+      animate: (motion: Motion) => void;
+    }
+  }
+}
+
+export { type AnimationOptions as A, type FadeVariant as F, Motion as M, type ScrollAnimationOptions as S, type AnimationPreset as a, type SlideDirection as b };

package/dist/jsx.js

@@ -0,0 +1 @@
+import"./chunk-YEOCNWCQ.js";

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@stellix-agency/motion",
-  "publishConfig": { "access": "public" },
-  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.0.2",
   "description": "An intuitive GSAP wrapper for creating stunning animations with ease.",
   "author": "Stellix Agency",
   "license": "MIT",
@@ -15,10 +17,32 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./jsx": {
+      "types": "./dist/jsx.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts"
+      ],
+      "jsx": [
+        "./dist/jsx.d.ts"
+      ]
+    }
+  },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean",
-    "dev": "tsup src/index.ts --format esm --watch --dts"
+    "build": "tsup",
+    "dev": "tsup --watch"
   },
   "peerDependencies": {
     "gsap": "^3.14.2",
@@ -30,4 +54,4 @@
     "gsap": "^3.14.2",
     "solid-js": "^1.9.11"
   }
-}
+}