{"id":27200429,"url":"https://github.com/metaory/gradient-gl","last_synced_at":"2025-07-10T07:05:19.082Z","repository":{"id":284977020,"uuid":"956547967","full_name":"metaory/gradient-gl","owner":"metaory","description":"Deterministic Procedural WebGL Gradient Animations","archived":false,"fork":false,"pushed_at":"2025-06-29T11:37:32.000Z","size":2447,"stargazers_count":35,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-29T11:50:37.694Z","etag":null,"topics":["animation","background","canvas","deterministic","gradient","procedular","procedular-generation","seed","seed-generator","shader","webgl"],"latest_commit_sha":null,"homepage":"https://metaory.github.io/gradient-gl/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metaory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-28T12:46:48.000Z","updated_at":"2025-06-29T11:37:35.000Z","dependencies_parsed_at":"2025-04-13T19:31:30.451Z","dependency_job_id":"11cbef13-13b3-417a-a358-1fbb62e9e8b8","html_url":"https://github.com/metaory/gradient-gl","commit_stats":null,"previous_names":["metaory/gradient-gl"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/metaory/gradient-gl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fgradient-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fgradient-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fgradient-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fgradient-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metaory","download_url":"https://codeload.github.com/metaory/gradient-gl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fgradient-gl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264545017,"owners_count":23625387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","background","canvas","deterministic","gradient","procedular","procedular-generation","seed","seed-generator","shader","webgl"],"created_at":"2025-04-09T21:01:50.248Z","updated_at":"2025-07-10T07:05:19.074Z","avatar_url":"https://github.com/metaory.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"docs/public/logo.png\" alt=\"demo\" height=\"128\" /\u003e\n    \u003ch4\u003eDeterministic WebGL Gradient Animations\u003c/h4\u003e\n    \u003ch5\u003e\n        \u003ca href=\"https://metaory.github.io/gradient-gl/\" target=\"_blank\"\u003ePlayground\u003c/a\u003e\n    \u003c/h5\u003e\n    \u003cp\u003e\n        Tiny WebGL library for\n        \u003cbr\u003e\n        Procedural Gradient Animations\n        \u003cbr\u003e\n        Deterministic - Seed-driven\n    \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    \u003ch6\u003e\n        Usage Examples\n        \u003cbr\u003e\n        \u003ca href=\"https://metaory.github.io/gradient-gl/cdn-vanilla/\" target=\"_blank\"\u003eCDN\u003c/a\u003e •\n        \u003ca href=\"https://metaory.github.io/gradient-gl/vite-vanilla/\" target=\"_blank\"\u003eVanilla\u003c/a\u003e •\n        \u003ca href=\"https://metaory.github.io/gradient-gl/vite-react/\" target=\"_blank\"\u003eReact\u003c/a\u003e •\n        \u003ca href=\"https://metaory.github.io/gradient-gl/vite-vue/\" target=\"_blank\"\u003eVue\u003c/a\u003e\n        \u003cbr\u003e\n        \u003csmall\u003esource in \u003ca href=\"https://github.com/metaory/gradient-gl/tree/master/examples\" target=\"_blank\"\u003e./examples\u003c/a\u003e\u003c/small\u003e\n    \u003c/h6\u003e\n    \u003chr\u003e\n    \u003cp\u003e\n        \u003ca href=\"https://github.com/metaory/gradient-gl/discussions/5\" target=\"_blank\"\u003e\n            🖼️ Showcase Gallery 🌀\n        \u003c/a\u003e\n    \u003c/p\u003e\n    Share your seeds \u0026 creations!\n\u003c/div\u003e\n\n---\n\n#### Easiest Usage: \nOne-Liner Script Tag\n\n\u003e `SeedScript`\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/gradient-gl?seed=a2.eba9\"\u003e\u003c/script\u003e\n```\n\n\u003e [read more](#seedscript-usage)\n\n---\n\n## Usage\n\n```sh\nnpm install gradient-gl\n```\n\n```javascript\nimport gradientGL from 'gradient-gl'\n\n// Mounts to \u003cbody\u003e\ngradientGL('a2.eba9')\n\n// Mounts inside #app\ngradientGL('a2.eba9', '#app')\n\n// Access shader program if needed\nconst program = await gradientGL('a2.eba9')\n```\n\n### Mounting Behavior\n\n- **No selector**: creates and styles a `\u003ccanvas\u003e` in `\u003cbody\u003e`\n- **Selector to an element**: creates and styles a `\u003ccanvas\u003e` inside it\n- **Selector to a `\u003ccanvas\u003e`**: uses it directly, no styles or DOM changes\n\n\u003e Styles are overridable.\n\n### Vite Configuration\n\n```js\nexport default {\n  build: {\n    target: 'esnext',\n  },\n}\n```\n\n### CDN\n\n#### UNPKG\n\n```html\n\u003cscript type=\"module\"\u003e\n    import gradientGL from 'https://unpkg.com/gradient-gl'\n    gradientGL('a2.eba9')\n\u003c/script\u003e\n```\n\n#### ESM\n\n```html\n\u003cscript type=\"module\"\u003e\n    import gradientGL from 'https://esm.sh/gradient-gl'\n    gradientGL('a2.eba9')\n\u003c/script\u003e\n```\n\n### SeedScript Usage\n\n```html\n    \u003c!-- Latest with default mounting point --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/gradient-gl?seed=a2.eba9\"\u003e\u003c/script\u003e\n\n    \u003c!-- optionally pin to a version @x.x.x --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/gradient-gl@1.4.1?seed=a2.eba9\"\u003e\u003c/script\u003e\n\n    \u003c!-- optionally set the mount selector --\u003e\n        \u003c!-- mount inside the \u003cmain\u003e tag --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/gradient-gl?seed=a2.eba9\u0026selector=main\"\u003e\u003c/script\u003e\n        \u003c!-- mount inside the .wrapper\u003econtent --\u003e\n        \u003c!-- note: any valid css selector can be used --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/gradient-gl?seed=a2.eba9\u0026selector=.wrapper\u003e.content\"\u003e\u003c/script\u003e\n        \u003c!-- mount inside the #app --\u003e\n        \u003c!-- note hash needs to be escaped as %23 --\u003e\n        \u003c!-- #app → %23app  --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/gradient-gl?seed=a2.eba9\u0026selector=%23app\"\u003e\u003c/script\u003e\n```\n\n## Seed Format\n\n`{shader}.{speed}{hue}{sat}{light}`\n\n- Shader: `[a-z][0-9]` (e.g., `a2`)\n- Options: `[0-9a-f]` (hex values)\n\nExplore and generate seeds in the \u003cb\u003e\u003ca href=\"https://metaory.github.io/gradient-gl/\" target=\"_blank\"\u003eplayground\u003c/a\u003e\u003c/b\u003e\n\n## Performance\n\nAnimated Gradient Background Techniques\n\n(Slowest → Fastest)\n\n1. `SVG` – CPU-only, DOM-heavy, poor scaling, high memory usage\n2. `Canvas 2D` – CPU-only, main-thread load, imperative updates\n3. `CSS` – GPU-composited, limited complexity, best for static\n4. `WebGL` – GPU-accelerated, shader-driven, optimal balance\n5. `WebGPU` – GPU-native, most powerful, limited browser support\n\n\u003e [!NOTE]\n\u003e While WebGPU is technically the fastest, WebGL remains the best choice for animated gradients due to its maturity, broad support, and optimal performance/complexity ratio.\n\n\u003e TODO: Interactive benchmark app\n\n---\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetaory%2Fgradient-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetaory%2Fgradient-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetaory%2Fgradient-gl/lists"}