{"_id":"@aufe/card-animation-react","name":"@aufe/card-animation-react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aufe/card-animation-react","private":false,"version":"0.1.0","description":"A React library for creating beautiful holographic card animations inspired by Pokémon trading cards","author":{"name":"fito-cheol"},"license":"MIT","keywords":["react","animation","holographic","card","pokemon","3d-effect","interactive","component-library"],"repository":{"type":"git","url":"git+https://github.com/fito-cheol/Card-Animation-React.git"},"publishConfig":{"access":"public"},"homepage":"https://github.com/fito-cheol/Card-Animation-React#readme","bugs":{"url":"https://github.com/fito-cheol/Card-Animation-React/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styles":"./dist/index.css"},"sideEffects":["*.css","*.scss"],"scripts":{"start":"npm run dev","dev":"vite","build":"npm run build:lib && npm run build:types","build:lib":"vite build --config vite.config.lib.ts","build:types":"tsc --project tsconfig.lib.json","build:app":"tsc && vite build","preview":"vite preview","prepublishOnly":"npm run build","lint":"eslint './src/**/*.{ts,tsx,js,jsx}' './lib/**/*.{ts,tsx,js,jsx}'","lint:fix":"eslint --fix './src/**/*.{ts,tsx,js,jsx}' './lib/**/*.{ts,tsx,js,jsx}'","format":"prettier --write --cache .","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"react-scripts test","test:coverage":"npm run test -- --coverage --watchAll=false"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"tiny-spring":"^1.0.0"},"devDependencies":{"@chromatic-com/storybook":"1","@emotion/react":"^11.11.3","@emotion/styled":"^11.11.0","@mui/icons-material":"^5.15.6","@mui/material":"^5.15.6","@mui/styled-engine-sc":"^6.0.0-alpha.14","@mui/x-date-pickers":"^6.19.7","@reduxjs/toolkit":"^2.1.0","@storybook/addon-essentials":"^8.0.10","@storybook/addon-interactions":"^8.0.10","@storybook/addon-links":"^8.0.10","@storybook/addon-mdx-gfm":"^8.0.10","@storybook/addon-onboarding":"^8.0.10","@storybook/addon-viewport":"^8.0.10","@storybook/blocks":"^8.0.10","@storybook/react":"^8.0.10","@storybook/react-vite":"^8.0.10","@storybook/test":"^8.0.10","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.1","@testing-library/user-event":"^14.5.2","@types/jest":"^29.5.12","@types/js-cookie":"^3.0.6","@types/lodash":"^4.14.202","@types/node":"^20.11.6","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","@typescript-eslint/eslint-plugin":"^6.19.1","@typescript-eslint/parser":"^6.19.1","@vitejs/plugin-react-swc":"^3.5.0","axios":"^1.6.6","dayjs":"^1.11.10","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-prettier":"^5.1.3","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","eslint-plugin-storybook":"^0.8.0","jest":"^29.7.0","js-cookie":"^3.0.5","lodash":"^4.17.21","prettier":"^3.2.4","prettier-eslint":"^16.3.0","react":"^18.2.0","react-dom":"^18.2.0","react-hook-form":"^7.51.1","react-redux":"^9.1.0","react-router-dom":"^6.21.3","react-toastify":"^10.0.4","react-zoom-pan-pinch":"^3.4.2","redux":"^5.0.1","sass":"^1.77.1","storybook":"^8.0.10","styled-components":"^6.1.8","styled-normalize":"^8.1.0","styled-reset":"^4.5.2","ts-deepmerge":"^7.0.0","typescript":"^5.2.2","vite":"^5.0.8","vite-tsconfig-paths":"^4.3.1"},"_id":"@aufe/card-animation-react@0.1.0","gitHead":"2a3a4e8ffaae007663a014bdedc985e554c2f101","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-f4PnJ8J7Ylq8mnXu1XpgBNRMO8fcgIVIoGnFsTbFQfGwg213BV2GdGc/LR0blReCaOsBZ+Kg0K+uqHrxda5vfA==","shasum":"96ea9211df4df7bd8514b99376cd05447c786083","tarball":"https://registry.npmjs.org/@aufe/card-animation-react/-/card-animation-react-0.1.0.tgz","fileCount":42,"unpackedSize":1747331,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICOm3l4TFYRkkx12976YZVQkn/gkMMdB2aI3c72RByErAiAkVjBO5vAvxOyWyjIQlTmC4Jd6ONih7EygiWiO8ImDnQ=="}]},"_npmUser":{"name":"dmsghs","email":"dmsghs92@gmail.com"},"directories":{},"maintainers":[{"name":"dmsghs","email":"dmsghs92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/card-animation-react_0.1.0_1760080041283_0.27582445866431615"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-10T07:07:21.214Z","0.1.0":"2025-10-10T07:07:21.616Z","modified":"2025-10-10T07:07:21.889Z"},"maintainers":[{"name":"dmsghs","email":"dmsghs92@gmail.com"}],"description":"A React library for creating beautiful holographic card animations inspired by Pokémon trading cards","homepage":"https://github.com/fito-cheol/Card-Animation-React#readme","keywords":["react","animation","holographic","card","pokemon","3d-effect","interactive","component-library"],"repository":{"type":"git","url":"git+https://github.com/fito-cheol/Card-Animation-React.git"},"author":{"name":"fito-cheol"},"bugs":{"url":"https://github.com/fito-cheol/Card-Animation-React/issues"},"license":"MIT","readme":"# @aufe/card-animation-react\r\n\r\n[](https://www.npmjs.com/package/@aufe/card-animation-react)\r\n[](https://opensource.org/licenses/MIT)\r\n\r\nA React library for creating beautiful holographic card animations inspired by Pokémon trading cards. ✨\r\n\r\nCreate stunning, interactive card effects with mouse-tracking 3D rotations and holographic shine effects.\r\n\r\n## 🎨 Features\r\n\r\n- 🌈 **10+ Holographic Effects** - Various holographic card styles (Rainbow, Cosmos, Shiny, etc.)\r\n- 🎯 **Mouse Tracking** - Smooth 3D rotation following cursor movement\r\n- 🔧 **Customizable** - Control individual effect layers\r\n- 📦 **TypeScript Support** - Full type definitions included\r\n- 🎭 **Zero Dependencies** - Only requires React (peer dependency)\r\n- ⚡ **Lightweight** - Optimized bundle size\r\n- 🎪 **Storybook** - Interactive component documentation\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @aufe/card-animation-react\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @aufe/card-animation-react\r\n```\r\n\r\n## 🚀 Quick Start\r\n\r\n```tsx\r\nimport { RegularHolo } from '@aufe/card-animation-react';\r\nimport '@aufe/card-animation-react/styles';\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n Your Content Here
\r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n## 🎭 Available Components\r\n\r\n### Animation Components\r\n\r\nAll animation components wrap your content and add holographic effects:\r\n\r\n#### `RegularHolo`\r\n\r\nBasic holographic effect with rainbow bars\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n#### `RainbowHolo`\r\n\r\nRainbow gradient holographic effect\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n#### `RainbowAlt`\r\n\r\nAlternative rainbow style with foil effect\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n#### `CosmosHolo`\r\n\r\nCosmic space-themed holographic effect\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n#### `AmazingRare`\r\n\r\nPremium card effect with multiple layers\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n#### `ShinyRare`\r\n\r\nShiny metallic holographic effect\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n#### `RadiantHolo`\r\n\r\nRadiant glow holographic effect\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n#### `Pikachu`\r\n\r\nSpecial Pikachu-style effect\r\n\r\n```tsx\r\n\r\n {/* Your content */}\r\n\r\n```\r\n\r\n### Utility Components\r\n\r\n#### `Rotator`\r\n\r\nAdds 3D rotation with smooth spring animation\r\n\r\n```tsx\r\nimport { Rotator } from '@aufe/card-animation-react';\r\n\r\n{/* Your content */};\r\n```\r\n\r\n#### `Shine`\r\n\r\nAdds a moving shine effect\r\n\r\n```tsx\r\nimport { Shine } from '@aufe/card-animation-react';\r\n\r\n{/* Your content */};\r\n```\r\n\r\n#### `Holo`\r\n\r\nBase holographic effect layer\r\n\r\n```tsx\r\nimport { Holo } from '@aufe/card-animation-react';\r\n\r\n{/* Your content */};\r\n```\r\n\r\n## 🎨 Combining Effects\r\n\r\nYou can combine multiple components for complex effects:\r\n\r\n```tsx\r\nimport { Rotator, Shine, RegularHolo } from '@aufe/card-animation-react';\r\n\r\n\r\n \r\n \r\n \r\n
Amazing Card
\r\n \r\n \r\n \r\n;\r\n```\r\n\r\n## 🔧 Custom Hook\r\n\r\n### `useMouse`\r\n\r\nTrack mouse position and get animation values:\r\n\r\n```tsx\r\nimport { useMouse } from '@aufe/card-animation-react';\r\n\r\nfunction MyComponent() {\r\n const {\r\n rotation, // { x: number, y: number }\r\n position, // { x: number, y: number }\r\n positionPercent, // { x: number, y: number }\r\n styleVar, // CSS variables object\r\n handleMouseMove,\r\n handleMouseLeave,\r\n } = useMouse();\r\n\r\n return (\r\n \r\n {/* Your content */}\r\n
\r\n );\r\n}\r\n```\r\n\r\n## 🎯 TypeScript Support\r\n\r\nFull TypeScript support with comprehensive type definitions:\r\n\r\n```tsx\r\nimport type { RegularHoloProps, RainbowHoloProps, UseMouseReturn, StyleVariables } from '@aufe/card-animation-react';\r\n```\r\n\r\n## 🎪 Storybook\r\n\r\nExplore all components interactively:\r\n\r\n```bash\r\ngit clone https://github.com/fito-cheol/Card-Animation-React.git\r\ncd Card-Animation-React\r\nnpm install\r\nnpm run storybook\r\n```\r\n\r\n## 📚 API Reference\r\n\r\n### Common Props\r\n\r\nMost animation components share these props:\r\n\r\n| Prop | Type | Default | Description |\r\n| --------------- | ---------------- | --------- | --------------------------- |\r\n| `children` | `ReactNode` | required | Content to wrap with effect |\r\n| `styleVarProps` | `StyleVariables` | undefined | Override CSS variables |\r\n\r\n### Effect-Specific Props\r\n\r\nEach component has toggles for individual effect layers. Check TypeScript definitions for details.\r\n\r\n## 🎨 Styling\r\n\r\nImport the CSS file in your app:\r\n\r\n```tsx\r\nimport '@aufe/card-animation-react/styles';\r\n```\r\n\r\nOr import in your CSS:\r\n\r\n```css\r\n@import '@aufe/card-animation-react/styles';\r\n```\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n1. Fork the repository\r\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\r\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\r\n4. Push to the branch (`git push origin feature/AmazingFeature`)\r\n5. Open a Pull Request\r\n\r\n## 📝 License\r\n\r\nMIT © [fito-cheol](https://github.com/fito-cheol)\r\n\r\n## 🙏 Acknowledgments\r\n\r\n- Inspired by Pokémon Trading Card Game holographic effects\r\n- Built with React, TypeScript, and Vite\r\n- Uses [tiny-spring](https://github.com/skeeto/tiny-spring) for smooth animations\r\n\r\n## 📧 Contact\r\n\r\n- GitHub: [@fito-cheol](https://github.com/fito-cheol)\r\n- Issues: [GitHub Issues](https://github.com/fito-cheol/Card-Animation-React/issues)\r\n\r\n---\r\n\r\nMade with ❤️ by fito-cheol\r\n","readmeFilename":"README.md","_rev":"1-57d257f0c406327bb1910775518db099"}