{"_id":"gradflow","_rev":"3-36eb5fbdf45f8bb8a41ce9366ffcf453","name":"gradflow","dist-tags":{"latest":"0.2.0"},"versions":{"0.0.1":{"name":"gradflow","version":"0.0.1","keywords":["react","gradient","webgl","animation","background","ogl"],"author":{"name":"Meer Bahadin","email":"meerbahadin@gmail.com"},"license":"MIT","_id":"gradflow@0.0.1","maintainers":[{"name":"meerbahadin","email":"meerbahadin10@gmail.com"}],"homepage":"https://gradflow.meera.dev","bugs":{"url":"https://github.com/meerbahadin/grad-flow/issues"},"dist":{"shasum":"dcd34be212ceb2b998af36b30265ff1a3b78d50c","tarball":"https://registry.npmjs.org/gradflow/-/gradflow-0.0.1.tgz","fileCount":6,"integrity":"sha512-pzzye3eGzEas6Joi8I3zVJiL3m+AJZyMZALRFsJek5ftAUJqX9fuovUTUiykgJ5SJ3HQVoXor+DEZnG80vNIpw==","signatures":[{"sig":"MEUCIDGjHUItQx7yQeeqCLbJgY+gbC7xkSWphLKPUVA3rGqsAiEAoedlN5WYFEn1n95r5TAvosT4Jg3Scs1FFKb6qZZksgk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":93692},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"3f5bb34f97648c572a33d3f304e1a231aefa65e3","scripts":{"dev":"next dev","lint":"eslint","build":"next build","start":"next start","build:lib":"tsup","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"meerbahadin","email":"meerbahadin10@gmail.com"},"repository":{"url":"git+https://github.com/meerbahadin/grad-flow.git","type":"git"},"_npmVersion":"10.9.2","description":"Beautiful animated WebGL gradients for React","directories":{},"_nodeVersion":"22.13.1","dependencies":{"ogl":"^1.0.11","grad-flow":"0.1.4"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","next":"15.5.2","tsup":"^8.5.0","react":"19.1.0","shiki":"^3.12.2","eslint":"^9","motion":"^12.23.12","react-dom":"19.1.0","typescript":"^5","@types/node":"^20","tailwindcss":"^4","@types/react":"^19","lucide-react":"^0.542.0","tailwind-merge":"^3.3.1","tw-animate-css":"^1.3.8","@eslint/eslintrc":"^3","@types/react-dom":"^19","@vercel/analytics":"^1.5.0","eslint-config-next":"15.5.2","@tabler/icons-react":"^3.34.1","@radix-ui/react-slot":"^1.2.3","@tailwindcss/postcss":"^4","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-popover":"^1.1.15","class-variance-authority":"^0.7.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gradflow_0.0.1_1759841102396_0.18149366020702185","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"gradflow","version":"0.1.0","keywords":["react","gradient","webgl","animation","background","ogl"],"author":{"name":"Meer Bahadin","email":"meerbahadin@gmail.com"},"license":"MIT","_id":"gradflow@0.1.0","maintainers":[{"name":"meerbahadin","email":"meerbahadin10@gmail.com"}],"homepage":"https://gradflow.meera.dev","bugs":{"url":"https://github.com/meerbahadin/gradflow/issues"},"dist":{"shasum":"283ca76cec73d8f91895907438696ee68d53b2e3","tarball":"https://registry.npmjs.org/gradflow/-/gradflow-0.1.0.tgz","fileCount":6,"integrity":"sha512-W9Fz9eESYtba4hCEUQvXjhRMKTaF/infvieP/JDvquXTLywC2+fKCVur+a3hneDyW2KmSqe0vmjqB4l9xlocCg==","signatures":[{"sig":"MEUCIQC2T4mURWiS1IaHMyUq+Vs7yTj+AKXWeNXj7gTYKqNkiwIgPZjPe5UVpZEsOVBi7wIVvSIYvFbHUyNf4lZvr/UcG4I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":93595},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"3f5bb34f97648c572a33d3f304e1a231aefa65e3","scripts":{"dev":"next dev","lint":"eslint","build":"next build","start":"next start","build:lib":"tsup","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"meerbahadin","email":"meerbahadin10@gmail.com"},"repository":{"url":"git+https://github.com/meerbahadin/gradflow.git","type":"git"},"_npmVersion":"10.9.2","description":"Beautiful animated WebGL gradients for React","directories":{},"_nodeVersion":"22.13.1","dependencies":{"ogl":"^1.0.11"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","next":"15.5.2","tsup":"^8.5.0","react":"19.1.0","shiki":"^3.12.2","eslint":"^9","motion":"^12.23.12","react-dom":"19.1.0","typescript":"^5","@types/node":"^20","tailwindcss":"^4","@types/react":"^19","lucide-react":"^0.542.0","tailwind-merge":"^3.3.1","tw-animate-css":"^1.3.8","@eslint/eslintrc":"^3","@types/react-dom":"^19","@vercel/analytics":"^1.5.0","eslint-config-next":"15.5.2","@tabler/icons-react":"^3.34.1","@radix-ui/react-slot":"^1.2.3","@tailwindcss/postcss":"^4","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-popover":"^1.1.15","class-variance-authority":"^0.7.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gradflow_0.1.0_1759841815361_0.0012550768384955724","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"gradflow","version":"0.2.0","description":"Beautiful animated WebGL gradients for React","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"}},"keywords":["react","gradient","webgl","animation","background","ogl"],"author":{"name":"Meer Bahadin","email":"meerbahadin@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/meerbahadin/gradflow.git"},"homepage":"https://gradflow.meera.dev","bugs":{"url":"https://github.com/meerbahadin/gradflow/issues"},"scripts":{"dev":"next dev","build":"next build","build:lib":"tsup","start":"next start","lint":"eslint","prepublishOnly":"npm run build:lib"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"ogl":"^1.0.11"},"devDependencies":{"@eslint/eslintrc":"^3","@radix-ui/react-popover":"^1.1.18","@radix-ui/react-select":"^2.3.2","@radix-ui/react-slider":"^1.4.2","@radix-ui/react-slot":"^1.3.0","@tabler/icons-react":"^3.44.0","@tailwindcss/postcss":"^4","@types/node":"^26","@types/react":"^19","@types/react-dom":"^19","@vercel/analytics":"^2.0.1","class-variance-authority":"^0.7.1","clsx":"^2.1.1","eslint":"^10","eslint-config-next":"16.2.10","lucide-react":"^1.23.0","motion":"^12.42.2","next":"16.2.10","react":"19.2.7","react-dom":"19.2.7","shiki":"^4.3.1","tailwind-merge":"^3.6.0","tailwindcss":"^4","tsup":"^8.5.1","tw-animate-css":"^1.4.0","typescript":"^6"},"gitHead":"04b81faeaa19368c4ec674acc347d33d7d4159c2","_id":"gradflow@0.2.0","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-OyotFAKm8Bd3XiaurtOWXljymoO22WPsi/54NC2k7ngt7BEeMKFMlQO6qUlwTrFBwM4iK9R6myc2JxTt0zRt+Q==","shasum":"7d143b03d381a76e2d5d6fc8b4d7db6b800c96e6","tarball":"https://registry.npmjs.org/gradflow/-/gradflow-0.2.0.tgz","fileCount":6,"unpackedSize":108682,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDQqWydmNNZRtyWIOECb2QsZEDksc9LjhLL9/VO8e9FJQIgLT77FwL+RUUkFdmw8u1c3IiOrduvF3/FNu2ZgYIA56w="}]},"_npmUser":{"name":"meerbahadin","email":"meerbahadin10@gmail.com"},"directories":{},"maintainers":[{"name":"meerbahadin","email":"meerbahadin10@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gradflow_0.2.0_1783264833558_0.5776922875175523"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-07T12:45:02.395Z","modified":"2026-07-05T15:20:33.794Z","0.0.1":"2025-10-07T12:45:02.586Z","0.1.0":"2025-10-07T12:56:55.575Z","0.2.0":"2026-07-05T15:20:33.691Z"},"bugs":{"url":"https://github.com/meerbahadin/gradflow/issues"},"author":{"name":"Meer Bahadin","email":"meerbahadin@gmail.com"},"license":"MIT","homepage":"https://gradflow.meera.dev","keywords":["react","gradient","webgl","animation","background","ogl"],"repository":{"type":"git","url":"git+https://github.com/meerbahadin/gradflow.git"},"description":"Beautiful animated WebGL gradients for React","maintainers":[{"name":"meerbahadin","email":"meerbahadin10@gmail.com"}],"readme":"# GradFlow\n\nBeautiful animated WebGL gradients for React. Create stunning, performant gradient backgrounds with multiple animation styles.\n\n## Features\n\n- 🎨 **9 Gradient Types**: Linear, Conic, Animated, Wave, Silk, Smoke, Stripe, Mesh, and Aurora\n- ♿ **Motion-Aware**: Respects `prefers-reduced-motion` and supports a `paused` prop\n- 🔋 **Battery Friendly**: Automatically stops rendering when offscreen or in a hidden tab\n- 🚀 **High Performance**: WebGL-powered rendering with optimized shaders\n- 🎛️ **Fully Customizable**: Control colors, animation speed, scale, and noise\n- 📱 **Responsive**: Automatically adapts to container size\n- 🔧 **TypeScript Support**: Fully typed API\n- 🎭 **Easy Integration**: Simple npm install and import\n\n## Demo\n\nVisit [gradflow.meera.dev](https://gradflow.meera.dev) to see GradFlow in action and experiment with different configurations.\n\n## Installation\n\n```bash\nnpm install gradflow\n```\n\n## Quick Start\n\n```tsx\nimport { GradFlow } from 'gradflow'\n\nfunction App() {\n  return (\n    <div className='relative h-screen'>\n      <GradFlow />\n      {/* Your content here */}\n    </div>\n  )\n}\n```\n\n## Usage Examples\n\n### With Custom Configuration\n\n```tsx\nimport { GradFlow } from 'gradflow'\n\nfunction App() {\n  return (\n    <GradFlow\n      config={{\n        color1: { r: 210, g: 21, b: 112 },\n        color2: { r: 140, g: 63, b: 248 },\n        color3: { r: 86, g: 255, b: 195 },\n        speed: 0.5,\n        scale: 1.2,\n        type: 'aurora',\n        noise: 0.32,\n      }}\n    />\n  )\n}\n```\n\n### Using Hex Colors\n\n```tsx\nimport { GradFlow } from 'gradflow'\n\nfunction App() {\n  return (\n    <GradFlow\n      config={{\n        color1: '#d21570',\n        color2: '#8c3ff8',\n        color3: '#56ffc3',\n      }}\n    />\n  )\n}\n```\n\n### Using Presets\n\n```tsx\nimport { GradFlow } from 'gradflow'\n\nfunction App() {\n  return <GradFlow preset='cosmic' />\n}\n```\n\nAvailable presets: `cosmic`, `matrix`, `electric`, `inferno`, `mystic`, `cyber`, `neon`, `plasma`, `dream`, `borealis`\n\nPresets can be combined with `config` — config values override the preset:\n\n```tsx\n<GradFlow preset='borealis' config={{ speed: 0.2 }} />\n```\n\n### Pausing the Animation\n\n```tsx\n<GradFlow paused />\n```\n\nRenders a static frame without the animation loop. GradFlow also pauses itself automatically when the canvas is scrolled offscreen, the tab is hidden, or the user has `prefers-reduced-motion` enabled.\n\n## API Reference\n\n### GradFlow Component\n\n| Prop        | Type                  | Default          | Description                             |\n| ----------- | --------------------- | ---------------- | --------------------------------------- |\n| `config`    | `GradientConfigInput` | `DEFAULT_CONFIG` | Gradient configuration object           |\n| `preset`    | `string`              | —                | Built-in preset name (e.g. `'cosmic'`)  |\n| `paused`    | `boolean`             | `false`          | Freeze the animation on a static frame  |\n| `className` | `string`              | `''`             | Additional CSS classes                  |\n\n### GradientConfigInput\n\nAll properties are optional. You can use either hex strings or RGB objects for colors.\n\n```typescript\ntype GradientConfigInput = {\n  color1?: string | RGB // First gradient color\n  color2?: string | RGB // Second gradient color\n  color3?: string | RGB // Third gradient color\n  speed?: number // Animation speed (0-2)\n  scale?: number // Pattern scale (0.5-3)\n  type?: GradientType // Gradient pattern type\n  noise?: number // Noise intensity (0-0.5)\n}\n\ntype RGB = {\n  r: number // 0-255\n  g: number // 0-255\n  b: number // 0-255\n}\n```\n\n### Gradient Types\n\n- `linear` - Classic linear gradient with wave distortion\n- `animated` - Dynamic flowing patterns with rotation\n- `conic` - Circular/radial gradient patterns\n- `wave` - Wave-based undulating patterns\n- `silk` - Smooth silk-like flowing textures\n- `smoke` - Organic smoke-like patterns\n- `stripe` - Warped stripe patterns\n- `mesh` - Soft drifting color blobs (mesh gradient)\n- `aurora` - Northern-lights curtains (default)\n\n## Utility Functions\n\n### Color Conversion\n\n```tsx\nimport { hexToRgb, rgbToHex, normalizeColor } from 'gradflow'\n\n// Convert hex to RGB\nconst rgb = hexToRgb('#ff0000') // { r: 255, g: 0, b: 0 }\n\n// Convert RGB to hex\nconst hex = rgbToHex({ r: 255, g: 0, b: 0 }) // '#ff0000'\n\n// Normalize color (accepts both string and RGB)\nconst normalized = normalizeColor('#ff0000') // { r: 255, g: 0, b: 0 }\n```\n\n### Random Colors\n\n```tsx\nimport { randomRGB, generateRandomColors } from 'gradflow'\n\n// Generate single random RGB color\nconst color = randomRGB()\n\n// Generate random gradient colors\nconst colors = generateRandomColors()\n// Returns: { color1: RGB, color2: RGB, color3: RGB }\n```\n\n## Performance Tips\n\n- Use `scale` values between 0.5-2.0 for optimal performance\n- Lower `noise` values (< 0.2) perform better\n- Consider using `will-change: transform` CSS for smooth animations\n- The component automatically limits device pixel ratio to 2 for performance\n\n## Requirements\n\n- React >= 18.0.0\n- react-dom >= 18.0.0\n- Modern browser with WebGL support\n\n## Browser Support\n\nGradFlow works in all modern browsers that support WebGL:\n\n- Chrome 56+\n- Firefox 51+\n- Safari 15+\n- Edge 79+\n\n## License\n\nMIT License - feel free to use in your projects!\n\n## Credits\n\nCreated by [Meer](https://www.meera.dev/)\n\n---\n\n**Note**: This component requires WebGL support. It gracefully handles unsupported environments but won't render gradients in very old browsers.\n","readmeFilename":"README.md"}