{"_id":"@alikaner/lensjs","_rev":"2-e6f716e64853921fb2aaa0f0d6fe98e7","name":"@alikaner/lensjs","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@alikaner/lensjs","version":"1.0.0","keywords":["image","processing","lens","lensjs"],"author":"","license":"MIT","_id":"@alikaner/lensjs@1.0.0","maintainers":[{"name":"alikaner","email":"alikaner.dev@gmail.com"}],"dist":{"shasum":"072baaabfc68284b5cbc4227159765a436bb90b6","tarball":"https://registry.npmjs.org/@alikaner/lensjs/-/lensjs-1.0.0.tgz","fileCount":16,"integrity":"sha512-3dWMjbOP7h5C3z38SE3XAgFBWRpCmR5kwRQZMCWkMgChEiQHWwDwKGfRfyU+L1LU1Xxu5aQbi6ctnXr9xnYUNA==","signatures":[{"sig":"MEQCIFyYVhL6dqcBwVZr6LvS45yfQcSoL49d15m6NprMJy7YAiAuJRft8/4/W1AYhDuvZ6S4ua1RIPkuiI7sRBKDjWfdzQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":230277},"main":"./dist/index.js","style":"./styles.css","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.mjs","require":"./dist/react.js"},"./styles.css":"./styles.css"},"gitHead":"720abd62a213569658912709250dfc97c385dc58","scripts":{"test":"vitest run","build":"tsup","test:watch":"vitest","prepublishOnly":"npm run build"},"_npmUser":{"name":"alikaner","email":"alikaner.dev@gmail.com"},"_npmVersion":"11.16.0","description":"Image processing library for lens images","directories":{},"_nodeVersion":"24.18.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","react":"^18.3.1","vitest":"^1.6.0","react-dom":"^18.3.1","typescript":"^6.0.0","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/lensjs_1.0.0_1783773973730_0.6551629026515478","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@alikaner/lensjs","version":"1.1.0","description":"Interactive lens effects, canvas pixel filters and cinematic color presets for React & Next.js images","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.js","import":"./dist/index.mjs"},"./react":{"types":"./dist/react.d.ts","require":"./dist/react.js","import":"./dist/react.mjs"},"./styles.css":"./styles.css"},"style":"./styles.css","sideEffects":["**/*.css"],"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/AliKaner/lensjs.git","directory":"packages/lensjs"},"homepage":"https://github.com/AliKaner/lensjs#readme","bugs":{"url":"https://github.com/AliKaner/lensjs/issues"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","prepublishOnly":"npm run build"},"keywords":["react","nextjs","image","image-effects","image-processing","hover-effects","canvas","filters","color-grading","duotone","glitch","lens","magnify","lensjs"],"author":{"name":"Ali Kaner","url":"https://github.com/AliKaner"},"license":"MIT","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"devDependencies":{"@types/react":"^18.3.3","@types/react-dom":"^18.3.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^6.0.0","tsup":"^8.1.0","vitest":"^1.6.0"},"gitHead":"2f22955eccfdb163d6f8852dc7a06b1159f8f7cc","_id":"@alikaner/lensjs@1.1.0","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-ji31cfNsUJqsS825kWFizxSeUoZsW8Owq+HlJEwIqKzV8T2+SGhvN3FVbOl13Hp5A9rVPgbJrbxFFby+3THMiQ==","shasum":"f5603dd909dd9867a8aab5d943b93d01a312d66f","tarball":"https://registry.npmjs.org/@alikaner/lensjs/-/lensjs-1.1.0.tgz","fileCount":18,"unpackedSize":249226,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCX4h7BYe7LMi5lhie7e9TL68Bul5SgEgVTWvrjGvvAeAIhALNfKzTEfPWBRM4XMPvpRSOrrejvThxf0F8uGI9ONT02"}]},"_npmUser":{"name":"alikaner","email":"alikaner.dev@gmail.com"},"directories":{},"maintainers":[{"name":"alikaner","email":"alikaner.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lensjs_1.1.0_1783776810365_0.5469179837714186"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-11T12:46:13.420Z","modified":"2026-07-11T13:33:30.630Z","1.0.0":"2026-07-11T12:46:13.906Z","1.1.0":"2026-07-11T13:33:30.512Z"},"license":"MIT","keywords":["react","nextjs","image","image-effects","image-processing","hover-effects","canvas","filters","color-grading","duotone","glitch","lens","magnify","lensjs"],"description":"Interactive lens effects, canvas pixel filters and cinematic color presets for React & Next.js images","maintainers":[{"name":"alikaner","email":"alikaner.dev@gmail.com"}],"readme":"# 📷 @alikaner/lensjs\n\nA lightweight, high-performance interactive image visual effects wrapper for React and Next.js applications. Apply glassmorphic glare sweeps, shifting neon borders, cursor-following color inverters, double-exposure image reveals, and 12+ animated canvas filter shaders with a simple declarative JSX tag.\n\nNow supports **arbitrary HTML elements** wrapping (e.g. glitching buttons, glowing text, glassmorphic cards) and **dynamic configuration themes**!\n\n---\n\n## ✨ Features\n\n- **Zero-Dependency Core**: Lightweight footprint driven by high-performance CSS transforms and vanilla Canvas pixel shaders.\n- **30 Interactive Hover Effects**: Cursor lenses (magnify, invert, reveal, blur, grayscale), canvas pixel distortions (vortex, glitch, wave, fisheye, melt, halftone…), and cinematic CSS motion (tilt-3d, ken-burns, spotlight, flip-reveal, scanlines…).\n- **18 Movie-Inspired Filter Presets**: Permanent cinematic color grades (Blade Runner, Matrix, Cyberpunk, Twilight, Noir, Sunset, Duotones, and Bloom) that compose seamlessly with hover effects.\n- **Fine-Tuning Props**: Scale any effect with `intensity` (0–2), and control cursor lenses with `lensSize` and `lensShape` (circle/square).\n- **HTML Element Wrapping**: Nest any child node (like buttons, spans, or custom cards) to apply CSS scaling, filters, and dynamic glitch animations on hover.\n- **Global Context Provider**: Control and update default lens sizes, shapes, and intensities dynamically using React context.\n- **Next.js & SSR Compatible**: Safe hydration, zero client-side load flashes, and fully responsive layouts.\n\n---\n\n## 🚀 Installation\n\n```bash\nnpm install @alikaner/lensjs\n```\n\nEnsure you import the core CSS file once in your application entry point (e.g., `main.tsx`, `App.tsx`, or `_app.tsx`):\n\n```tsx\nimport '@alikaner/lensjs/styles.css';\n```\n\n---\n\n## 📖 Quick Start\n\n```tsx\nimport { LensImage } from '@alikaner/lensjs/react';\nimport '@alikaner/lensjs/styles.css';\n\nexport default function Banner() {\n  return (\n    <LensImage\n      src=\"/banner.jpg\"\n      alt=\"Interactive Banner\"\n      effect=\"glare\"\n      filter=\"bladerunner\"\n      intensity={1.2}\n    />\n  );\n}\n```\n\n### Wrapping Custom Elements (e.g. Glitch Buttons)\nYou can wrap arbitrary text or buttons inside the tag to trigger CSS hover effects (like zoom, filters, glows) and custom text glitch keyframes:\n\n```tsx\nimport { LensImage } from '@alikaner/lensjs/react';\n\nexport default function ActionButton() {\n  return (\n    <LensImage effect=\"glitch\">\n      <button className=\"primary-btn\">\n        GLITCH ACTION\n      </button>\n    </LensImage>\n  );\n}\n```\n\n---\n\n## 🛠️ API Reference\n\n### Props Schema\n\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `effect` | `LensEffect` | `undefined` | Interactive hover effect (`'glare'`, `'glass'`, `'neon'`, `'invert'`, `'reveal'`, `'glitch'`, `'vortex'`, `'wave'`, etc.). |\n| `filter` | `LensFilter` | `undefined` | Cinematic permanent color preset (`'bladerunner'`, `'matrix'`, `'cyberpunk'`, `'dreamy'`, etc.). |\n| `revealSrc` | `string` | `undefined` | Image source shown inside the cursor lens boundary when `effect=\"reveal\"`. |\n| `intensity` | `number` | `1` | Visual effect strength scalar (`0.0` to `2.0`). |\n| `lensSize` | `number` | `130` | Diameter (in pixels) of the circular/square lens mask. |\n| `lensShape` | `'circle' \\| 'square'`| `'circle'` | Mask frame boundary shape. |\n| `children` | `ReactNode` | `undefined` | Wrap custom HTML elements instead of rendering an `<img>` tag. |\n| `src`, `alt`, ... | `ImgAttributes` | `undefined` | Standard HTML image properties when rendering images. |\n\n---\n\n## 🎨 Interactive Effects List\n\n### CSS Motion & Framing\n*   `zoom`: Smooth scale magnification on hover.\n*   `glare`: Silky dynamic light sweep reflection.\n*   `glass`: Frosted glass borders, background filters, and soft drop shadow lifts.\n*   `blur-vignette`: Center focus with soft blur and a dark vignette ring.\n*   `neon`: Glowing shifting border spotlights.\n*   `shadow`: Smooth drop shadow lift.\n*   `heart-beat`: Rhythmic, elastic scaling pulse.\n*   `invert-full`: Inverts colors of the entire image on hover.\n*   `tilt-3d`: Perspective card tilt that leans towards the cursor.\n*   `ken-burns`: Slow cinematic pan & zoom while hovered.\n*   `flip-reveal`: 3D card flip revealing `revealSrc` on the back face.\n*   `spotlight`: Cursor-following light beam; the rest fades to black.\n*   `scanlines`: Retro CRT/VHS horizontal line overlay.\n\n### Cursor Lens Masking\n*   `invert`: Cursor-following lens that inverts all colors beneath it.\n*   `reveal`: Double exposure — `revealSrc` shows through the cursor lens.\n*   `magnify`: Classic e-commerce magnifying glass zoom under the cursor.\n*   `blur-lens`: The image blurs on hover while the lens stays sharp (focus ring).\n*   `grayscale-lens`: Black & white image; true colors show through the lens.\n\n### Canvas Pixel Processing (real per-pixel image processing)\n*   `glitch`: High-frequency RGB channel separations and displaced raster slices.\n*   `vortex`: Twisting whirlpool coordinate distortion around the center.\n*   `wave`: Rolling fluid water wave displacement ripples.\n*   `fisheye`: Wide-angle barrel bulge magnifying the center.\n*   `noise`: Live animated analog film grain.\n*   `pixelate`: Growing mosaic blocks.\n*   `denoise`: Gaussian smoothing that softens grain and artifacts.\n*   `resolution-boost`: Unsharp-mask sharpening for crisper perceived detail.\n*   `chromatic-aberration`: Radial RGB channel displacement.\n*   `halftone`: Retro newspaper dot-matrix shading.\n*   `posterize`: Flat color binning.\n*   `melt`: Liquid vertical pixel drip animation.\n\n> **CORS note:** canvas effects must read pixel data. Images from another domain need CORS enabled on the server (LensJS requests them with `crossOrigin=\"anonymous\"` automatically). If pixel access is blocked, the effect silently stays off and the image renders normally.\n\n---\n\n## 🔬 Core API — use the pixel filters anywhere\n\nAll canvas filters are exported as pure, framework-agnostic functions operating on raw RGBA buffers (`PixelData` is structurally compatible with canvas `ImageData`). You can run them in your own canvas pipelines, web workers, or Node:\n\n```ts\nimport { applyVortex, applyHalftone, type PixelData } from '@alikaner/lensjs';\n\nconst ctx = canvas.getContext('2d')!;\nconst src = ctx.getImageData(0, 0, canvas.width, canvas.height);\nconst dst = ctx.createImageData(canvas.width, canvas.height);\n\napplyVortex(src, dst, 2.2);           // swirl angle in radians\n// applyHalftone(src, dst, 8, 1);     // block size, blend strength\nctx.putImageData(dst, 0, 0);\n```\n\nExported functions: `applyVortex`, `applyNoise`, `applyGlitch`, `applyFisheye`, `applyPixelate`, `applyDenoise`, `applySharpen`, `applyWave`, `applyChromatic`, `applyHalftone`, `applyPosterize`, `applyMelt` — plus their tuning constants (`VORTEX_MAX_STRENGTH`, `NOISE_MAX_AMOUNT`, …).\n\n---\n\n## 🌈 Global Settings & Theme Overrides\n\nUse the `LensProvider` context to configure global defaults across your entire application. This allows you to sync lens bounds, sizes, or shapes dynamically with your app's light/dark mode theme:\n\n```tsx\nimport { LensProvider, LensImage } from '@alikaner/lensjs/react';\nimport { useState } from 'react';\n\nfunction App() {\n  const [theme] = useState('dark');\n\n  // Change defaults dynamically based on theme status\n  const globalLensConfig = {\n    lensSize: theme === 'dark' ? 180 : 130,\n    lensShape: theme === 'dark' ? 'square' : 'circle',\n    intensity: 1.2\n  };\n\n  return (\n    <LensProvider value={globalLensConfig}>\n      <div className=\"app-content\">\n        <LensImage src=\"/hero.jpg\" effect=\"invert\" />\n      </div>\n    </LensProvider>\n  );\n}\n```\n\n---\n\n## 📄 License\n\nMIT © [Ali Kaner](https://github.com/AliKaner)\n","readmeFilename":"README.md","homepage":"https://github.com/AliKaner/lensjs#readme","repository":{"type":"git","url":"git+https://github.com/AliKaner/lensjs.git","directory":"packages/lensjs"},"author":{"name":"Ali Kaner","url":"https://github.com/AliKaner"},"bugs":{"url":"https://github.com/AliKaner/lensjs/issues"}}