{"_id":"@abhijeetsaraf/gradient-background","name":"@abhijeetsaraf/gradient-background","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@abhijeetsaraf/gradient-background","version":"0.1.0","description":"Zero-dependency animated WebGL mesh-gradient background. Framework-agnostic core + optional React wrapper. Colors via props or CSS variables.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js","require":"./dist/react.cjs"},"./global":"./dist/gradient-background.global.js"},"unpkg":"./dist/gradient-background.global.js","jsdelivr":"./dist/gradient-background.global.js","sideEffects":false,"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build"},"keywords":["webgl","gradient","background","mesh-gradient","animation","react","canvas"],"author":{"name":"Abhijeet Saraf"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/abhijeetsaraf/gradient-background.git"},"homepage":"https://github.com/abhijeetsaraf/gradient-background#readme","bugs":{"url":"https://github.com/abhijeetsaraf/gradient-background/issues"},"peerDependencies":{"react":">=17"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"tsup":"^8.0.0","typescript":"^7.0.2"},"gitHead":"02117ad17d1a63b2f7b62b865ed49aacb0542b10","_id":"@abhijeetsaraf/gradient-background@0.1.0","_nodeVersion":"26.1.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-Le9B+7EB9XAbNDMx6Z7/CT0pvTgfnyn9B/0KkPBMxe2p1f4kOuOwY7hTJErWKKcKh6BCgiOPO1nfq+grv+5xnA==","shasum":"983e485885ccd167da79e739790fc571435fdd97","tarball":"https://registry.npmjs.org/@abhijeetsaraf/gradient-background/-/gradient-background-0.1.0.tgz","fileCount":15,"unpackedSize":178255,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBuqzZAD2ZRZyhSYxDwNBSLDEo00Ol3upcEwbkXk1V1eAiEAsWX1xvV6znxXh/BcaNOEejjmHcJVCvmvXeF0U0q9oCk="}]},"_npmUser":{"name":"abhijeetsaraf","email":"abhi.saraf25@gmail.com"},"directories":{},"maintainers":[{"name":"abhijeetsaraf","email":"abhi.saraf25@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gradient-background_0.1.0_1786851247044_0.7164062202736277"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T03:34:06.956Z","0.1.0":"2026-08-16T03:34:07.178Z","modified":"2026-08-16T03:34:07.340Z"},"maintainers":[{"name":"abhijeetsaraf","email":"abhi.saraf25@gmail.com"}],"description":"Zero-dependency animated WebGL mesh-gradient background. Framework-agnostic core + optional React wrapper. Colors via props or CSS variables.","homepage":"https://github.com/abhijeetsaraf/gradient-background#readme","keywords":["webgl","gradient","background","mesh-gradient","animation","react","canvas"],"repository":{"type":"git","url":"git+https://github.com/abhijeetsaraf/gradient-background.git"},"author":{"name":"Abhijeet Saraf"},"bugs":{"url":"https://github.com/abhijeetsaraf/gradient-background/issues"},"license":"MIT","readme":"# @abhijeetsaraf/gradient-background\n\nZero-dependency animated WebGL mesh-gradient background. One framework-agnostic\ncore that works in a plain `<script>` tag **and** as a React component. Colors\nare controlled by props/options, with an automatic fallback to CSS variables so\nyou can theme via CSS (including `light-dark()` and a `.dark` / `.light` class).\n\n- No runtime dependencies. React is an **optional** peer dependency.\n- Two animated color \"blobs\" over a transparent canvas — drops on top of any background.\n- Pauses rendering when scrolled off-screen; handles resize and device pixel ratio.\n- Ships ESM + CJS (for bundlers) and a global IIFE build (for CDN / `<script>`).\n\n## Color format\n\nColors are `[highlight, shadow]`. Each color accepts:\n\n- Hex: `\"#08872b\"`, `\"#08872b80\"`, `\"#abc\"`\n- `rgb()` / `rgba()`: `\"rgba(8,135,43,0.8)\"`\n- Comma floats (the CSS-variable format, 0–1): `\"0.03, 0.53, 0.17, 0.8\"`\n- Array: `[8, 135, 43, 0.8]` (0–255) or `[0.03, 0.53, 0.17, 0.8]` (0–1)\n\nIf you omit `colors`, the effect reads these CSS variables (names configurable):\n\n```css\n:root {\n  --gradient-mesh-highlight: 0.475, 0.804, 0.576, 0.92;\n  --gradient-mesh-shadow: 0.031, 0.529, 0.169, 0.8;\n  --theme-transition-duration: 500ms; /* used when colors change */\n}\n```\n\n## Use in a plain HTML / static GitHub Pages site (no build step)\n\n```html\n<section id=\"hero\" style=\"position: relative; height: 100vh;\">\n  <h1>Hello</h1>\n</section>\n\n<script src=\"https://unpkg.com/@abhijeetsaraf/gradient-background/dist/gradient-background.global.js\"></script>\n<script>\n  const bg = new GradientBackground(\"#hero\", {\n    colors: [\"#08872b\", \"#7bcd93\"],\n  });\n  // bg.setColors([\"#1e40af\", \"#93c5fd\"]);  // animated\n  // bg.destroy();\n</script>\n```\n\nPassing a container element (or selector) creates a fill-parent `<canvas>` inside\nit. Passing a `<canvas>` element uses it directly.\n\n## Use in React (Vite / CRA / Next)\n\n```bash\nnpm install @abhijeetsaraf/gradient-background\n```\n\n```jsx\nimport GradientBackground from \"@abhijeetsaraf/gradient-background/react\";\n\nexport default function Hero() {\n  return (\n    <section style={{ position: \"relative\", height: \"100vh\" }}>\n      <GradientBackground colors={[\"#08872b\", \"#7bcd93\"]} />\n      <h1 style={{ position: \"relative\" }}>Hello</h1>\n    </section>\n  );\n}\n```\n\nOmit `colors` to drive it entirely from CSS variables (e.g. for dark/light themes);\nchanging the CSS var and re-rendering will animate to the new colors.\n\n## Use the core directly (bundlers, non-React)\n\n```js\nimport GradientBackground from \"@abhijeetsaraf/gradient-background\";\n\nconst bg = new GradientBackground(\"#hero\", { colors: [\"#08872b\", \"#7bcd93\"] });\n```\n\n## API\n\n### `new GradientBackground(target, options?)`\n\n- `target` — a `<canvas>`, a container element, or a CSS selector string.\n- `options.colors` — `[highlight, shadow]`. Omit to read CSS variables.\n- `options.cssVars` — override variable names `{ highlight, shadow, transitionDuration }`.\n- `options.element` — element to read CSS variables from (default `<html>`).\n- `options.tuning` — `{ blobRadius, blobEdge, distortion }` (baked into the shader at construction).\n- `options.blendMode` — CSS `mix-blend-mode` applied to the canvas.\n- `options.pauseWhenHidden` — pause rendering off-screen (default `true`).\n\nMethods: `setColors(colors, { duration })`, `refreshFromCssVars({ duration })`,\n`setBlendMode(mode)`, `destroy()`.\n\n### React `<GradientBackground />`\n\nProps: `colors`, `tuning`, `cssVars`, `blendMode`, `pauseWhenHidden`,\n`transitionDuration`, plus `className` / `style` forwarded to the canvas.\n\n## Tuning knobs\n\n- `blobRadius` (default `0.36`) — blob size in UV units.\n- `blobEdge` (default `0.85`) — 0–1 edge softness.\n- `distortion` (default `0.5`) — how far the field smears each blob.\n\n## Development\n\n```bash\nnpm install\nnpm run build   # outputs dist/ (esm, cjs, iife)\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-7baf5948e0ed51f601c51a4e79df5e78"}