{"_id":"@chathuradilshan/tailwind-motion","_rev":"2-8de6f3dbe2e3a30e52ef7bb511d7a7aa","name":"@chathuradilshan/tailwind-motion","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@chathuradilshan/tailwind-motion","version":"1.0.0","keywords":["tailwind","animation","react","typescript","scroll-animation","hover-animation","css-animation"],"author":{"name":"tailwind-motion"},"license":"MIT","_id":"@chathuradilshan/tailwind-motion@1.0.0","maintainers":[{"name":"chathuradilshan","email":"dchathura509@gmail.com"}],"homepage":"https://github.com/yourusername/tailwind-motion#readme","bugs":{"url":"https://github.com/yourusername/tailwind-motion/issues"},"dist":{"shasum":"9f754961d26e3ea1aa813d331758d7731d165825","tarball":"https://registry.npmjs.org/@chathuradilshan/tailwind-motion/-/tailwind-motion-1.0.0.tgz","fileCount":21,"integrity":"sha512-lWZJ7j9EuPsDSGc4gqwp7aFxhZrOoPrlA+YrWdVRMwq9UnkTGBpa3f8WMgXjFDPjPUV4T+wGayeYYONLZzZXWA==","signatures":[{"sig":"MEUCIC9st16FRmxevQVCooJzDPiLOVPdtdKxI2IZgBLXLsy7AiEAv49dQXN5HUUhywtcIC3IYcwgagQ0dFr0F3kTWBMRo1U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":159178},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"},"./plugin":"./plugin.cjs"},"scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","build":"rollup -c","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"chathuradilshan","email":"dchathura509@gmail.com"},"repository":{"url":"git+https://github.com/yourusername/tailwind-motion.git","type":"git"},"_npmVersion":"11.12.1","description":"A powerful Tailwind CSS animation library with React hooks, scroll-triggered animations, and TypeScript support","directories":{},"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.0","rollup":"^3.0.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-dts":"^5.0.0","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwind-motion_1.0.0_1780758416810_0.011415520734978424","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@chathuradilshan/tailwind-motion","version":"1.0.1","description":"A powerful Tailwind CSS animation library with React hooks, scroll-triggered animations, and TypeScript support","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.js","types":"./dist/index.d.ts"},"./plugin":"./plugin.cjs"},"scripts":{"build":"rollup -c","dev":"rollup -c -w","type-check":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","prepublishOnly":"npm run build"},"keywords":["tailwind","animation","react","typescript","scroll-animation","hover-animation","css-animation"],"author":{"name":"tailwind-motion"},"license":"MIT","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup":"^3.0.0","rollup-plugin-dts":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","tslib":"^2.6.0","typescript":"^5.0.0"},"repository":{"type":"git","url":"git+https://github.com/yourusername/tailwind-motion.git"},"_id":"@chathuradilshan/tailwind-motion@1.0.1","bugs":{"url":"https://github.com/yourusername/tailwind-motion/issues"},"homepage":"https://github.com/yourusername/tailwind-motion#readme","_nodeVersion":"22.17.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-azwcQA2zgHOpOlE063RSM+hMODDQOeRVgtmvevl7zkvwqI9edwjfF6liG1o8Z5+UYEGNwAt9de/8x7EFujwT5A==","shasum":"2684fb264a096009161aae80fd0d0be26d0c8b1f","tarball":"https://registry.npmjs.org/@chathuradilshan/tailwind-motion/-/tailwind-motion-1.0.1.tgz","fileCount":21,"unpackedSize":159178,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCID9P8FtVCEyiMGvHMOjNFYRBWIokADwC5xR03XLY2hGqAiBHqppRoTtxGL6mUuQJQwxt5rlg8yjEpj1+gjvTGY/i2g=="}]},"_npmUser":{"name":"chathuradilshan","email":"dchathura509@gmail.com"},"directories":{},"maintainers":[{"name":"chathuradilshan","email":"dchathura509@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwind-motion_1.0.1_1780759555006_0.3701721892400187"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-06T15:06:56.671Z","modified":"2026-06-06T15:25:55.233Z","1.0.0":"2026-06-06T15:06:56.950Z","1.0.1":"2026-06-06T15:25:55.123Z"},"bugs":{"url":"https://github.com/yourusername/tailwind-motion/issues"},"author":{"name":"tailwind-motion"},"license":"MIT","homepage":"https://github.com/yourusername/tailwind-motion#readme","keywords":["tailwind","animation","react","typescript","scroll-animation","hover-animation","css-animation"],"repository":{"type":"git","url":"git+https://github.com/yourusername/tailwind-motion.git"},"description":"A powerful Tailwind CSS animation library with React hooks, scroll-triggered animations, and TypeScript support","maintainers":[{"name":"chathuradilshan","email":"dchathura509@gmail.com"}],"readme":"# tailwind-motion\n\nA powerful Tailwind CSS animation library with React hooks, scroll-triggered animations, hover animations, stagger effects, and full TypeScript support.\n\n---\n\n## Installation\n\n```bash\nnpm install tailwind-motion\n# or\nyarn add tailwind-motion\n# or\npnpm add tailwind-motion\n```\n\n---\n\n## Setup\n\n### 1. Add the Tailwind plugin\n\nIn your `tailwind.config.js`:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./src/**/*.{js,ts,jsx,tsx}'],\n  plugins: [\n    require('tailwind-motion/plugin'),\n  ],\n};\n```\n\nThis registers all keyframes and `animate-*` utility classes.\n\n### 2. Import in your app\n\n```tsx\nimport { Motion, MotionGroup, useScrollAnimation, useHoverAnimation } from 'tailwind-motion';\n```\n\n---\n\n## `<Motion>` Component\n\nThe all-in-one animation component. Works with mount, scroll, hover, and click triggers.\n\n### Mount animation (default)\n\n```tsx\nimport { Motion } from 'tailwind-motion';\n\nexport default function Hero() {\n  return (\n    <Motion preset=\"fade-in-up\" duration=\"normal\" easing=\"spring\">\n      <h1>Welcome</h1>\n    </Motion>\n  );\n}\n```\n\n### Scroll-triggered animation\n\n```tsx\n<Motion\n  trigger=\"scroll\"\n  scroll={{\n    preset: 'fade-in-left',\n    threshold: 0.2,\n    once: true,\n  }}\n>\n  <p>Appears as you scroll</p>\n</Motion>\n```\n\n### Hover animation\n\n```tsx\n<Motion\n  trigger=\"hover\"\n  hover={{\n    preset: 'rubber-band',\n    duration: 'fast',\n  }}\n>\n  <button className=\"px-4 py-2 bg-blue-500 text-white rounded\">Hover me</button>\n</Motion>\n```\n\n### Stagger with delay\n\n```tsx\n<Motion preset=\"fade-in-up\" delay={200} duration=\"slow\" easing=\"spring\">\n  <Card />\n</Motion>\n```\n\n### Looping attention animation\n\n```tsx\n<Motion preset=\"heartbeat\" repeat={-1}>\n  <span>❤️</span>\n</Motion>\n```\n\n### `<Motion>` Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `preset` | `AnimationPreset` | — | Animation name |\n| `trigger` | `'mount' \\| 'scroll' \\| 'hover' \\| 'click'` | `'mount'` | When to trigger |\n| `duration` | `'fastest' \\| 'fast' \\| 'normal' \\| 'slow' \\| 'slowest' \\| number` | `'normal'` | Animation speed |\n| `delay` | `number` | `0` | Delay in ms |\n| `easing` | `AnimationEasing` | `'ease-out'` | CSS easing or named preset |\n| `repeat` | `number` | `1` | Times to repeat (`-1` = infinite) |\n| `reverse` | `boolean` | `false` | Play in reverse |\n| `fillMode` | `'none' \\| 'forwards' \\| 'backwards' \\| 'both'` | `'both'` | CSS fill mode |\n| `scroll` | `ScrollAnimationConfig` | — | Scroll trigger config |\n| `hover` | `HoverAnimationConfig` | — | Hover trigger config |\n| `as` | `keyof JSX.IntrinsicElements` | `'div'` | Rendered HTML tag |\n| `className` | `string` | — | Extra CSS classes |\n\n---\n\n## `<MotionGroup>` Component\n\nStagger-animate a list of children automatically.\n\n```tsx\nimport { MotionGroup } from 'tailwind-motion';\n\nexport default function FeatureList() {\n  return (\n    <MotionGroup\n      preset=\"fade-in-up\"\n      staggerDelay={100}\n      duration=\"normal\"\n      easing=\"spring\"\n      trigger=\"scroll\"\n    >\n      <div className=\"p-4 bg-white rounded shadow\">Feature One</div>\n      <div className=\"p-4 bg-white rounded shadow\">Feature Two</div>\n      <div className=\"p-4 bg-white rounded shadow\">Feature Three</div>\n    </MotionGroup>\n  );\n}\n```\n\n### `<MotionGroup>` Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `preset` | `AnimationPreset` | — | Animation for each child |\n| `staggerDelay` | `number` | `80` | Delay between children (ms) |\n| `direction` | `'normal' \\| 'reverse' \\| 'center' \\| 'edges'` | `'normal'` | Stagger direction |\n| `trigger` | `'mount' \\| 'scroll'` | `'mount'` | When to start |\n| `duration` | `AnimationDuration` | `'normal'` | Child animation speed |\n| `delay` | `number` | `0` | Base delay before stagger starts |\n| `scroll` | `ScrollAnimationConfig` | — | Scroll config when `trigger=\"scroll\"` |\n| `as` | `keyof JSX.IntrinsicElements` | `'div'` | Wrapper tag |\n\n---\n\n## Hooks\n\n### `useScrollAnimation`\n\nFull control over scroll-triggered animations.\n\n```tsx\nimport { useScrollAnimation } from 'tailwind-motion';\n\nexport default function Card() {\n  const { ref, isVisible, style } = useScrollAnimation({\n    preset: 'fade-in-up',\n    duration: 'normal',\n    threshold: 0.2,\n    once: true,\n  });\n\n  return (\n    <div ref={ref} style={style} className=\"p-6 bg-white rounded-xl shadow\">\n      I animate in when scrolled into view\n    </div>\n  );\n}\n```\n\n### `useHoverAnimation`\n\nAnimate on mouse enter / leave.\n\n```tsx\nimport { useHoverAnimation } from 'tailwind-motion';\n\nexport default function HoverCard() {\n  const { ref, style, handlers } = useHoverAnimation({\n    preset: 'scale-in',\n    duration: 'fastest',\n    easing: 'spring',\n    leaveAnimation: 'scale-out',\n  });\n\n  return (\n    <div ref={ref} style={style} {...handlers} className=\"p-4 bg-indigo-500 text-white rounded-lg cursor-pointer\">\n      Hover me!\n    </div>\n  );\n}\n```\n\n### `useAnimation` (manual control)\n\nPlay, pause, and reset an animation programmatically.\n\n```tsx\nimport { useAnimation } from 'tailwind-motion';\n\nexport default function ClickAnimate() {\n  const { style, play, reset, isPlaying } = useAnimation({\n    preset: 'bounce-in',\n    duration: 'normal',\n    easing: 'spring',\n  });\n\n  return (\n    <div>\n      <div style={style} className=\"w-16 h-16 bg-green-400 rounded-full\" />\n      <button onClick={play} disabled={isPlaying}>Play</button>\n      <button onClick={reset}>Reset</button>\n    </div>\n  );\n}\n```\n\n### `useStaggerAnimation`\n\nGenerate staggered styles for N items manually.\n\n```tsx\nimport { useStaggerAnimation } from 'tailwind-motion';\n\nexport default function List({ items }: { items: string[] }) {\n  const stagger = useStaggerAnimation({\n    count: items.length,\n    preset: 'fade-in-up',\n    staggerDelay: 80,\n    direction: 'normal',\n    visible: true,\n  });\n\n  return (\n    <ul>\n      {items.map((item, i) => (\n        <li key={item} style={stagger[i].style}>{item}</li>\n      ))}\n    </ul>\n  );\n}\n```\n\n---\n\n## Preset Builders\n\nImport ready-made config objects for common use cases:\n\n```tsx\nimport {\n  fadeInUp, bounceIn, scrollFadeInUp,\n  hoverScale, hoverRubberBand, pulse,\n} from 'tailwind-motion/animations';\n\n// Use with <Motion>\n<Motion {...fadeInUp({ duration: 'fast' })}>...</Motion>\n<Motion trigger=\"scroll\" scroll={scrollFadeInUp({ threshold: 0.3 })}>...</Motion>\n<Motion trigger=\"hover\" hover={hoverRubberBand()}>...</Motion>\n```\n\n### Available preset builders\n\n| Builder | Category |\n|---------|----------|\n| `fadeIn`, `fadeOut`, `fadeInUp`, `fadeInDown`, `fadeInLeft`, `fadeInRight` | Fade |\n| `slideInUp`, `slideInDown`, `slideInLeft`, `slideInRight` | Slide |\n| `scaleIn`, `scaleOut`, `bounceIn` | Scale |\n| `rotateIn`, `spinOnce` | Rotate |\n| `pulse`, `shake`, `wobble`, `rubberBand`, `heartbeat`, `jello`, `flash` | Attention |\n| `scrollFadeInUp`, `scrollSlideInLeft`, `scrollSlideInRight`, `scrollScaleIn` | Scroll |\n| `hoverScale`, `hoverShake`, `hoverRubberBand`, `hoverWobble`, `hoverHeartbeat` | Hover |\n\n---\n\n## Tailwind Utility Classes\n\nWhen the plugin is registered, you can use classes directly without JavaScript:\n\n```html\n<!-- Fade animations -->\n<div class=\"animate-fade-in\">...</div>\n<div class=\"animate-fade-in-up\">...</div>\n<div class=\"animate-fade-in-left\">...</div>\n\n<!-- Slide animations -->\n<div class=\"animate-slide-in-up\">...</div>\n<div class=\"animate-slide-in-right\">...</div>\n\n<!-- Scale / bounce -->\n<div class=\"animate-scale-in\">...</div>\n<div class=\"animate-bounce-in\">...</div>\n\n<!-- Attention -->\n<div class=\"animate-shake\">...</div>\n<div class=\"animate-wobble\">...</div>\n<div class=\"animate-rubber-band\">...</div>\n<div class=\"animate-heartbeat\">...</div>\n<div class=\"animate-jello\">...</div>\n<div class=\"animate-flash\">...</div>\n\n<!-- Duration modifiers -->\n<div class=\"animate-fade-in animate-duration-fast\">...</div>\n<div class=\"animate-bounce-in animate-duration-slowest\">...</div>\n\n<!-- Easing modifiers -->\n<div class=\"animate-scale-in animate-ease-spring\">...</div>\n<div class=\"animate-fade-in-up animate-ease-bounce\">...</div>\n```\n\n---\n\n## All Animation Presets\n\n| Name | Category |\n|------|----------|\n| `fade-in` | Fade |\n| `fade-out` | Fade |\n| `fade-in-up` | Fade |\n| `fade-in-down` | Fade |\n| `fade-in-left` | Fade |\n| `fade-in-right` | Fade |\n| `slide-in-up` | Slide |\n| `slide-in-down` | Slide |\n| `slide-in-left` | Slide |\n| `slide-in-right` | Slide |\n| `slide-out-up` | Slide |\n| `slide-out-down` | Slide |\n| `scale-in` | Scale |\n| `scale-out` | Scale |\n| `scale-in-center` | Scale |\n| `bounce-in` | Scale |\n| `bounce-out` | Scale |\n| `rotate-in` | Rotate |\n| `rotate-in-cw` | Rotate |\n| `rotate-in-ccw` | Rotate |\n| `spin-once` | Rotate |\n| `pulse` | Attention |\n| `shake` | Attention |\n| `bounce` | Attention |\n| `flash` | Attention |\n| `wobble` | Attention |\n| `rubber-band` | Attention |\n| `jello` | Attention |\n| `heartbeat` | Attention |\n\n---\n\n## Easing Presets\n\n| Name | Value |\n|------|-------|\n| `linear` | `linear` |\n| `ease` | `ease` |\n| `ease-in` | `ease-in` |\n| `ease-out` | `ease-out` |\n| `ease-in-out` | `ease-in-out` |\n| `spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |\n| `bounce` | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` |\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}