{"_id":"@crazygl/hero-artwork-lens","_rev":"2-12cbed2e0626b5f3887ae74ba48168f3","name":"@crazygl/hero-artwork-lens","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-artwork-lens","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-artwork-lens@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/artwork-lens","bugs":{"url":"https://github.com/crazygl-com/hero-artwork-lens/issues"},"dist":{"shasum":"7fde7c46d4a9f3e14aee01cb76691f4d00eaaceb","tarball":"https://registry.npmjs.org/@crazygl/hero-artwork-lens/-/hero-artwork-lens-0.1.0.tgz","fileCount":11,"integrity":"sha512-UD+8JaXIuAhH1iijoRaqgg7wBmATnbkdDJtXrfAEPcMJ3UyUeJNrdmBn0ZGmWcBxoiLzOdlK6VKimpoZVkdVqg==","signatures":[{"sig":"MEQCIBbt3/N9D8mJh/W77Y2n5s37E20xetn9vBjVxbZob8a/AiB6785lWewb2N0/XJVBvGb9dlBO9MnL3pPRbCPKKf41Wg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":73330},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./style.css","./metadata.json":"./metadata.json"},"gitHead":"e627d87017b9749dfdd3408102fba34d04a413fe","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-artwork-lens.git","type":"git"},"_npmVersion":"11.12.0","description":"Artwork Lens — a circular glass lens glides over a vibrant artwork (procedural gradient or your own image), magnifying and refracting it with chromatic dispersion, a Fresnel rim, and a soft specular highlight.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@crazygl/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/hero-artwork-lens_0.1.0_1782870488478_0.09816416969804553","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-artwork-lens","version":"0.1.1","description":"Artwork Lens — A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply… A customizable CrazyGL animated hero ","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./metadata.json":"./metadata.json","./style.css":"./style.css"},"dependencies":{"@crazygl/core":"^0.1.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/artwork-lens","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-artwork-lens.git"},"publishConfig":{"access":"public"},"keywords":["glass","lens","refraction","magnify","chromatic","artwork","gradient","shader","pointer","premium","artwork-lens","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-artwork-lens/issues"},"gitHead":"5fd4c24e210109df718647dd9ae795a89802bc48","_id":"@crazygl/hero-artwork-lens@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-EWID/m1BdPojDZzLPl1aQnDeu7zuliUwcdcMnJ89zA6bZ6nriCg6a80JIhd+cEmJXaAJE7V7rLT+I+UezI1TNg==","shasum":"b42546188d76fa7d4d5214911d3e70326a653715","tarball":"https://registry.npmjs.org/@crazygl/hero-artwork-lens/-/hero-artwork-lens-0.1.1.tgz","fileCount":11,"unpackedSize":73837,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCHmyPCYfkBhBi8IfDHGpj2jYrP6YcaoEXziWtzhcVGqgIhAJZtlOYlvRvPabdn6Q5rFBMZQ838MW0gD9wSTOx0p3ry"}]},"_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"directories":{},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hero-artwork-lens_0.1.1_1782922254991_0.014272184706037416"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:48:08.322Z","modified":"2026-07-01T16:10:55.299Z","0.1.0":"2026-07-01T01:48:08.622Z","0.1.1":"2026-07-01T16:10:55.137Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-artwork-lens/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/artwork-lens","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-artwork-lens.git"},"description":"Artwork Lens — A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply… A customizable CrazyGL animated hero ","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-artwork-lens/banner-full.png\" alt=\"Artwork Lens\" width=\"640\">\n</p>\n\n# @crazygl/hero-artwork-lens\n\nA clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it.\n\n## Demo\n[Artwork Lens](https://crazygl.com/hero/artwork-lens)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-artwork-lens\n```\n\n## Usage\n\n```tsx\nimport ArtworkLens from '@crazygl/hero-artwork-lens';\n\nexport default function Hero() {\n  return (\n    <ArtworkLens\n      heading=\"Look closer.\"\n      subheading=\"A glass lens glides across the artwork, magnifying and bending every colour beneath it.\"\n      magnification={1.6}\n      dispersion={0.6}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Content** — `heading`, `subheading` (rasterised into the scene so the lens can magnify them).\n- **Artwork** — `artworkImage` (image OR video, cover-fit); procedural palette `colorA`/`colorB`/`colorC` and `artworkSpeed` when no media is supplied.\n- **Lens** — `lensRadius`, `magnification` (centre zoom), `refraction` (dome curvature / rim bend), `dispersion` (chromatic fringing), `rimBrightness` (Fresnel rim + specular glint).\n- **Backdrop** — `transparent` to keep only the glass over whatever sits behind the hero.\n\n## Best for\n\n- Design studios, galleries, photography and product brands.\n- Editorial and luxury landing pages wanting one tactile, premium optical gesture.\n- Product launches over a colourful field, photo or looping video.\n\n\n\nThis hero is part of [CrazyGL](https://crazygl.com), a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready `SKILL.md` file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.\n","readmeFilename":"README.md","keywords":["glass","lens","refraction","magnify","chromatic","artwork","gradient","shader","pointer","premium","artwork-lens","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"]}