{"_id":"img-fx","_rev":"10-553d803683a1d6303ba790444c4195c9","name":"img-fx","dist-tags":{"latest":"0.5.1"},"versions":{"0.1.0":{"name":"img-fx","version":"0.1.0","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.1.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"2466312c2eb1ddd7a525d47f2644f85bb8444357","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.1.0.tgz","fileCount":6,"integrity":"sha512-yVp+7AF5ppq/wHxnwqLlHaJBRz+1IWuKkEppGqmM7giJhrKs8rbKsG+2S4uQ+cj59TEbK6HquFfdfpHgtkqb6A==","signatures":[{"sig":"MEQCICBzpPYU9U0tAX4Alzc2/I3D6v/RXvY7mpj8aYiJzjvHAiBan8u1HmPnh/7APeJmMP99QKnUny0QHjE/AQvMrDzfWA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":154443},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"afbe618db4847eceb7c8bf7ac53a55eb40c840c3","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.1.0_1778927459496_0.3939524404804271","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"img-fx","version":"0.2.0","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.2.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"02288ecc92ca5dab006f2e768415b97300b18a4e","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.2.0.tgz","fileCount":6,"integrity":"sha512-XoraTpMaPpACj4Rw4+HxS0mkFzP1zgRTkjGnBk7sQL+yhcakdG8zh9H/5XLuD7FEYrLMuQi/BWnIMowjV236wg==","signatures":[{"sig":"MEUCIQDGM2297OA3dsKRj1CBo9mfZvS5dJuADeWHCXcIJFF7/wIgJ+gI+i98IMSy0JhBkVnCA6pty1jGrQYF6os/hqbEEX8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":153333},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"07fc70d8009083c5e1ee4f224349cc65180a3d22","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.2.0_1779028694514_0.6795084340678927","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"img-fx","version":"0.2.1","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.2.1","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"c9e6497ebd19ab57af0f8012de8f64fff42f685d","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.2.1.tgz","fileCount":6,"integrity":"sha512-Ycq910tZfgs/b3wqzrO+IcptzN16Qge8AIwu57LVAP0kzFm+7cvDVdAWAMr6QmOmpxoc9e4euEZtlsIw4yh0tQ==","signatures":[{"sig":"MEUCICEKxttaJocwY80mZp614mKG0vGucioWH09L9nei+Rm4AiEAqV3UgRRwWdxdyHvau3zo7YooavzEft1v/1tEETr3ylA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":157885},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"44d99c54df69f7daf63a908b5b90bb0683144838","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.2.1_1779100816115_0.42321270875671546","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"img-fx","version":"0.2.2","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.2.2","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"c70bb9d6757422089cc138f649a5e4302089aeb1","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.2.2.tgz","fileCount":6,"integrity":"sha512-1pEAeoZJtqpJMDgCTsOEDur2dGADvbui9nr6LNT/O2n8O6SpDNSeN4yDhAxXf/ZnAzBOhjH4jZvdd3kHNjmurg==","signatures":[{"sig":"MEUCIQDJBS6fQdMPabqrgMYLCdBXl+rQyhD5GuDfUhc5U9eHKgIgK1AO8DpuAZGPd701y8aOg9cgXEa7BsJ27OCjjekcBfA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.2.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":161329},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"4f6bc639d4043851febf4291de6a3f6c6617d187","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.2.2_1779177131870_0.4974696744350291","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"img-fx","version":"0.3.0","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.3.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"f81699920698b11f7900b5e7ca4c46c0c08ab552","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.3.0.tgz","fileCount":6,"integrity":"sha512-5tGhFu73xctVtOn2k7upwj0VC0Vb6tFehzv+VpMOTuOLKi/1dU7UW+5hNP/BjlnWvRGyKakAkVo2Sj6NrhVgWw==","signatures":[{"sig":"MEQCIHk/jqXby7pvqpvgDPNqkIOXWwseFJtVj/hU3pmjsbFAAiABdtstxofpVsuOjK7DUWntABWgKOvnfyvJnO2eerJ96A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":162749},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"04ae5b47c9236de316bae7f7355fc492fd09037d","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"11.11.1","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"25.8.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.3.0_1779798223963_0.004047987713102774","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"img-fx","version":"0.3.1","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.3.1","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"3c43b48e026b1d07a55e3b7a9d8be9390378bd51","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.3.1.tgz","fileCount":6,"integrity":"sha512-7reYL4uVZMFbV2vx26++3A12zIdum9SN4Srjg1+vDb4JqKzCPoFOqHxnqaLmsWwZ/dgxZW1XxNaJ6W7POthvzQ==","signatures":[{"sig":"MEQCIA5B51b3K9bIXSiSXPehvoNxgA773SlxRUIYmYWVSElvAiAYvUTMVYSLNCQPJm36Xjo8Dj+9heaSbuVEW2x2Uft8nQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.3.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":163959},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"0f62d672ef77ce55ac0a775273a3547a1c28b1c0","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.3.1_1779809957287_0.8084884956351428","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"img-fx","version":"0.4.0","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.4.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"5d5464229d71ff1b3f7fbaa1cb209515074f3c88","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.4.0.tgz","fileCount":6,"integrity":"sha512-JNvu38t9J0AS69a0rVHKTy2c6M8dUzzsfCqn29tdnVuMk33A4BK2vnwZJ9rzBM4M0jm0a64M06xHqX3ArYh5+Q==","signatures":[{"sig":"MEUCIBb7DgKSir9o5vQE4BpMh/IwzerSqpl7hvfC00WpeFbuAiEAr5FnYYxbjYHTeTuk1Zi8vuLuxs2+dC3DjzQlZ6bCMEU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.4.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":175244},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"a94aa7601ddeee3531b635a62638a65607161986","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.4.0_1783185378378_0.3079043401702064","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"img-fx","version":"0.4.1","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.4.1","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"f262ee24b8dd50151257faaec592781f305cfff7","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.4.1.tgz","fileCount":6,"integrity":"sha512-dgzBnb9tUmN6hCu9jGtEYBl2a6qm9ydFnpwEZ/7fDEJ7QGYktpoifVWf45oTlkWugl8qJP+BEqXVOaPW6OhiUg==","signatures":[{"sig":"MEYCIQDY0DLZM8fikESYSZplzU61W6e20DFLZQwU5QnWmmJQNwIhAPak1ZUksQlVdPCUdVPY/iWBBvFJH2kiSm/tP26vdAV6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.4.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":175687},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"8f71153d8329b98ab303df3611cf26f7db57cb6a","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.4.1_1783189118654_0.1962550542090029","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"img-fx","version":"0.5.0","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.5.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"dist":{"shasum":"54284ffbd2c12408b016cac6f6a27c79cd255c79","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.5.0.tgz","fileCount":6,"integrity":"sha512-PTgIRlRmkyMlJo5iwSrSFcxQA0zvCUDWtbJe8P8S2JjrzRsPxkZwGL3BIX49Fq79kI42v4BrZW2TfunioI6vug==","signatures":[{"sig":"MEUCIQDmBlEKkT++LJZnwouFpwkdk0yhwbpR3Ac5AFM7E94v8QIgD0PKnuTFlAu9gQXxrQZzEBHQxlz9pREmF2UJOqahQuQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":203988},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"270d424defc609a44844c58e0fa611f46b91f759","scripts":{"dev":"vite","build":"vite build","dev:demo":"vite --config vite.config.demo.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/img-fx.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated WebGL image-generation / loader effect for React cards","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","three":"^0.149.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/three":"^0.149.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","three":">=0.149.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/img-fx_0.5.0_1783410250131_0.9859549375347825","host":"s3://npm-registry-packages-npm-production"}},"0.5.1":{"name":"img-fx","version":"0.5.1","description":"Animated WebGL image-generation / loader effect for React cards","type":"module","main":"dist/index.cjs.js","module":"dist/index.es.js","types":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/Jakubantalik/img-fx.git"},"homepage":"https://image.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"publishConfig":{"access":"public","provenance":true},"scripts":{"dev":"vite","dev:demo":"vite --config vite.config.demo.ts","build":"vite build","build:demo":"vite build --config vite.config.demo.ts","preview:demo":"vite preview --config vite.config.demo.ts","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","three":">=0.149.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@types/three":"^0.149.0","@vitejs/plugin-react":"^4.2.0","react":"^18.2.0","react-dom":"^18.2.0","three":"^0.149.0","typescript":"^5.3.0","vite":"^5.0.0","vite-plugin-dts":"^3.7.0"},"keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"img-fx@0.5.1","gitHead":"9d6015bb31c4ccccd10b2e6641d0660577150347","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-CXIFGoGgK5F80d8I+VXZ96dmfkWqb4EGpecAIVXVXhuUVqCe1571Xhf5oGZ4qmTce0UoTfNMKLQDOgSAbIbH0w==","shasum":"2d23b78a85bc723b05d539bae2b0d45558d66b9e","tarball":"https://registry.npmjs.org/img-fx/-/img-fx-0.5.1.tgz","fileCount":6,"unpackedSize":206723,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/img-fx@0.5.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHhFUJkKKrAHt87WWshJR+i3Oe8+oMsRqTaA/cyz/QO9AiEA6EQ9GDLObhrS3ZWWTl2dKKznAa+ytLBkbX6S9E3opG8="}]},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"directories":{},"maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/img-fx_0.5.1_1788510730435_0.36232603933382146"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-16T10:30:59.311Z","modified":"2026-09-04T08:32:10.975Z","0.1.0":"2026-05-16T10:30:59.644Z","0.2.0":"2026-05-17T14:38:14.665Z","0.2.1":"2026-05-18T10:40:16.279Z","0.2.2":"2026-05-19T07:52:12.024Z","0.3.0":"2026-05-26T12:23:44.100Z","0.3.1":"2026-05-26T15:39:17.452Z","0.4.0":"2026-07-04T17:16:18.553Z","0.4.1":"2026-07-04T18:18:38.808Z","0.5.0":"2026-07-07T07:44:10.315Z","0.5.1":"2026-09-04T08:32:10.588Z"},"bugs":{"url":"https://github.com/Jakubantalik/img-fx/issues"},"author":{"name":"Jakub Antalik"},"license":"MIT","homepage":"https://image.jakubantalik.com","keywords":["react","webgl","image","loader","shader","animation","card","effect","reveal"],"repository":{"type":"git","url":"git+https://github.com/Jakubantalik/img-fx.git"},"description":"Animated WebGL image-generation / loader effect for React cards","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"readme":"# img-fx\n\nAnimated WebGL \"image generation / loader\" effect for React. Wrap any card and it gets a real-time shader-driven loading mosaic that periodically reveals an image from a pool you provide. Ports the canonical `image.html` effect into a small, performant React library.\n\nLive demo: [image.jakubantalik.com](https://image.jakubantalik.com)\n\n## Install\n\n```bash\nnpm install img-fx\n```\n\n`react`, `react-dom`, and `three` are peer dependencies.\n\n### Local development\n\n```bash\nnpm install\nnpm run dev          # local Vite playground\nnpm run build        # produce dist/ (ESM + CJS + .d.ts)\nnpm run build:demo   # produce dist-demo/ (static showcase site)\n```\n\n## Quick start\n\n```tsx\nimport { ImageGeneration } from 'img-fx';\n\nexport function Card() {\n  return (\n    <ImageGeneration\n      preset=\"pixels-organic\"\n      images={['/img/a.jpg', '/img/b.jpg']}\n      autoReveal\n    >\n      <div className=\"card\" style={{ width: 320, height: 320, borderRadius: 20 }} />\n    </ImageGeneration>\n  );\n}\n```\n\nThree presets ship with the library: `pixels-organic` (Chromium Flow),\n`pixels-mechanic` (Nebula), and `sweep-gradient` (a fast top-left → bottom-right\ngradient sweep with per-cell random flicker that reads as \"generating\"; its\nreveal materializes the image cell-by-cell along the traveling band).\n\n## Props\n\n| Prop                | Type                                                                  | Default     | Notes                                                                                            |\n| ------------------- | --------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------ |\n| `preset`            | `'pixels-organic' \\| 'pixels-mechanic' \\| 'sweep-gradient'`           | `'pixels-organic'` | Selects the bundled effect preset. `pixels-organic` = Chromium Flow mosaic, `pixels-mechanic` = Nebula mosaic, `sweep-gradient` = diagonal \"generating\" gradient sweep with per-cell flicker. |\n| `theme`             | `'auto' \\| 'dark' \\| 'light'`                                          | `'auto'`    | `auto` checks `<html data-theme>`, `.dark`/`.light` class, inline `color-scheme`, then `prefers-color-scheme`. Live-updates via MutationObserver. |\n| `strength`          | `number` (0..1)                                                       | `1`         | Final opacity multiplier. Doesn't change shader animation.                                       |\n| `pixelScale`        | `number`                                                              | `1`         | Pixel-cell size multiplier for the mosaic. `0.5` = finer grid, `2` = chunkier. The reveal dissolve stays in lockstep with the shader grid. |\n| `cardBg`            | `string` (any CSS colour)                                             | preset      | Override the host card surface colour. Applied verbatim to the wrapper background (alpha preserved) AND parsed to opaque RGB for the shader's `u_cardBg` so colour-proximity logic stays in sync. Accepts hex, `rgb()`/`rgba()`, `hsl()`, named colours, etc. |\n| `colors`            | `(string \\| null)[]`                                                  | preset      | Per-slot palette override (up to 7 CSS colours, one per shader slot). Slots with a value replace the preset colour; `null`/missing slots keep it. Re-tints the running effect without authoring a preset. |\n| `images`            | `string \\| string[]`                                                  | `[]`        | Reveal pool. Random pick per cycle, never repeats last.                                          |\n| `autoReveal`        | `boolean`                                                             | `false`     | When true, runs the auto-loop scheduler.                                                         |\n| `revealDelayRange`  | `[number, number]` seconds                                            | `[2, 4]`    | Random shader-only gap between reveals.                                                          |\n| `revealHoldMs`      | `number`                                                              | `2000`      | Image visible duration after reveal animation completes.                                         |\n| `revealFadeOutMs`   | `number`                                                              | `300`       | Cross-fade back to shader.                                                                       |\n| `borderRadius`      | `number`                                                              | (auto)      | Override the corner radius (px). Auto-detected from the wrapped child by default.                |\n| `paused`            | `boolean`                                                             | `false`     | Freezes shader and scheduler.                                                                    |\n| `onCycle`           | `(p) => void`                                                         | -           | Fires on each phase change: `idle` / `reveal` / `visible` / `hide`.                              |\n\n## Manual reveal (ref handle)\n\nPass a ref to trigger reveals from a button click or any other user action,\nwithout enabling `autoReveal`:\n\n```tsx\nimport { useRef } from 'react';\nimport { ImageGeneration, type ImageGenerationHandle } from 'img-fx';\n\nexport function Card() {\n  const ref = useRef<ImageGenerationHandle>(null);\n  return (\n    <>\n      <ImageGeneration ref={ref} preset=\"pixels-organic\" images={['/a.jpg', '/b.jpg']}>\n        <div className=\"card\" style={{ width: 320, height: 320, borderRadius: 20 }} />\n      </ImageGeneration>\n      <button onClick={() => ref.current?.triggerReveal()}>\n        Reveal image\n      </button>\n    </>\n  );\n}\n```\n\n`triggerReveal()` runs one full reveal -> hold -> hide pass and is a no-op\nwhile a reveal is already in progress. Works with or without `autoReveal`.\n\nFor a **Reveal / Hide toggle** button (like the playground on the demo\npage), pair `triggerReveal({ hold: 'manual' })` with `triggerHide()` and\nuse `isImageActive()` to drive the button label:\n\n```tsx\nconst onToggle = () => {\n  const h = ref.current;\n  if (!h) return;\n  if (h.isImageActive()) h.triggerHide();\n  else h.triggerReveal({ hold: 'manual' });\n};\n```\n\n## Regenerate\n\n`triggerRegenerate()` re-runs the \"generating\" effect **from the currently\nrevealed image**: the photo breaks into the effect's pixel-cell grid and\nchurns (cells popping in/out with the preset's flicker clock) while the\nshader plays through the gaps — then the next image from the pool dissolves\nin over the churn and stays visible.\n\nBy default the effect is recolored from the outgoing image: its palette is\nsampled from the visible pixels and mapped onto the preset's palette slots by\nluminance rank, so the churn reads as pixelation born from the image rather\nthan the preset's stock colors. The palette is restored automatically once\nthe new image is fully visible.\n\nThe churn always uses a pixel-mosaic preset (`pixels-mechanic` /\n`pixels-organic`): a `sweep-gradient` card temporarily switches to a\nrandomly-picked pixel preset for the churn and restores its authored preset\nonce the new image is fully visible.\n\n```tsx\n<button onClick={() => ref.current?.triggerRegenerate({ durationMs: 3000 })}>\n  Regenerate\n</button>\n```\n\nOptions:\n\n| Option          | Type      | Default | Notes                                                            |\n| --------------- | --------- | ------- | ---------------------------------------------------------------- |\n| `durationMs`    | `number`  | `4000`  | Churn length before the next image auto-reveals (held manually). |\n| `tintFromImage` | `boolean` | `true`  | Recolor the effect from the outgoing image.                      |\n| `autoReveal`    | `boolean` | `true`  | `false` churns indefinitely — end it with `triggerReveal()` or `triggerHide()`. |\n\nNo-op unless an image is currently revealed. Requires same-origin (or\nCORS-enabled) images for the palette sampling; cross-origin images without\nCORS fall back to the preset palette.\n\n## Scale invariance\n\nCell size, vignette range, and edge-fade are computed in CSS pixels (the shader\ngets `u_dpr` so it can convert from physical pixels back to CSS px). That means\na `pixels-organic` cell stays the same physical size whether the card is 200×200\nor 600×600 — the cell *count* scales with the card, not the cell *size*. No\nchunky pixels on big cards.\n\n## Performance\n\n- Single shared `THREE.WebGLRenderer` for the whole page; one WebGL context.\n- 10 fps default cap via rAF accumulator — ideal for the slow-drift presets. Raise it with `setFrameRate(15)` (up to 60) for faster custom presets.\n- `IntersectionObserver` pauses any card that scrolls offscreen.\n- Strength is implemented as `canvas.style.opacity` — no shader recompile, no uniform reupload.\n- Reveal scratch canvases are reused across frames; only re-allocated when grid size changes.\n- Image bitmaps cached by URL across all card instances.\n\n## License\n\nMIT &copy; Jakub Antalik. See [LICENSE](./LICENSE).\n","readmeFilename":"README.md"}