{"_id":"@crazygl/hero-paint-strokes","name":"@crazygl/hero-paint-strokes","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-paint-strokes","version":"0.1.1","description":"Paint Strokes — Thick glossy paint strokes sweep across the hero in slow motion. Each stroke has its own colour and gloss highlight. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","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/paint-strokes","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-paint-strokes.git"},"publishConfig":{"access":"public"},"keywords":["paint","strokes","ribbon","glossy","premium","paint-strokes","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"bugs":{"url":"https://github.com/crazygl-com/hero-paint-strokes/issues"},"gitHead":"1bcbceeca900f3de2720f172d63d3559a90e48e6","_id":"@crazygl/hero-paint-strokes@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-bKi5CW+OOCy2/GW4lJBt0OfszLXf9yGZ1D4Cdcf+TJpt4BXfPH2OuDSEsXY7Un5+0aL/tS0pziO5bA3SV1XxkQ==","shasum":"ddcbb87c1668779c05d3c10a17e4f314885acbf0","tarball":"https://registry.npmjs.org/@crazygl/hero-paint-strokes/-/hero-paint-strokes-0.1.1.tgz","fileCount":9,"unpackedSize":33467,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDIXivwCMYiqJQCHTI+RadbIG3GKgW6CPhjCYcFH9cuPQIhAMPyEoyam4A7GNKMtRSy7+73xvNsknhzBv8escIcdY+q"}]},"_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-paint-strokes_0.1.1_1782922457458_0.5102790138029945"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:14:17.202Z","0.1.1":"2026-07-01T16:14:17.654Z","modified":"2026-07-01T16:14:17.940Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Paint Strokes — Thick glossy paint strokes sweep across the hero in slow motion. Each stroke has its own colour and gloss highlight. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","homepage":"https://crazygl.com/hero/paint-strokes","keywords":["paint","strokes","ribbon","glossy","premium","paint-strokes","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-paint-strokes.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-paint-strokes/issues"},"license":"Apache-2.0","readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-paint-strokes/banner-full.png\" alt=\"Paint Strokes\" width=\"640\">\n</p>\n\n# @crazygl/hero-paint-strokes\n\nThick glossy paint strokes sweep across the hero in slow motion. Each stroke has its own colour and gloss highlight.\n\n## Demo\n[Paint Strokes](https://crazygl.com/hero/paint-strokes)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-paint-strokes\n```\n\n## Usage\n\n```tsx\nimport PaintStrokes from '@crazygl/hero-paint-strokes';\n\nexport default function Hero() {\n  return (\n    <PaintStrokes\n      heading=\"In oil.\"\n      strokeCount={6}\n      gloss={1}\n      speed={0.4}\n    />\n  );\n}\n```\n\n## Customise\n\n- **Canvas** — `canvasColor` (backdrop), `strokeA` / `strokeB` / `strokeC` (the three cycling tints), `strokeCount` (2–10), `thickness`, `speed` (sweep), `gloss` (wet highlight).\n- **Content & Typography** — `contentType` (heading / two-columns / custom) and `headingFontFamily`.\n\n## Best for\n\n- Art galleries, museums, and fashion editorial.\n- Beauty and cosmetics brands.\n- Design-led agency and studio sites wanting a tactile, painterly first frame.\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","_rev":"1-2aaadacfc128ae92e4cc493116604b8b"}