{"_id":"@ar-dacity/ardacity-pixel-transition","_rev":"2-1f799223ebd3dcacc3712d4e288a543a","name":"@ar-dacity/ardacity-pixel-transition","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ar-dacity/ardacity-pixel-transition","version":"1.0.0","keywords":["react","ui","components","animation","pixel","transition","gsap"],"author":{"name":"ArDacity"},"license":"MIT","_id":"@ar-dacity/ardacity-pixel-transition@1.0.0","maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"dist":{"shasum":"f8f8f24422c2a8b48b627e3aeea53bb63f70bc7a","tarball":"https://registry.npmjs.org/@ar-dacity/ardacity-pixel-transition/-/ardacity-pixel-transition-1.0.0.tgz","fileCount":7,"integrity":"sha512-XLOhHVq7Y7D9DJuTyeXweAScPqBuwhqEQ+lccYQTiFynFEiGL8jDgTaYKo+pkepw6ey2o8sSPi66OmADbjhREg==","signatures":[{"sig":"MEUCIB8rLLr7ZGoW0az83sL40DoohDSXq8atHHRpyQhr/aGAAiEAlxfLfPaRi1AxAjLygDKM3FkpfTIgyGT8QFpUKwtZwtc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12140},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"941eefed13b8107ea83f3b7ddd9b14cb1b6bb2a9","scripts":{"build":"tsc","postinstall":"node ./scripts/install.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"ruffledzest","email":"vibhanshalok@gmail.com"},"_npmVersion":"10.8.1","description":"Pixelated transition effects for interactive content in React applications","directories":{},"_nodeVersion":"20.12.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.3","@types/node":"^20.10.5","@types/react":"^18.2.45"},"peerDependencies":{"gsap":">=3.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/ardacity-pixel-transition_1.0.0_1745445960511_0.5019874402798734","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ar-dacity/ardacity-pixel-transition","version":"1.0.1","description":"Pixelated transition effects for interactive content in React applications","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prepublishOnly":"npm run build","postinstall":"node ./scripts/install.js"},"keywords":["react","ui","components","animation","pixel","transition","gsap"],"author":{"name":"ArDacity"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","gsap":">=3.0.0"},"devDependencies":{"@types/node":"^20.10.5","@types/react":"^18.2.45","typescript":"^5.3.3"},"_id":"@ar-dacity/ardacity-pixel-transition@1.0.1","gitHead":"ead02eb4d9b0977ef4e8a6a7a0f8a4d99a9d33c4","_nodeVersion":"20.12.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-VAaEoiYtWocqSiWyaUUf9kr+Mc2GC4zM+Df23of/7CsQ7Z2BZLy0ATTJS7W5Iqp3wyA0WJM0IOedrtHda7Mkhw==","shasum":"a64401511b71391d2d1b871272657012bb79ca9c","tarball":"https://registry.npmjs.org/@ar-dacity/ardacity-pixel-transition/-/ardacity-pixel-transition-1.0.1.tgz","fileCount":7,"unpackedSize":12143,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC6AHDuZdV3Znx3LgiqdpvNDRg0HYI6AJREH75GHx16tAiAvZ6wkDExjtWpQ5C2jG+hC9aGE4CVxU5f/1cGjwPLOHw=="}]},"_npmUser":{"name":"ruffledzest","email":"vibhanshalok@gmail.com"},"directories":{},"maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ardacity-pixel-transition_1.0.1_1746549521751_0.41891519185348236"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-23T22:06:00.441Z","modified":"2025-05-06T16:38:42.135Z","1.0.0":"2025-04-23T22:06:00.709Z","1.0.1":"2025-05-06T16:38:41.944Z"},"author":{"name":"ArDacity"},"license":"MIT","keywords":["react","ui","components","animation","pixel","transition","gsap"],"description":"Pixelated transition effects for interactive content in React applications","maintainers":[{"name":"ruffledzest","email":"vibhanshalok@gmail.com"}],"readme":"# ArDacity Pixel Transition\r\n\r\nA React component that provides pixelated transition effects for toggling between content on hover or click.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @ar-dacity/ardacity-pixel-transition\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @ar-dacity/ardacity-pixel-transition\r\n```\r\n\r\nThis package requires GSAP as a peer dependency. If you haven't already installed it, run:\r\n\r\n```bash\r\nnpm install gsap\r\n```\r\n\r\n## What Happens During Installation\r\n\r\nWhen you install this package, it automatically:\r\n\r\n1. Creates a `components/ArDacityUi` directory in your project (if it doesn't exist)\r\n2. Creates a `PixelTransition` subdirectory\r\n3. Copies the PixelTransition component files into that directory:\r\n   - `PixelTransition.jsx`\r\n   - `index.js`\r\n\r\n## Usage\r\n\r\nAfter installation, you can import the component directly from your components directory:\r\n\r\n```jsx\r\nimport PixelTransition from './components/ArDacityUi/PixelTransition/PixelTransition';\r\n// Or simply:\r\nimport { PixelTransition } from './components/ArDacityUi/PixelTransition';\r\n\r\nfunction App() {\r\n  return (\r\n    <PixelTransition\r\n      firstContent={\r\n        <img\r\n          src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg\"\r\n          alt=\"default pixel transition content, a cat!\"\r\n          style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\r\n        />\r\n      }\r\n      secondContent={\r\n        <div\r\n          style={{\r\n            width: \"100%\",\r\n            height: \"100%\",\r\n            display: \"grid\",\r\n            placeItems: \"center\",\r\n            backgroundColor: \"#111\"\r\n          }}\r\n        >\r\n          <p style={{ fontWeight: 900, fontSize: \"3rem\", color: \"#ffffff\" }}>Meow!</p>\r\n        </div>\r\n      }\r\n      gridSize={12}\r\n      pixelColor='#ffffff'\r\n      animationStepDuration={0.4}\r\n      className=\"custom-pixel-card\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Component Props\r\n\r\n| Property | Type | Default | Description |\r\n|----------|------|---------|-------------|\r\n| firstContent | ReactNode \\| string | — | Content to show by default (e.g., an `<img>` or text). |\r\n| secondContent | ReactNode \\| string | — | Content revealed upon hover or click. |\r\n| gridSize | number | 7 | Number of rows/columns in the pixel grid. |\r\n| pixelColor | string | currentColor | Background color used for each pixel block. |\r\n| animationStepDuration | number | 0.3 | Length of the pixel reveal/hide in seconds. |\r\n| aspectRatio | string | \"100%\" | Sets the 'padding-top' (or aspect-ratio) for the container. |\r\n| className | string | — | Optional additional class names for styling. |\r\n| style | object | {} | Optional inline styles for the container. |\r\n\r\n## Customization\r\n\r\nYou can customize the transition effects using the props:\r\n\r\n- **Grid Size**: Adjust the number of pixels with `gridSize={8}` (higher values = more, smaller pixels).\r\n- **Pixel Color**: Change the pixel color with `pixelColor=\"#ffffff\"`.\r\n- **Animation Duration**: Control the animation speed with `animationStepDuration={0.4}` (in seconds).\r\n- **Aspect Ratio**: Set the container's aspect ratio with `aspectRatio=\"56.25%\"` (for 16:9).\r\n\r\n## Interaction Behavior\r\n\r\n- On desktop devices: The transition is triggered on hover (mouse enter/leave).\r\n- On touch devices: The transition is triggered on tap/click.\r\n\r\n## License\r\n\r\nMIT ","readmeFilename":"README.md"}