@stellix-agency/motion 1.0.1 → 1.0.2

package/README.md

@@ -9,7 +9,8 @@ An intuitive and powerful GSAP wrapper for creating stunning animations with eas
 📜 **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
+⚡ **Lightweight** - Minimal wrapper over GSAP's powerful engine  
+🔥 **Auto Types** - No manual type declarations needed (v1.0.1+)
 
 ## Installation
 
@@ -17,6 +18,8 @@ An intuitive and powerful GSAP wrapper for creating stunning animations with eas
 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
@@ -37,17 +40,26 @@ motion
 ### Solid.js Directive
 
 ```tsx
-import { animate } from '@stellix-agency/motion';
+import { animate, easings } from '@stellix-agency/motion';
 
 function MyComponent() {
   return (
-    <div use:animate={(m) => m.fadeIn().slideUp().onScroll()}>
-      Animated content
-    </div>
+    <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

package/dist/index.d.ts

@@ -1,233 +1,25 @@
-/**
- * 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;
-}
+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';
 
 /**
  * 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;
-declare module 'solid-js' {
-    namespace JSX {
-        interface Directives {
-            animate: (motion: Motion) => void;
-        }
-    }
-}
 
 /**
  * Create a stagger animation for multiple elements
@@ -330,4 +122,4 @@ declare const easings: {
     expoIn: string;
 };
 
-export { type AnimationOptions, type AnimationPreset, type FadeVariant, Motion, Motion as MotionCore, type ScrollAnimationOptions, type SlideDirection, animate, batch, easings, hover, parallax, presets, reveal, scrollEntrance, stagger };
+export { AnimationOptions, Motion, Motion as MotionCore, animate, batch, easings, hover, parallax, presets, reveal, scrollEntrance, stagger };

package/dist/index.js

@@ -1 +1 @@
-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 v={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)"}},w={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,w as easings,A as hover,O as parallax,v as presets,y as reveal,g as scrollEntrance,h as stagger};
+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

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "An intuitive GSAP wrapper for creating stunning animations with ease.",
   "author": "Stellix Agency",
   "license": "MIT",
@@ -17,12 +17,32 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "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",