{"_id":"@brunoerceg/animate-in","_rev":"3-5dc8bda52a1b1de4ef4b55fc9c1f5424","name":"@brunoerceg/animate-in","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@brunoerceg/animate-in","version":"1.0.0","_id":"@brunoerceg/animate-in@1.0.0","maintainers":[{"name":"brunoerceg","email":"brunoerceg95@gmail.com"}],"dist":{"shasum":"cd8f9822ffd2d380ee4feb081115d9d239198cf3","tarball":"https://registry.npmjs.org/@brunoerceg/animate-in/-/animate-in-1.0.0.tgz","fileCount":5,"integrity":"sha512-XizXtBo2x9VMxbPSZGVUCaNjYYay5EyNaMEdINyn9h00ZTZVReajKdn1i3FzL1lV86APl3vBeDOnpQ+qKnuq3w==","signatures":[{"sig":"MEUCIQC3BwQSC4YwgqNkd90k4VsATVfl3CHR8MhMHVe01Rkv5AIgMbKETRZ8jejnGgCfQg6lJY/5Y3f3PYMjyCaHli5qLcM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":59777},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","scripts":{"dev":"tsup index.tsx --format cjs,esm --watch --dts","build":"tsup index.tsx --format cjs,esm --dts --minify --clean"},"_npmUser":{"name":"brunoerceg","email":"brunoerceg95@gmail.com"},"_npmVersion":"10.9.3","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"*","tsup":"^8.0.0","react":"18.3.1","react-dom":"18.3.1","typescript":"^5.0.0","@types/react":"18.3.12","framer-motion":"^11.0.0","tailwind-merge":"*","@types/react-dom":"18.3.1"},"peerDependencies":{"react":">=18","framer-motion":">=10"},"_npmOperationalInternal":{"tmp":"tmp/animate-in_1.0.0_1767983904855_0.05883562608897974","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@brunoerceg/animate-in","version":"1.0.1","_id":"@brunoerceg/animate-in@1.0.1","maintainers":[{"name":"brunoerceg","email":"brunoerceg95@gmail.com"}],"dist":{"shasum":"51166c268f835e6bc6e15cb5cc42562303faae87","tarball":"https://registry.npmjs.org/@brunoerceg/animate-in/-/animate-in-1.0.1.tgz","fileCount":6,"integrity":"sha512-xWa9I8KoD6ARbr/5aIHGZ4lvEeuv9QupbHPwRW8y+uhll4Cvt3yVhJUQrWtBTDHkeo38+hw2qVwpLmSWp81Oqw==","signatures":[{"sig":"MEUCIQC8x0kZWocdVZkHHMDOh2RzgOYELtCls5TEiAxO6/iEMgIgRjlJ9vRigxdXrDcWy4wHkIFx7hNMDzxtmYOlBIA5irU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63014},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","scripts":{"dev":"tsup index.tsx --format cjs,esm --watch --dts","build":"tsup index.tsx --format cjs,esm --dts --minify --clean"},"_npmUser":{"name":"brunoerceg","email":"brunoerceg95@gmail.com"},"_npmVersion":"10.9.3","description":"Lagane i snažne React komponente za animaciju ulaska elemenata (reveal animations) pokretane **Framer Motion** bibliotekom.","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"*","tsup":"^8.0.0","react":"18.3.1","react-dom":"18.3.1","typescript":"^5.0.0","@types/react":"18.3.12","framer-motion":"^11.0.0","tailwind-merge":"*","@types/react-dom":"18.3.1"},"peerDependencies":{"react":">=18","framer-motion":">=10"},"_npmOperationalInternal":{"tmp":"tmp/animate-in_1.0.1_1767984303111_0.37899737505906717","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@brunoerceg/animate-in","version":"1.0.2","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","peerDependencies":{"framer-motion":">=10","react":">=18"},"scripts":{"build":"tsup index.tsx --format cjs,esm --dts --minify --clean","dev":"tsup index.tsx --format cjs,esm --watch --dts"},"devDependencies":{"@types/react":"18.3.12","@types/react-dom":"18.3.1","react":"18.3.1","react-dom":"18.3.1","framer-motion":"^11.0.0","typescript":"^5.0.0","tsup":"^8.0.0","clsx":"*","tailwind-merge":"*"},"_id":"@brunoerceg/animate-in@1.0.2","description":"Lagane i snažne React komponente za animaciju ulaska elemenata (reveal animations) pokretane **Framer Motion** bibliotekom.","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-03gVaOv6DuB3+FAWlukBv7NdQSVoIR3nARR2MbqJQTe/RrX7EpBQ87lV5vWIj2Ha+bMupJSWQVG3BtkXH73Jag==","shasum":"645199239e0377ef40d1df10c3ffcb1bc54aa396","tarball":"https://registry.npmjs.org/@brunoerceg/animate-in/-/animate-in-1.0.2.tgz","fileCount":6,"unpackedSize":62818,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFeZ2sgqpuI7Z5/jP65eqP9rkoctlUzuZdnSPXz6aK2+AiEAyWwOWFOAWo3DAfDl3Uk3Bo8LF4XqP8tXcJqVPO/f/8s="}]},"_npmUser":{"name":"brunoerceg","email":"brunoerceg95@gmail.com"},"directories":{},"maintainers":[{"name":"brunoerceg","email":"brunoerceg95@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/animate-in_1.0.2_1767984688889_0.48208605652352765"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-09T18:38:24.798Z","modified":"2026-01-09T18:51:29.570Z","1.0.0":"2026-01-09T18:38:24.982Z","1.0.1":"2026-01-09T18:45:03.270Z","1.0.2":"2026-01-09T18:51:29.047Z"},"description":"Lagane i snažne React komponente za animaciju ulaska elemenata (reveal animations) pokretane **Framer Motion** bibliotekom.","maintainers":[{"name":"brunoerceg","email":"brunoerceg95@gmail.com"}],"readme":"# @brunoerceg/animate-in\r\n\r\nLagane i snažne React komponente za animaciju ulaska elemenata (reveal animations) pokretane **Framer Motion** bibliotekom.\r\n\r\n## 🚀 Instalacija\r\n\r\n```bash\r\nnpm install @brunoerceg/animate-in framer-motion clsx tailwind-merge\r\n\r\n```\r\n\r\n## 🛠️ Postavke (Tailwind CSS)\r\n\r\nOvaj paket koristi Tailwind klase. Provjeri imaš li instaliran Tailwind CSS u svom projektu.\r\n\r\n## 📖 Korištenje\r\n\r\n### 1. Osnovni kontejner (Container)\r\n\r\nGrupira elemente i animira ih jednog za drugim (stagger efekt).\r\n\r\n```tsx\r\nimport { AnimateIn } from \"@brunoerceg/animate-in\";\r\n\r\nexport default function MyComponent() {\r\n  return (\r\n    <AnimateIn.Container stagger=\"medium\">\r\n      <AnimateIn.Item>Prvi element</AnimateIn.Item>\r\n      <AnimateIn.Item>Drugi element</AnimateIn.Item>\r\n    </AnimateIn.Container>\r\n  );\r\n}\r\n```\r\n\r\n### 2. Animacija teksta (Words)\r\n\r\nAutomatski dijeli rečenicu na riječi i animira svaku riječ zasebno.\r\n\r\n```tsx\r\n<AnimateIn.Words from=\"bottom\" stagger=\"fast\">\r\n  Ovaj tekst će se pojaviti riječ po riječ.\r\n</AnimateIn.Words>\r\n```\r\n\r\n### 3. Individualni elementi\r\n\r\nAko želiš animirati element bez kontejnera.\r\n\r\n```tsx\r\n<AnimateIn.Individual from=\"left\" delay={0.5}>\r\n  Dolazim s lijeve strane nakon pola sekunde.\r\n</AnimateIn.Individual>\r\n```\r\n\r\n---\r\n\r\n## ⚙️ Props (Postavke)\r\n\r\n### `AnimateIn.Container` / `AnimateIn.TextContainer`\r\n\r\n### `AnimateIn.Container` / `AnimateIn.TextContainer`\r\n\r\n| Prop      | Tip                                      | Default     | Opis                                                |\r\n| :-------- | :--------------------------------------- | :---------- | :-------------------------------------------------- |\r\n| `stagger` | `'slow' \\| 'medium' \\| 'fast' \\| number` | `'medium'`  | Razmak između animacija djece.                      |\r\n| `delay`   | `number`                                 | `0`         | Početno kašnjenje prije prve animacije.             |\r\n| `amount`  | `'some' \\| 'half' \\| 'full' \\| number`   | `'quarter'` | Postotak vidljivosti elementa potreban za okidanje. |\r\n\r\n### `AnimateIn.Item` / `AnimateIn.Individual`\r\n\r\n| Prop       | Tip                                                | Default    | Opis                                         |\r\n| :--------- | :------------------------------------------------- | :--------- | :------------------------------------------- |\r\n| `from`     | `'top' \\| 'bottom' \\| 'left' \\| 'right' \\| 'none'` | `'bottom'` | Smjer iz kojeg element dolazi.               |\r\n| `duration` | `number`                                           | `0.7`      | Koliko dugo traje sama animacija (sekunde).  |\r\n| `delay`    | `number`                                           | `0`        | Dodatno kašnjenje za taj specifični element. |\r\n\r\n---\r\n\r\n## 📝 Napomena za Next.js (App Router)\r\n\r\nBudući da paket koristi `framer-motion`, komponente su klijentske. Paket već sadrži `\"use client\"` direktivu, tako da ga možete direktno uvesti u svoje stranice.\r\n\r\n```\r\n\r\n```\r\n","readmeFilename":"README.md"}