{"id":24291480,"url":"https://github.com/chanmeng666/gradient-svg-generator","last_synced_at":"2026-04-18T17:36:22.531Z","repository":{"id":271220721,"uuid":"912667712","full_name":"ChanMeng666/gradient-svg-generator","owner":"ChanMeng666","description":"【Be a star, give a star!⭐️】A Node.js service that generates animated gradient SVGs with customizable text overlays. Supports multiple gradient types, animation effects, and includes templates for both standard color schemes and pride flags. Deploy as an API endpoint to create dynamic, animated text displays with smooth gradient backgrounds.","archived":false,"fork":false,"pushed_at":"2026-04-17T13:21:18.000Z","size":19210,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-17T14:29:48.970Z","etag":null,"topics":["animation","api","gradients","nodejs","pride-flags","svg","text-overlay","vercel","web-service"],"latest_commit_sha":null,"homepage":"https://gradient-svg-generator.vercel.app/","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/ChanMeng666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"chanmeng66u","thanks_dev":null,"custom":null}},"created_at":"2025-01-06T06:29:52.000Z","updated_at":"2026-04-17T13:21:21.000Z","dependencies_parsed_at":"2025-01-06T11:30:48.642Z","dependency_job_id":"42abd518-6fe1-41c0-b62d-ab0fb7abd0c5","html_url":"https://github.com/ChanMeng666/gradient-svg-generator","commit_stats":null,"previous_names":["chanmeng666/gradient-svg-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ChanMeng666/gradient-svg-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fgradient-svg-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fgradient-svg-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fgradient-svg-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fgradient-svg-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChanMeng666","download_url":"https://codeload.github.com/ChanMeng666/gradient-svg-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fgradient-svg-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31978488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T17:30:12.329Z","status":"ssl_error","status_checked_at":"2026-04-18T17:29:59.069Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","api","gradients","nodejs","pride-flags","svg","text-overlay","vercel","web-service"],"created_at":"2025-01-16T14:33:20.940Z","updated_at":"2026-04-18T17:36:22.521Z","avatar_url":"https://github.com/ChanMeng666.png","language":"JavaScript","funding_links":["https://buymeacoffee.com/chanmeng66u"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n[![Project Banner](https://gradient-svg-generator.vercel.app/api/svg?text=Gradient+SVG+Generator\u0026height=300\u0026gradientType=holographicUI\u0026duration=10s\u0026color0=00ffff\u0026color1=40e0d0\u0026color2=87ceeb\u0026color3=add8e6\u0026color4=b0e0e6\u0026color5=f0f8ff)](#)\n\n# Gradient SVG Generator\n\n340+ animated gradient SVG banners for your GitHub README — embed a single URL, no install required.\n\n[![][github-release-shield]][github-release-link]\n[![][vercel-shield]][vercel-link]\n[![][github-stars-shield]][github-stars-link]\n[![][github-forks-shield]][github-forks-link]\n[![][github-license-shield]][github-license-link]\n\n**[Visual Editor](https://gradient-svg-generator.vercel.app/create)** · **[Template Gallery](https://gradient-svg-generator.vercel.app/templates)** · **[API Docs](https://gradient-svg-generator.vercel.app/api-docs)**\n\n\u003c/div\u003e\n\n---\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Template Showcase](#-template-showcase)\n  - [🌈 Pride](#-pride-templates-20-templates) · [🔬 Technology](#-technology-templates) · [🌿 Nature](#-nature-templates) · [💎 Material](#-material-templates) · [✨ Text Effects](#-text-effect-templates) · [🎮 Gaming](#-gaming-templates)\n  - [☁️ Weather](#️-weather--atmospheric-templates-12-templates) · [💡 Light \u0026 Shadow](#-light--shadow-templates-12-templates) · [🎨 Art Movements](#-art-movement-templates-12-templates) · [🍳 Culinary](#-culinary--liquid-flow-templates-12-templates)\n  - [🎯 Patterns](#-pattern-templates-8-templates) · [✨ Metallic](#-metallic-effect-templates-8-templates) · [📝 Path Text](#-path-text-animation-templates-12-templates) · [🔷 Shapes](#-shape-background-templates-25-templates)\n  - [🔮 Experimental](#-experimental-templates-29-templates) · [🏷️ GitHub Profile](#️-github-profile-templates-30-templates)\n- [API Reference](#-api-reference)\n- [For Developers](#for-developers)\n- [License](#-license)\n\n---\n\n## Quick Start\n\nPaste this into any Markdown file:\n\n```markdown\n![Banner](https://gradient-svg-generator.vercel.app/api/svg?text=Your%20Text\u0026template=neural-network\u0026height=120)\n```\n\n- Replace `Your%20Text` with your own text (spaces → `%20`)\n- Replace `neural-network` with any template name from the showcase below\n- Works on GitHub, GitLab, Notion, blogs — anywhere Markdown renders\n\nOr open the **[Visual Editor →](https://gradient-svg-generator.vercel.app/create)** to pick colors, size, and animation style interactively, then copy the generated code.\n\n### URL Parameters\n\n| Parameter               | Default      | Description                                                                                  |\n| ----------------------- | ------------ | -------------------------------------------------------------------------------------------- |\n| `text=`                 | —            | Display text (spaces → `%20`; use `;` to separate multiple items for skill pills)            |\n| `template=`             | —            | Template name (from the showcase below)                                                      |\n| `height=`               | `120`        | Height in pixels (1–10000)                                                                   |\n| `duration=`             | `6s`         | Animation loop duration                                                                      |\n| `color0=`, `color1=`, … | `000000`     | Gradient stop colors (hex, no `#`)                                                           |\n| `gradientType=`         | `horizontal` | Effect style — overrides the template default; full list in [API Reference](#-api-reference) |\n| `stroke=`               | —            | Text stroke color (hex)                                                                      |\n| `strokeWidth=`          | `0`          | Text stroke width                                                                            |\n| `rotate=`               | `0`          | Text rotation in degrees                                                                     |\n| `textBg=`               | —            | Background color behind text (hex)                                                           |\n\n---\n\n## 🎨 Template Showcase\n\n\u003cdiv align=\"center\"\u003e\n\n**Quick jump:** \u0026nbsp;\n[🌈 Pride](#-pride-templates-20-templates) · [🔬 Tech](#-technology-templates) · [🌿 Nature](#-nature-templates) · [💎 Material](#-material-templates) · [✨ Text FX](#-text-effect-templates) · [🎮 Gaming](#-gaming-templates) · [☁️ Weather](#️-weather--atmospheric-templates-12-templates) · [💡 Light \u0026 Shadow](#-light--shadow-templates-12-templates) · [🎨 Art Movements](#-art-movement-templates-12-templates) · [🍳 Culinary](#-culinary--liquid-flow-templates-12-templates) · [🎯 Patterns](#-pattern-templates-8-templates) · [✨ Metallic](#-metallic-effect-templates-8-templates) · [📝 Path Text](#-path-text-animation-templates-12-templates) · [🔷 Shapes](#-shape-background-templates-25-templates) · [🔮 Experimental](#-experimental-templates-29-templates) · [🏷️ GitHub Profile](#️-github-profile-templates-30-templates)\n\n\u003c/div\u003e\n\n### 🌈 Pride Templates (20 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                             | Copy This Code                                                                                                                 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| **Progress Pride**\u003cbr/\u003e![Progress Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Progress%20Pride\u0026template=progress-pride\u0026height=80) | `![Progress Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Progress%20Pride\u0026template=progress-pride\u0026height=80)` |\n| **Trans Pride**\u003cbr/\u003e![Trans Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Trans%20Pride\u0026template=trans-pride\u0026height=80)             | `![Trans Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Trans%20Pride\u0026template=trans-pride\u0026height=80)`          |\n| **Bi Pride**\u003cbr/\u003e![Bi Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Bi%20Pride\u0026template=bi-pride\u0026height=80)                         | `![Bi Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Bi%20Pride\u0026template=bi-pride\u0026height=80)`                   |\n| **Pan Pride**\u003cbr/\u003e![Pan Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Pan%20Pride\u0026template=pan-pride\u0026height=80)                     | `![Pan Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Pan%20Pride\u0026template=pan-pride\u0026height=80)`                |\n\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e🏳️‍🌈 View All 20 Pride Templates\u003c/kbd\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                 | Copy This Code                                                                                                                    |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| **Lesbian Pride**\u003cbr/\u003e![Lesbian Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Lesbian%20Pride\u0026template=lesbian-pride\u0026height=80)         | `![Lesbian Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Lesbian%20Pride\u0026template=lesbian-pride\u0026height=80)`       |\n| **Nonbinary Pride**\u003cbr/\u003e![Nonbinary Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Nonbinary%20Pride\u0026template=nonbinary-pride\u0026height=80) | `![Nonbinary Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Nonbinary%20Pride\u0026template=nonbinary-pride\u0026height=80)` |\n| **Ace Pride**\u003cbr/\u003e![Ace Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Ace%20Pride\u0026template=ace-pride\u0026height=80)                         | `![Ace Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Ace%20Pride\u0026template=ace-pride\u0026height=80)`                   |\n| **Genderfluid Pride**\u003cbr/\u003e![Genderfluid Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Genderfluid\u0026template=genderfluid-pride\u0026height=80) | `![Genderfluid Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Genderfluid\u0026template=genderfluid-pride\u0026height=80)`   |\n| **Rainbow Pride**\u003cbr/\u003e![Rainbow Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Rainbow%20Pride\u0026template=pride-rainbow\u0026height=80)         | `![Rainbow Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Rainbow%20Pride\u0026template=pride-rainbow\u0026height=80)`       |\n| **Aromantic Pride**\u003cbr/\u003e![Aromantic Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Aro%20Pride\u0026template=aro-pride\u0026height=80)             | `![Aromantic Pride](https://gradient-svg-generator.vercel.app/api/svg?text=Aro%20Pride\u0026template=aro-pride\u0026height=80)`             |\n\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n### 🔬 Technology Templates\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                             | Copy This Code                                                                                                                 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| **Neural Network**\u003cbr/\u003e![Neural Network](https://gradient-svg-generator.vercel.app/api/svg?text=Neural%20Network\u0026template=neural-network\u0026height=80) | `![Neural Network](https://gradient-svg-generator.vercel.app/api/svg?text=Neural%20Network\u0026template=neural-network\u0026height=80)` |\n| **Cyber Matrix**\u003cbr/\u003e![Cyber Matrix](https://gradient-svg-generator.vercel.app/api/svg?text=Cyber%20Matrix\u0026template=cyber-matrix\u0026height=80)         | `![Cyber Matrix](https://gradient-svg-generator.vercel.app/api/svg?text=Cyber%20Matrix\u0026template=cyber-matrix\u0026height=80)`       |\n| **Quantum Field**\u003cbr/\u003e![Quantum Field](https://gradient-svg-generator.vercel.app/api/svg?text=Quantum%20Field\u0026template=quantum-field\u0026height=80)     | `![Quantum Field](https://gradient-svg-generator.vercel.app/api/svg?text=Quantum%20Field\u0026template=quantum-field\u0026height=80)`    |\n| **Hologram Blue**\u003cbr/\u003e![Hologram Blue](https://gradient-svg-generator.vercel.app/api/svg?text=Hologram%20Blue\u0026template=hologram-blue\u0026height=80)     | `![Hologram Blue](https://gradient-svg-generator.vercel.app/api/svg?text=Hologram%20Blue\u0026template=hologram-blue\u0026height=80)`    |\n\n\u003c/div\u003e\n\n### 🌿 Nature Templates\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                 | Copy This Code                                                                                                                    |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| **Sunrise Dawn**\u003cbr/\u003e![Sunrise Dawn](https://gradient-svg-generator.vercel.app/api/svg?text=Sunrise%20Dawn\u0026template=sunrise-dawn\u0026height=80)             | `![Sunrise Dawn](https://gradient-svg-generator.vercel.app/api/svg?text=Sunrise%20Dawn\u0026template=sunrise-dawn\u0026height=80)`          |\n| **Northern Aurora**\u003cbr/\u003e![Northern Aurora](https://gradient-svg-generator.vercel.app/api/svg?text=Northern%20Aurora\u0026template=northern-aurora\u0026height=80) | `![Northern Aurora](https://gradient-svg-generator.vercel.app/api/svg?text=Northern%20Aurora\u0026template=northern-aurora\u0026height=80)` |\n| **Ocean Depths**\u003cbr/\u003e![Ocean Depths](https://gradient-svg-generator.vercel.app/api/svg?text=Ocean%20Depths\u0026template=ocean-depths\u0026height=80)             | `![Ocean Depths](https://gradient-svg-generator.vercel.app/api/svg?text=Ocean%20Depths\u0026template=ocean-depths\u0026height=80)`          |\n| **Forest Mist**\u003cbr/\u003e![Forest Mist](https://gradient-svg-generator.vercel.app/api/svg?text=Forest%20Mist\u0026template=forest-mist\u0026height=80)                 | `![Forest Mist](https://gradient-svg-generator.vercel.app/api/svg?text=Forest%20Mist\u0026template=forest-mist\u0026height=80)`             |\n\n\u003c/div\u003e\n\n### 💎 Material Templates\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                 | Copy This Code                                                                                                                    |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| **Gold Luxury**\u003cbr/\u003e![Gold Luxury](https://gradient-svg-generator.vercel.app/api/svg?text=Gold%20Luxury\u0026template=gold-luxury\u0026height=80)                 | `![Gold Luxury](https://gradient-svg-generator.vercel.app/api/svg?text=Gold%20Luxury\u0026template=gold-luxury\u0026height=80)`             |\n| **Diamond Crystal**\u003cbr/\u003e![Diamond Crystal](https://gradient-svg-generator.vercel.app/api/svg?text=Diamond%20Crystal\u0026template=diamond-crystal\u0026height=80) | `![Diamond Crystal](https://gradient-svg-generator.vercel.app/api/svg?text=Diamond%20Crystal\u0026template=diamond-crystal\u0026height=80)` |\n| **Silver Chrome**\u003cbr/\u003e![Silver Chrome](https://gradient-svg-generator.vercel.app/api/svg?text=Silver%20Chrome\u0026template=silver-chrome\u0026height=80)         | `![Silver Chrome](https://gradient-svg-generator.vercel.app/api/svg?text=Silver%20Chrome\u0026template=silver-chrome\u0026height=80)`       |\n| **Emerald Gem**\u003cbr/\u003e![Emerald Gem](https://gradient-svg-generator.vercel.app/api/svg?text=Emerald%20Gem\u0026template=emerald-gem\u0026height=80)                 | `![Emerald Gem](https://gradient-svg-generator.vercel.app/api/svg?text=Emerald%20Gem\u0026template=emerald-gem\u0026height=80)`             |\n\n\u003c/div\u003e\n\n### ✨ Text Effect Templates\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                                 | Copy This Code                                                                                                                                |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Luminance Glow**\u003cbr/\u003e![Luminance Glow](https://gradient-svg-generator.vercel.app/api/svg?text=Luminance%20Glow\u0026template=luminance-glow\u0026height=80)                     | `![Luminance Glow](https://gradient-svg-generator.vercel.app/api/svg?text=Luminance%20Glow\u0026template=luminance-glow\u0026height=80)`                |\n| **Rainbow Wave**\u003cbr/\u003e![Rainbow Wave](https://gradient-svg-generator.vercel.app/api/svg?text=Rainbow%20Wave\u0026template=rainbow-wave\u0026height=80)                             | `![Rainbow Wave](https://gradient-svg-generator.vercel.app/api/svg?text=Rainbow%20Wave\u0026template=rainbow-wave\u0026height=80)`                      |\n| **Glitch Cyber**\u003cbr/\u003e![Glitch Cyber](https://gradient-svg-generator.vercel.app/api/svg?text=Glitch%20Cyber\u0026template=glitch-cyber\u0026height=80)                             | `![Glitch Cyber](https://gradient-svg-generator.vercel.app/api/svg?text=Glitch%20Cyber\u0026template=glitch-cyber\u0026height=80)`                      |\n| **Typewriter Terminal**\u003cbr/\u003e![Typewriter Terminal](https://gradient-svg-generator.vercel.app/api/svg?text=Typewriter%20Terminal\u0026template=typewriter-terminal\u0026height=80) | `![Typewriter Terminal](https://gradient-svg-generator.vercel.app/api/svg?text=Typewriter%20Terminal\u0026template=typewriter-terminal\u0026height=80)` |\n\n\u003c/div\u003e\n\n### 🎮 Gaming Templates\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                   | Copy This Code                                                                                                                      |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| **Pixel Art Retro**\u003cbr/\u003e![Pixel Art Retro](https://gradient-svg-generator.vercel.app/api/svg?text=Pixel%20Art%20Retro\u0026template=pixel-art-retro\u0026height=80) | `![Pixel Art Retro](https://gradient-svg-generator.vercel.app/api/svg?text=Pixel%20Art%20Retro\u0026template=pixel-art-retro\u0026height=80)` |\n| **Neon Arcade**\u003cbr/\u003e![Neon Arcade](https://gradient-svg-generator.vercel.app/api/svg?text=Neon%20Arcade\u0026template=neon-arcade\u0026height=80)                   | `![Neon Arcade](https://gradient-svg-generator.vercel.app/api/svg?text=Neon%20Arcade\u0026template=neon-arcade\u0026height=80)`               |\n| **Energy Blast**\u003cbr/\u003e![Energy Blast](https://gradient-svg-generator.vercel.app/api/svg?text=Energy%20Blast\u0026template=energy-blast\u0026height=80)               | `![Energy Blast](https://gradient-svg-generator.vercel.app/api/svg?text=Energy%20Blast\u0026template=energy-blast\u0026height=80)`            |\n| **Cyberpunk City**\u003cbr/\u003e![Cyberpunk City](https://gradient-svg-generator.vercel.app/api/svg?text=Cyberpunk%20City\u0026template=cyberpunk-city\u0026height=80)       | `![Cyberpunk City](https://gradient-svg-generator.vercel.app/api/svg?text=Cyberpunk%20City\u0026template=cyberpunk-city\u0026height=80)`      |\n\n\u003c/div\u003e\n\n### ☁️ Weather \u0026 Atmospheric Templates (12 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                             | Copy This Code                                                                                                                 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| **Fog Rolling**\u003cbr/\u003e![Fog Rolling](https://gradient-svg-generator.vercel.app/api/svg?text=Fog%20Rolling\u0026template=fog-rolling\u0026height=80)             | `![Fog Rolling](https://gradient-svg-generator.vercel.app/api/svg?text=Fog%20Rolling\u0026template=fog-rolling\u0026height=80)`          |\n| **Monsoon Rain**\u003cbr/\u003e![Monsoon Rain](https://gradient-svg-generator.vercel.app/api/svg?text=Monsoon%20Rain\u0026template=monsoon-rain\u0026height=80)         | `![Monsoon Rain](https://gradient-svg-generator.vercel.app/api/svg?text=Monsoon%20Rain\u0026template=monsoon-rain\u0026height=80)`       |\n| **Snowfall Drift**\u003cbr/\u003e![Snowfall Drift](https://gradient-svg-generator.vercel.app/api/svg?text=Snowfall%20Drift\u0026template=snowfall-drift\u0026height=80) | `![Snowfall Drift](https://gradient-svg-generator.vercel.app/api/svg?text=Snowfall%20Drift\u0026template=snowfall-drift\u0026height=80)` |\n| **Lightning Web**\u003cbr/\u003e![Lightning Web](https://gradient-svg-generator.vercel.app/api/svg?text=Lightning%20Web\u0026template=lightning-web\u0026height=80)     | `![Lightning Web](https://gradient-svg-generator.vercel.app/api/svg?text=Lightning%20Web\u0026template=lightning-web\u0026height=80)`    |\n\n\u003c/div\u003e\n\n### 💡 Light \u0026 Shadow Templates (12 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                             | Copy This Code                                                                                                                             |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| **Caustic Underwater**\u003cbr/\u003e![Caustic Underwater](https://gradient-svg-generator.vercel.app/api/svg?text=Caustic%20Underwater\u0026template=caustic-underwater\u0026height=80) | `![Caustic Underwater](https://gradient-svg-generator.vercel.app/api/svg?text=Caustic%20Underwater\u0026template=caustic-underwater\u0026height=80)` |\n| **Lens Flare**\u003cbr/\u003e![Lens Flare](https://gradient-svg-generator.vercel.app/api/svg?text=Lens%20Flare\u0026template=lens-flare\u0026height=80)                                 | `![Lens Flare](https://gradient-svg-generator.vercel.app/api/svg?text=Lens%20Flare\u0026template=lens-flare\u0026height=80)`                         |\n| **Bokeh Blur**\u003cbr/\u003e![Bokeh Blur](https://gradient-svg-generator.vercel.app/api/svg?text=Bokeh%20Blur\u0026template=bokeh-blur\u0026height=80)                                 | `![Bokeh Blur](https://gradient-svg-generator.vercel.app/api/svg?text=Bokeh%20Blur\u0026template=bokeh-blur\u0026height=80)`                         |\n| **God Rays**\u003cbr/\u003e![God Rays](https://gradient-svg-generator.vercel.app/api/svg?text=God%20Rays\u0026template=god-rays\u0026height=80)                                         | `![God Rays](https://gradient-svg-generator.vercel.app/api/svg?text=God%20Rays\u0026template=god-rays\u0026height=80)`                               |\n\n\u003c/div\u003e\n\n### 🎨 Art Movement Templates (12 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                             | Copy This Code                                                                                                                             |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| **Art Nouveau Flow**\u003cbr/\u003e![Art Nouveau Flow](https://gradient-svg-generator.vercel.app/api/svg?text=Art%20Nouveau%20Flow\u0026template=art-nouveau-flow\u0026height=80)       | `![Art Nouveau Flow](https://gradient-svg-generator.vercel.app/api/svg?text=Art%20Nouveau%20Flow\u0026template=art-nouveau-flow\u0026height=80)`     |\n| **Art Deco Luxury**\u003cbr/\u003e![Art Deco Luxury](https://gradient-svg-generator.vercel.app/api/svg?text=Art%20Deco%20Luxury\u0026template=art-deco-luxury\u0026height=80)           | `![Art Deco Luxury](https://gradient-svg-generator.vercel.app/api/svg?text=Art%20Deco%20Luxury\u0026template=art-deco-luxury\u0026height=80)`        |\n| **Impressionist Dots**\u003cbr/\u003e![Impressionist Dots](https://gradient-svg-generator.vercel.app/api/svg?text=Impressionist%20Dots\u0026template=impressionist-dots\u0026height=80) | `![Impressionist Dots](https://gradient-svg-generator.vercel.app/api/svg?text=Impressionist%20Dots\u0026template=impressionist-dots\u0026height=80)` |\n| **Pop Art Halftone**\u003cbr/\u003e![Pop Art Halftone](https://gradient-svg-generator.vercel.app/api/svg?text=Pop%20Art%20Halftone\u0026template=pop-art-halftone\u0026height=80)       | `![Pop Art Halftone](https://gradient-svg-generator.vercel.app/api/svg?text=Pop%20Art%20Halftone\u0026template=pop-art-halftone\u0026height=80)`     |\n\n\u003c/div\u003e\n\n### 🍳 Culinary \u0026 Liquid Flow Templates (12 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                             | Copy This Code                                                                                                                 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| **Coffee Cream**\u003cbr/\u003e![Coffee Cream](https://gradient-svg-generator.vercel.app/api/svg?text=Coffee%20Cream\u0026template=coffee-cream\u0026height=80)         | `![Coffee Cream](https://gradient-svg-generator.vercel.app/api/svg?text=Coffee%20Cream\u0026template=coffee-cream\u0026height=80)`       |\n| **Wine Pour**\u003cbr/\u003e![Wine Pour](https://gradient-svg-generator.vercel.app/api/svg?text=Wine%20Pour\u0026template=wine-pour\u0026height=80)                     | `![Wine Pour](https://gradient-svg-generator.vercel.app/api/svg?text=Wine%20Pour\u0026template=wine-pour\u0026height=80)`                |\n| **Honey Drizzle**\u003cbr/\u003e![Honey Drizzle](https://gradient-svg-generator.vercel.app/api/svg?text=Honey%20Drizzle\u0026template=honey-drizzle\u0026height=80)     | `![Honey Drizzle](https://gradient-svg-generator.vercel.app/api/svg?text=Honey%20Drizzle\u0026template=honey-drizzle\u0026height=80)`    |\n| **Chocolate Melt**\u003cbr/\u003e![Chocolate Melt](https://gradient-svg-generator.vercel.app/api/svg?text=Chocolate%20Melt\u0026template=chocolate-melt\u0026height=80) | `![Chocolate Melt](https://gradient-svg-generator.vercel.app/api/svg?text=Chocolate%20Melt\u0026template=chocolate-melt\u0026height=80)` |\n\n\u003c/div\u003e\n\n### 🎯 Pattern Templates (8 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                               | Copy This Code                                                                                                                               |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Candy Stripe Dream**\u003cbr/\u003e![Candy Stripe Dream](https://gradient-svg-generator.vercel.app/api/svg?text=Candy%20Stripe%20Dream\u0026template=candy-stripe-dream\u0026height=80) | `![Candy Stripe Dream](https://gradient-svg-generator.vercel.app/api/svg?text=Candy%20Stripe%20Dream\u0026template=candy-stripe-dream\u0026height=80)` |\n| **Zigzag Energy**\u003cbr/\u003e![Zigzag Energy](https://gradient-svg-generator.vercel.app/api/svg?text=Zigzag%20Energy\u0026template=zigzag-energy\u0026height=80)                       | `![Zigzag Energy](https://gradient-svg-generator.vercel.app/api/svg?text=Zigzag%20Energy\u0026template=zigzag-energy\u0026height=80)`                  |\n| **Diamond Grid**\u003cbr/\u003e![Diamond Grid](https://gradient-svg-generator.vercel.app/api/svg?text=Diamond%20Grid\u0026template=diamond-grid\u0026height=80)                           | `![Diamond Grid](https://gradient-svg-generator.vercel.app/api/svg?text=Diamond%20Grid\u0026template=diamond-grid\u0026height=80)`                     |\n| **Heart Beat**\u003cbr/\u003e![Heart Beat](https://gradient-svg-generator.vercel.app/api/svg?text=Heart%20Beat\u0026template=heart-beat\u0026height=80)                                   | `![Heart Beat](https://gradient-svg-generator.vercel.app/api/svg?text=Heart%20Beat\u0026template=heart-beat\u0026height=80)`                           |\n\n\u003c/div\u003e\n\n### ✨ Metallic Effect Templates (8 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                     | Copy This Code                                                                                                                       |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| **Copper Shine**\u003cbr/\u003e![Copper Shine](https://gradient-svg-generator.vercel.app/api/svg?text=Copper%20Shine\u0026template=copper-shine\u0026height=80)                 | `![Copper Shine](https://gradient-svg-generator.vercel.app/api/svg?text=Copper%20Shine\u0026template=copper-shine\u0026height=80)`             |\n| **Gold Shimmer**\u003cbr/\u003e![Gold Shimmer](https://gradient-svg-generator.vercel.app/api/svg?text=Gold%20Shimmer\u0026template=gold-shimmer\u0026height=80)                 | `![Gold Shimmer](https://gradient-svg-generator.vercel.app/api/svg?text=Gold%20Shimmer\u0026template=gold-shimmer\u0026height=80)`             |\n| **Chrome Flow**\u003cbr/\u003e![Chrome Flow](https://gradient-svg-generator.vercel.app/api/svg?text=Chrome%20Flow\u0026template=chrome-flow\u0026height=80)                     | `![Chrome Flow](https://gradient-svg-generator.vercel.app/api/svg?text=Chrome%20Flow\u0026template=chrome-flow\u0026height=80)`                |\n| **Platinum Sparkle**\u003cbr/\u003e![Platinum Sparkle](https://gradient-svg-generator.vercel.app/api/svg?text=Platinum%20Sparkle\u0026template=platinum-sparkle\u0026height=80) | `![Platinum Sparkle](https://gradient-svg-generator.vercel.app/api/svg?text=Platinum%20Sparkle\u0026template=platinum-sparkle\u0026height=80)` |\n\n\u003c/div\u003e\n\n### 📝 Path Text Animation Templates (12 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                               | Copy This Code                                                                                                                               |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Typing Path Reveal**\u003cbr/\u003e![Typing Path Reveal](https://gradient-svg-generator.vercel.app/api/svg?text=Typing%20Path%20Reveal\u0026template=typing-path-reveal\u0026height=80) | `![Typing Path Reveal](https://gradient-svg-generator.vercel.app/api/svg?text=Typing%20Path%20Reveal\u0026template=typing-path-reveal\u0026height=80)` |\n| **Curved Flow**\u003cbr/\u003e![Curved Flow](https://gradient-svg-generator.vercel.app/api/svg?text=Curved%20Flow\u0026template=curved-flow\u0026height=80)                               | `![Curved Flow](https://gradient-svg-generator.vercel.app/api/svg?text=Curved%20Flow\u0026template=curved-flow\u0026height=80)`                        |\n| **Spiral Text**\u003cbr/\u003e![Spiral Text](https://gradient-svg-generator.vercel.app/api/svg?text=Spiral%20Text\u0026template=spiral-text\u0026height=80)                               | `![Spiral Text](https://gradient-svg-generator.vercel.app/api/svg?text=Spiral%20Text\u0026template=spiral-text\u0026height=80)`                        |\n| **Neon Flicker**\u003cbr/\u003e![Neon Flicker](https://gradient-svg-generator.vercel.app/api/svg?text=Neon%20Flicker\u0026template=neon-flicker\u0026height=80)                           | `![Neon Flicker](https://gradient-svg-generator.vercel.app/api/svg?text=Neon%20Flicker\u0026template=neon-flicker\u0026height=80)`                     |\n\n\u003c/div\u003e\n\n### 🔷 Shape Background Templates (25 Templates)\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                         | Copy This Code                                                                                                              |\n| ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| **Liquid Venom**\u003cbr/\u003e![Liquid Venom](https://gradient-svg-generator.vercel.app/api/svg?text=Liquid%20Venom\u0026template=liquid-venom\u0026height=80)     | `![Liquid Venom](https://gradient-svg-generator.vercel.app/api/svg?text=Liquid%20Venom\u0026template=liquid-venom\u0026height=80)`    |\n| **Dreamy Sunset**\u003cbr/\u003e![Dreamy Sunset](https://gradient-svg-generator.vercel.app/api/svg?text=Dreamy%20Sunset\u0026template=dreamy-sunset\u0026height=80) | `![Dreamy Sunset](https://gradient-svg-generator.vercel.app/api/svg?text=Dreamy%20Sunset\u0026template=dreamy-sunset\u0026height=80)` |\n| **Capsule Tech**\u003cbr/\u003e![Capsule Tech](https://gradient-svg-generator.vercel.app/api/svg?text=Capsule%20Tech\u0026template=capsule-tech\u0026height=80)     | `![Capsule Tech](https://gradient-svg-generator.vercel.app/api/svg?text=Capsule%20Tech\u0026template=capsule-tech\u0026height=80)`    |\n| **Ocean Depths**\u003cbr/\u003e![Ocean Depths](https://gradient-svg-generator.vercel.app/api/svg?text=Ocean%20Depths\u0026template=ocean-depths\u0026height=80)     | `![Ocean Depths](https://gradient-svg-generator.vercel.app/api/svg?text=Ocean%20Depths\u0026template=ocean-depths\u0026height=80)`    |\n\n\u003c/div\u003e\n\n### 🔮 Experimental Templates (29 Templates)\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eView Morphing Effects (6 Templates)\u003c/kbd\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                             | Copy This Code                                                                                                                 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |\n| **Liquid Mercury**\u003cbr/\u003e![Liquid Mercury](https://gradient-svg-generator.vercel.app/api/svg?text=Liquid%20Mercury\u0026template=liquid-mercury\u0026height=80) | `![Liquid Mercury](https://gradient-svg-generator.vercel.app/api/svg?text=Liquid%20Mercury\u0026template=liquid-mercury\u0026height=80)` |\n| **Plasma Blob**\u003cbr/\u003e![Plasma Blob](https://gradient-svg-generator.vercel.app/api/svg?text=Plasma%20Blob\u0026template=plasma-blob\u0026height=80)             | `![Plasma Blob](https://gradient-svg-generator.vercel.app/api/svg?text=Plasma%20Blob\u0026template=plasma-blob\u0026height=80)`          |\n| **Quantum Foam**\u003cbr/\u003e![Quantum Foam](https://gradient-svg-generator.vercel.app/api/svg?text=Quantum%20Foam\u0026template=quantum-foam\u0026height=80)         | `![Quantum Foam](https://gradient-svg-generator.vercel.app/api/svg?text=Quantum%20Foam\u0026template=quantum-foam\u0026height=80)`       |\n\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eView Fluid Dynamics (6 Templates)\u003c/kbd\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                                         | Copy This Code                                                                                                                                      |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Turbulent Waves**\u003cbr/\u003e![Turbulent Waves](https://gradient-svg-generator.vercel.app/api/svg?text=Turbulent%20Waves\u0026template=turbulent-waves\u0026height=80)                         | `![Turbulent Waves](https://gradient-svg-generator.vercel.app/api/svg?text=Turbulent%20Waves\u0026template=turbulent-waves\u0026height=80)`                   |\n| **Electromagnetic Field**\u003cbr/\u003e![Electromagnetic Field](https://gradient-svg-generator.vercel.app/api/svg?text=Electromagnetic%20Field\u0026template=electromagnetic-field\u0026height=80) | `![Electromagnetic Field](https://gradient-svg-generator.vercel.app/api/svg?text=Electromagnetic%20Field\u0026template=electromagnetic-field\u0026height=80)` |\n| **Aurora Streams**\u003cbr/\u003e![Aurora Streams](https://gradient-svg-generator.vercel.app/api/svg?text=Aurora%20Streams\u0026template=aurora-streams\u0026height=80)                             | `![Aurora Streams](https://gradient-svg-generator.vercel.app/api/svg?text=Aurora%20Streams\u0026template=aurora-streams\u0026height=80)`                      |\n\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eView Dimensional Portal (8 Templates)\u003c/kbd\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                     | Copy This Code                                                                                                                       |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| **Quantum Tunnel**\u003cbr/\u003e![Quantum Tunnel](https://gradient-svg-generator.vercel.app/api/svg?text=Quantum%20Tunnel\u0026template=quantum-tunnel\u0026height=80)         | `![Quantum Tunnel](https://gradient-svg-generator.vercel.app/api/svg?text=Quantum%20Tunnel\u0026template=quantum-tunnel\u0026height=80)`       |\n| **Wormhole Transit**\u003cbr/\u003e![Wormhole Transit](https://gradient-svg-generator.vercel.app/api/svg?text=Wormhole%20Transit\u0026template=wormhole-transit\u0026height=80) | `![Wormhole Transit](https://gradient-svg-generator.vercel.app/api/svg?text=Wormhole%20Transit\u0026template=wormhole-transit\u0026height=80)` |\n| **Dimensional Rift**\u003cbr/\u003e![Dimensional Rift](https://gradient-svg-generator.vercel.app/api/svg?text=Dimensional%20Rift\u0026template=dimensional-rift\u0026height=80) | `![Dimensional Rift](https://gradient-svg-generator.vercel.app/api/svg?text=Dimensional%20Rift\u0026template=dimensional-rift\u0026height=80)` |\n\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eView Consciousness Stream (9 Templates)\u003c/kbd\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                     | Copy This Code                                                                                                                       |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| **Thought Waves**\u003cbr/\u003e![Thought Waves](https://gradient-svg-generator.vercel.app/api/svg?text=Thought%20Waves\u0026template=thought-waves\u0026height=80)             | `![Thought Waves](https://gradient-svg-generator.vercel.app/api/svg?text=Thought%20Waves\u0026template=thought-waves\u0026height=80)`          |\n| **Memory Fragments**\u003cbr/\u003e![Memory Fragments](https://gradient-svg-generator.vercel.app/api/svg?text=Memory%20Fragments\u0026template=memory-fragments\u0026height=80) | `![Memory Fragments](https://gradient-svg-generator.vercel.app/api/svg?text=Memory%20Fragments\u0026template=memory-fragments\u0026height=80)` |\n| **Dream Logic**\u003cbr/\u003e![Dream Logic](https://gradient-svg-generator.vercel.app/api/svg?text=Dream%20Logic\u0026template=dream-logic\u0026height=80)                     | `![Dream Logic](https://gradient-svg-generator.vercel.app/api/svg?text=Dream%20Logic\u0026template=dream-logic\u0026height=80)`                |\n\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n### 🏷️ GitHub Profile Templates (30 Templates)\n\n#### Shimmer Badges\n\nColored status tags with an animated light sweep — perfect for labeling sections, features, or achievements.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                 | Markdown Code                                                                                                             |\n| ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |\n| ![Best Practice](https://gradient-svg-generator.vercel.app/api/svg?text=Best%20Practice\u0026template=shimmer-red\u0026height=28) | `![Best Practice](https://gradient-svg-generator.vercel.app/api/svg?text=Best%20Practice\u0026template=shimmer-red\u0026height=28)` |\n| ![Implemented](https://gradient-svg-generator.vercel.app/api/svg?text=Implemented\u0026template=shimmer-green\u0026height=28)     | `![Implemented](https://gradient-svg-generator.vercel.app/api/svg?text=Implemented\u0026template=shimmer-green\u0026height=28)`     |\n| ![Workflow](https://gradient-svg-generator.vercel.app/api/svg?text=Workflow\u0026template=shimmer-blue\u0026height=28)            | `![Workflow](https://gradient-svg-generator.vercel.app/api/svg?text=Workflow\u0026template=shimmer-blue\u0026height=28)`            |\n| ![Community](https://gradient-svg-generator.vercel.app/api/svg?text=Community\u0026template=shimmer-gold\u0026height=28)          | `![Community](https://gradient-svg-generator.vercel.app/api/svg?text=Community\u0026template=shimmer-gold\u0026height=28)`          |\n| ![Claude Code](https://gradient-svg-generator.vercel.app/api/svg?text=Claude%20Code\u0026template=shimmer-orange\u0026height=28)  | `![Claude Code](https://gradient-svg-generator.vercel.app/api/svg?text=Claude%20Code\u0026template=shimmer-orange\u0026height=28)`  |\n| ![Beta](https://gradient-svg-generator.vercel.app/api/svg?text=Beta\u0026template=shimmer-purple\u0026height=28)                  | `![Beta](https://gradient-svg-generator.vercel.app/api/svg?text=Beta\u0026template=shimmer-purple\u0026height=28)`                  |\n| ![Advanced](https://gradient-svg-generator.vercel.app/api/svg?text=Advanced\u0026template=shimmer-dark\u0026height=28)            | `![Advanced](https://gradient-svg-generator.vercel.app/api/svg?text=Advanced\u0026template=shimmer-dark\u0026height=28)`            |\n\n\u003c/div\u003e\n\n\u003e Change color: swap the template suffix (`shimmer-red`, `shimmer-green`, `shimmer-blue`, `shimmer-gold`, `shimmer-orange`, `shimmer-purple`, `shimmer-dark`). Change text: edit `text=`.\n\n#### Terminal Typing\n\nmacOS-style terminal window with typing animation and blinking cursor.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                | Markdown Code                                                                                                                      |\n| -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| ![Terminal Purple](https://gradient-svg-generator.vercel.app/api/svg?text=npx%20create-next-app\u0026template=terminal-purple\u0026height=50)    | `![Terminal](https://gradient-svg-generator.vercel.app/api/svg?text=npx%20create-next-app\u0026template=terminal-purple\u0026height=50)`     |\n| ![Terminal Green](https://gradient-svg-generator.vercel.app/api/svg?text=npm%20install%20chromaflow\u0026template=terminal-green\u0026height=50) | `![Terminal](https://gradient-svg-generator.vercel.app/api/svg?text=npm%20install%20chromaflow\u0026template=terminal-green\u0026height=50)` |\n| ![Terminal Blue](https://gradient-svg-generator.vercel.app/api/svg?text=git%20push%20origin%20main\u0026template=terminal-blue\u0026height=50)   | `![Terminal](https://gradient-svg-generator.vercel.app/api/svg?text=git%20push%20origin%20main\u0026template=terminal-blue\u0026height=50)`  |\n\n\u003c/div\u003e\n\n#### Skill Pills\n\nRow of rounded skill pills with shimmer overlay. Separate items with `;` in `text=`.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                            | Markdown Code                                                                                                                 |\n| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| ![Pills Dark](https://gradient-svg-generator.vercel.app/api/svg?text=React;Node.js;Python;Docker\u0026template=pills-dark\u0026height=36)    | `![Skills](https://gradient-svg-generator.vercel.app/api/svg?text=React;Node.js;Python;Docker\u0026template=pills-dark\u0026height=36)` |\n| ![Pills Rainbow](https://gradient-svg-generator.vercel.app/api/svg?text=TypeScript;Go;Rust;Swift\u0026template=pills-rainbow\u0026height=36) | `![Skills](https://gradient-svg-generator.vercel.app/api/svg?text=TypeScript;Go;Rust;Swift\u0026template=pills-rainbow\u0026height=36)` |\n| ![Pills Blue](https://gradient-svg-generator.vercel.app/api/svg?text=AWS;GCP;Azure\u0026template=pills-blue\u0026height=36)                  | `![Skills](https://gradient-svg-generator.vercel.app/api/svg?text=AWS;GCP;Azure\u0026template=pills-blue\u0026height=36)`               |\n| ![Pills Purple](https://gradient-svg-generator.vercel.app/api/svg?text=Claude;GPT;Gemini\u0026template=pills-purple\u0026height=36)          | `![Skills](https://gradient-svg-generator.vercel.app/api/svg?text=Claude;GPT;Gemini\u0026template=pills-purple\u0026height=36)`         |\n\n\u003c/div\u003e\n\n#### Shimmer Banners\n\nWide announcement bars with animated shimmer sweep.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                  | Markdown Code                                                                                                                                         |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ![Banner Orange](https://gradient-svg-generator.vercel.app/api/svg?text=Developed%20by%20Claude%20Code\u0026template=banner-orange\u0026height=32)                 | `![Banner](https://gradient-svg-generator.vercel.app/api/svg?text=Developed%20by%20Claude%20Code\u0026template=banner-orange\u0026height=32)`                   |\n| ![Banner Dark](https://gradient-svg-generator.vercel.app/api/svg?text=Now%20Available%20on%20npm\u0026template=banner-dark\u0026height=32)                         | `![Banner](https://gradient-svg-generator.vercel.app/api/svg?text=Now%20Available%20on%20npm\u0026template=banner-dark\u0026height=32)`                         |\n| ![Banner Blue](https://gradient-svg-generator.vercel.app/api/svg?text=Star%20this%20repo%20if%20you%20find%20it%20useful\u0026template=banner-blue\u0026height=32) | `![Banner](https://gradient-svg-generator.vercel.app/api/svg?text=Star%20this%20repo%20if%20you%20find%20it%20useful\u0026template=banner-blue\u0026height=32)` |\n| ![Banner Red](https://gradient-svg-generator.vercel.app/api/svg?text=Breaking%20Changes%20in%20v2.0\u0026template=banner-red\u0026height=32)                       | `![Banner](https://gradient-svg-generator.vercel.app/api/svg?text=Breaking%20Changes%20in%20v2.0\u0026template=banner-red\u0026height=32)`                      |\n\n\u003c/div\u003e\n\n#### Shimmer Text\n\nText with an animated internal gradient highlight — ideal for titles and headings.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                  | Markdown Code                                                                                                                       |\n| ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| ![Purple Shimmer](https://gradient-svg-generator.vercel.app/api/svg?text=Software%20Architect\u0026template=text-shimmer-purple\u0026height=40)    | `![Title](https://gradient-svg-generator.vercel.app/api/svg?text=Software%20Architect\u0026template=text-shimmer-purple\u0026height=40)`      |\n| ![Blue Shimmer](https://gradient-svg-generator.vercel.app/api/svg?text=Full%20Stack%20Developer\u0026template=text-shimmer-blue\u0026height=40)    | `![Title](https://gradient-svg-generator.vercel.app/api/svg?text=Full%20Stack%20Developer\u0026template=text-shimmer-blue\u0026height=40)`    |\n| ![Gold Shimmer](https://gradient-svg-generator.vercel.app/api/svg?text=Open%20Source%20Contributor\u0026template=text-shimmer-gold\u0026height=40) | `![Title](https://gradient-svg-generator.vercel.app/api/svg?text=Open%20Source%20Contributor\u0026template=text-shimmer-gold\u0026height=40)` |\n\n\u003c/div\u003e\n\n#### Gold Badges\n\nLuxury metallic badges with shimmer sweep and pulsing diamond accents.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                  | Markdown Code                                                                                                          |\n| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |\n| ![Gold Luxury](https://gradient-svg-generator.vercel.app/api/svg?text=Featured%20Project\u0026template=gold-luxury\u0026height=40) | `![Badge](https://gradient-svg-generator.vercel.app/api/svg?text=Featured%20Project\u0026template=gold-luxury\u0026height=40)`   |\n| ![Platinum](https://gradient-svg-generator.vercel.app/api/svg?text=Enterprise%20Ready\u0026template=gold-platinum\u0026height=40)  | `![Badge](https://gradient-svg-generator.vercel.app/api/svg?text=Enterprise%20Ready\u0026template=gold-platinum\u0026height=40)` |\n| ![Rose Gold](https://gradient-svg-generator.vercel.app/api/svg?text=Premium%20Quality\u0026template=gold-rose\u0026height=40)      | `![Badge](https://gradient-svg-generator.vercel.app/api/svg?text=Premium%20Quality\u0026template=gold-rose\u0026height=40)`      |\n\n\u003c/div\u003e\n\n#### Social / Achievement Badges\n\nWide achievement badges for showcasing milestones, trending status, or social proof.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                                                  | Markdown Code                                                                                                                                        |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ![Trending](https://gradient-svg-generator.vercel.app/api/svg?text=GitHub%20Monthly%20Trending%20%C2%B7%20Mar%202026\u0026template=social-trending\u0026height=32) | `![Trending](https://gradient-svg-generator.vercel.app/api/svg?text=GitHub%20Monthly%20Trending\u0026template=social-trending\u0026height=32)`                 |\n| ![Achievement Red](https://gradient-svg-generator.vercel.app/api/svg?text=Top%201%25%20Poster%20on%20Reddit\u0026template=social-achievement-red\u0026height=32)   | `![Achievement](https://gradient-svg-generator.vercel.app/api/svg?text=Top%201%25%20Poster%20on%20Reddit\u0026template=social-achievement-red\u0026height=32)` |\n| ![Achievement Blue](https://gradient-svg-generator.vercel.app/api/svg?text=500%2B%20Stars%20on%20GitHub\u0026template=social-achievement-blue\u0026height=32)      | `![Achievement](https://gradient-svg-generator.vercel.app/api/svg?text=500%2B%20Stars%20on%20GitHub\u0026template=social-achievement-blue\u0026height=32)`     |\n| ![Achievement Green](https://gradient-svg-generator.vercel.app/api/svg?text=100%25%20Test%20Coverage\u0026template=social-achievement-green\u0026height=32)        | `![Achievement](https://gradient-svg-generator.vercel.app/api/svg?text=100%25%20Test%20Coverage\u0026template=social-achievement-green\u0026height=32)`        |\n\n\u003c/div\u003e\n\n#### Repo Cards\n\nGitHub-style two-panel cards with icon area, repo name, and shimmer overlay.\n\n\u003cdiv align=\"center\"\u003e\n\n| Preview                                                                                                                   | Markdown Code                                                                                                          |\n| ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| ![Repo Dark](https://gradient-svg-generator.vercel.app/api/svg?text=my-awesome-project\u0026template=repo-card-dark\u0026height=48) | `![Repo](https://gradient-svg-generator.vercel.app/api/svg?text=my-awesome-project\u0026template=repo-card-dark\u0026height=48)` |\n| ![Repo Blue](https://gradient-svg-generator.vercel.app/api/svg?text=chromaflow\u0026template=repo-card-blue\u0026height=48)         | `![Repo](https://gradient-svg-generator.vercel.app/api/svg?text=chromaflow\u0026template=repo-card-blue\u0026height=48)`         |\n\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eCustom GitHub Profile Effects via gradientType parameter\u003c/kbd\u003e\u003c/summary\u003e\n\n```markdown\n\u003c!-- Shimmer badge with custom color --\u003e\n\n![Custom](https://gradient-svg-generator.vercel.app/api/svg?text=Your%20Label\u0026gradientType=shimmerBadge\u0026color0=ff6b6b\u0026height=28)\n\n\u003c!-- Terminal with custom prompt color --\u003e\n\n![Terminal](https://gradient-svg-generator.vercel.app/api/svg?text=docker%20compose%20up\u0026gradientType=terminalTyping\u0026color0=22c55e\u0026height=50)\n\n\u003c!-- Skill pills with custom colors per pill --\u003e\n\n![Skills](https://gradient-svg-generator.vercel.app/api/svg?text=React;Vue;Angular\u0026gradientType=skillPills\u0026color0=61dafb\u0026color1=4fc08d\u0026color2=dd0031\u0026height=36)\n\n\u003c!-- Shimmer text with base + accent color --\u003e\n\n![Title](https://gradient-svg-generator.vercel.app/api/svg?text=Your%20Title\u0026gradientType=shimmerText\u0026color0=1f2937\u0026color1=f59e0b\u0026height=40)\n\n\u003c!-- Gold badge with custom gold tones --\u003e\n\n![Gold](https://gradient-svg-generator.vercel.app/api/svg?text=Award%20Winner\u0026gradientType=goldBadge\u0026color0=b8860b\u0026color1=daa520\u0026color2=ffd700\u0026height=44)\n\n\u003c!-- Social badge — auto light/dark text based on background --\u003e\n\n![Social](https://gradient-svg-generator.vercel.app/api/svg?text=10K%20Downloads\u0026gradientType=socialBadge\u0026color0=16a34a\u0026height=32)\n\n\u003c!-- Repo card with custom panel colors --\u003e\n\n![Repo](https://gradient-svg-generator.vercel.app/api/svg?text=project-name\u0026gradientType=repoCard\u0026color0=1e3a5f\u0026color1=e8f0fe\u0026height=56)\n```\n\n\u003c/details\u003e\n\n---\n\n## 🔧 API Reference\n\n**Endpoint:** `https://gradient-svg-generator.vercel.app/api/svg`  \n**Interactive docs:** [/api-docs](https://gradient-svg-generator.vercel.app/api-docs)\n\n### Query Parameters\n\n| Parameter             | Type   | Default      | Description                                    | Example                       |\n| --------------------- | ------ | ------------ | ---------------------------------------------- | ----------------------------- |\n| `text`                | string | _(optional)_ | Display text                                   | `text=Hello%20World`          |\n| `height`              | number | `120`        | SVG height in pixels (1–10000)                 | `height=150`                  |\n| `template`            | string | —            | Template name                                  | `template=neural-network`     |\n| `gradientType`        | string | `horizontal` | Effect style (default when no template is set) | `gradientType=spiral`         |\n| `duration`            | string | `6s`         | Animation duration (CSS time)                  | `duration=8s`                 |\n| `animation`           | string | `none`       | Animation mode                                 | `animation=pulse`             |\n| `stroke`              | string | —            | Text stroke color (hex without `#`)            | `stroke=ffffff`               |\n| `strokeWidth`         | number | `0`          | Text stroke width                              | `strokeWidth=2`               |\n| `textBg`              | string | —            | Background color behind text                   | `textBg=000000`               |\n| `rotate`              | number | `0`          | Rotation in degrees                            | `rotate=45`                   |\n| `color0`, `color1`, … | string | `000000`     | Gradient colors — collected sequentially       | `color0=ff0000\u0026color1=00ff00` |\n\nMalformed values (e.g. `height=abc`) return **HTTP 400** with `X-Error-Code: INVALID_QUERY`.\n\n### Available Gradient Types\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eFull list of 176 gradientType values\u003c/kbd\u003e\u003c/summary\u003e\n\n```javascript\n// Basic Types (7)\n('linear', 'radial', 'conic', 'diamond', 'reflected', 'square', 'ellipse');\n\n// Text Effects (5)\n('luminance', 'rainbow', 'textBox', 'glitch', 'typewriter');\n\n// Future Tech (6)\n('hologram', 'quantum', 'laserGrid', 'neuralNet', 'plasma', 'dataStream');\n\n// Artistic (7)\n('watercolor', 'oilPaint', 'inkSplash', 'mosaic', 'abstractGeo', 'graffiti', 'vintage');\n\n// Luxury Materials (7)\n('goldFoil', 'diamond', 'marble', 'platinum', 'roseGold', 'crystal', 'velvet');\n\n// Organic Nature (8)\n('flowingWater', 'flame', 'clouds', 'aurora', 'oceanWaves', 'forest', 'lightning', 'mountainMist');\n\n// Gaming Effects (8)\n('pixelArt',\n  'neonArcade',\n  'energyBlast',\n  'speedLines',\n  'bossBattle',\n  'powerUp',\n  'cyberpunk',\n  'retroWave');\n\n// Morphing Effects (6)\n('liquidMorphing',\n  'plasmaMorphing',\n  'cosmicMorphing',\n  'bioMorphing',\n  'quantumMorphing',\n  'lavaMorphing');\n\n// Fluid Dynamics (6)\n('turbulentWaves',\n  'electromagneticWaves',\n  'auroraWaves',\n  'soundWaves',\n  'cryogenicWaves',\n  'solarWaves');\n\n// Dimensional Effects (6)\n('portalDistortion',\n  'hypercubeProjection',\n  'wormholeEffect',\n  'fractalDimension',\n  'multiverseOverlap',\n  'realityDistortion');\n\n// Dimensional Portal (7)\n('quantumTunnel',\n  'parallelDimension',\n  'wormholePortal',\n  'dimensionalTear',\n  'holographicGrid',\n  'voidDistortion',\n  'astralPlane');\n\n// Digital Life (8)\n('aiConsciousness',\n  'bioDigitalMerge',\n  'quantumDNA',\n  'digitalEvolution',\n  'syntheticSoul',\n  'cyberSymbiosis',\n  'neuralStorm',\n  'digitalGenome');\n\n// Cyber Aesthetics (9)\n('neonCityscape',\n  'dataMatrix',\n  'cyberpunkShadow',\n  'holographicUI',\n  'pixelCorruption',\n  'chromeFinish',\n  'viralSpread',\n  'encryptionField',\n  'arOverlay');\n\n// Consciousness Stream (9)\n('thoughtWaves',\n  'memoryFragments',\n  'dreamLogic',\n  'emotionalSpectrum',\n  'meditativeCalm',\n  'anxietySpiral',\n  'egoDissolution',\n  'psychedelicInsight',\n  'collectiveUnconscious');\n\n// Weather \u0026 Atmosphere (7)\n('fogRolling',\n  'monsoonRain',\n  'snowfallDrift',\n  'sandstormSwirl',\n  'tornadoVortex',\n  'lightningWeb',\n  'prismRefraction');\n\n// Light \u0026 Shadow (7)\n('causticUnderwater',\n  'venetianBlind',\n  'stainedGlass',\n  'lensFlare',\n  'bokehBlur',\n  'godRays',\n  'eclipseCorona');\n\n// Art Movements (7)\n('artNouveauFlow',\n  'artDecoLuxury',\n  'bauhausMinimal',\n  'impressionistDots',\n  'cubistFragments',\n  'surrealistMelt',\n  'popArtHalftone');\n\n// Culinary \u0026 Liquid (7)\n('coffeeCream',\n  'winePour',\n  'honeyDrizzle',\n  'chocolateMelt',\n  'caramelSwirl',\n  'tieDye',\n  'marbleMixing');\n\n// Pattern Based (8)\n('candystripe',\n  'patternZigzag',\n  'diamondPattern',\n  'heartsPattern',\n  'checkered',\n  'diagonalFlow',\n  'geometricPulse',\n  'patternWave');\n\n// Metallic Effects (9)\n('copperMetallic',\n  'shineShimmer',\n  'neonPulse',\n  'aquaFlow',\n  'sparkleEffect',\n  'chromeFlow',\n  'bronzeGleam',\n  'platinumSparkle',\n  'steelAqua');\n\n// Path Text Animation (12)\n('typingPathReveal',\n  'curvedFlow',\n  'spiralText',\n  'waveTextPath',\n  'charByChar',\n  'wordCascade',\n  'lineSequence',\n  'fadeInPath',\n  'handwriting',\n  'brushStroke',\n  'neonFlicker',\n  'elasticBounce');\n\n// Blob \u0026 Shape Effects (8)\n('blobMorph',\n  'liquidBlob',\n  'organicBlob',\n  'layeredWaves',\n  'blurMotion',\n  'dreamyCircles',\n  'abstractBlur');\n\n// Shape Backgrounds (7)\n('cylinder', 'softRounded', 'eggShape', 'sliceShape', 'speechBubble', 'sharkTeeth', 'largeRounded');\n\n// GitHub Profile Effects (8)\n('shimmerBadge',\n  'terminalTyping',\n  'skillPills',\n  'shimmerBanner',\n  'shimmerText',\n  'goldBadge',\n  'socialBadge',\n  'repoCard');\n```\n\n\u003c/details\u003e\n\n---\n\n## For Developers\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch3 style=\"display:inline\"\u003e💻 Local Development \u0026 Self-Hosting\u003c/h3\u003e\u003c/summary\u003e\n\n### Prerequisites\n\n- **Node.js 20+** (see `.nvmrc` — pinned engine in `package.json`)\n- **npm** (preferred — lockfile is committed) or pnpm/yarn\n\n### Quick Setup\n\n```bash\ngit clone https://github.com/ChanMeng666/gradient-svg-generator.git\ncd gradient-svg-generator\nnpm install\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n### Common Commands\n\n```bash\nnpm run dev             # Next.js dev server on :3000\nnpm run build           # Production build\nnpm start               # Run production build\nnpm run typecheck       # tsc --noEmit (strict mode)\nnpm run lint            # ESLint 9 flat config\nnpm run format          # Prettier write\nnpm run test            # Full Vitest run\nnpm run test:watch      # Vitest watch mode\nnpm run test:contract   # SVG byte-parity snapshot tests (the public-API gate)\nnpm run create:effect   # Scaffold a new effect + manifest + template stub\n```\n\n### Deployment\n\n**Vercel (one-click):**\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fgradient-svg-generator)\n\n**Vercel (CLI):**\n\n```bash\nnpm i -g vercel\nvercel --prod\n```\n\n**Docker:**\n\n```bash\ndocker build -t gradient-svg-generator .\ndocker run -p 3000:3000 gradient-svg-generator\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch3 style=\"display:inline\"\u003e🛠️ Tech Stack\u003c/h3\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/nextdotjs\" width=\"48\" height=\"48\" alt=\"Next.js\" /\u003e\n        \u003cbr\u003eNext.js 16\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/react\" width=\"48\" height=\"48\" alt=\"React\" /\u003e\n        \u003cbr\u003eReact 19\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/typescript\" width=\"48\" height=\"48\" alt=\"TypeScript\" /\u003e\n        \u003cbr\u003eTypeScript 5.4\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/tailwindcss\" width=\"48\" height=\"48\" alt=\"Tailwind\" /\u003e\n        \u003cbr\u003eTailwind v4\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/zod\" width=\"48\" height=\"48\" alt=\"Zod\" /\u003e\n        \u003cbr\u003eZod 3\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/vitest\" width=\"48\" height=\"48\" alt=\"Vitest\" /\u003e\n        \u003cbr\u003eVitest\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/vercel\" width=\"48\" height=\"48\" alt=\"Vercel\" /\u003e\n        \u003cbr\u003eVercel\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n**Frontend Stack:**\n\n- **Framework**: Next.js 16 (Pages Router) with SSR for `/api/svg`\n- **UI Library**: React 19 with Hooks and Server Components where available\n- **Language**: TypeScript 5.4 (`strict: true`, `allowJs: true` for gradual migration)\n- **Styling**: Tailwind CSS v4 (CSS-first `@theme` in `globals.css`) + CSS Modules + shadcn/ui primitives\n- **Icons**: Lucide React + React Icons\n- **State Management**: Zustand v5 split across 3 slices (`config`, `template`, `ui`) with persistence\n- **Animation**: Framer Motion (UI) + native CSS/SVG SMIL (gradient effects)\n- **Data / Search**: `@tanstack/react-query`, `@tanstack/react-virtual`, `fuse.js`\n\n**Backend / API Stack:**\n\n- **Runtime**: Node.js 20+ on Next.js API Routes (serverless on Vercel)\n- **SVG Engine**: Custom `UnifiedGradientGenerator` → `EffectRegistry` → `SVGComposer` pipeline\n- **Validation**: **Zod** schemas at the API boundary (`src/core/schema/api.schema.ts`)\n- **Observability**: Per-request `X-Request-ID`, `X-Error-Code` headers, structured console logs\n- **Filters**: 12 per-primitive modules under `src/core/filters/` (blur, turbulence, glow, lighting, …)\n\n**Quality \u0026 Tooling:**\n\n- **Testing**: Vitest + jsdom + Testing Library + contract snapshot harness\n- **Lint / Format**: ESLint 9 (flat config) + typescript-eslint + Prettier\n- **Pre-commit**: Husky + lint-staged (`eslint --fix` + `prettier --write`)\n- **Scaffolding**: `npm run create:effect` — generates effect + manifest + template stub\n\n**DevOps \u0026 Deployment:**\n\n- **Deployment**: [Vercel](https://gradient-svg-generator.vercel.app) (primary) · Docker · any Node 20+ host\n- **Performance**: Vercel Edge Network CDN · immutable caching on template outputs\n- **PWA**: Service Worker v3 (`public/sw.js`) caches static shell; `/api/*` is never cached\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch3 style=\"display:inline\"\u003e🏗️ Architecture\u003c/h3\u003e\u003c/summary\u003e\n\n\u003e See [`docs/architecture.md`](./docs/architecture.md) and [`docs/REFACTORING_SUMMARY.md`](./docs/REFACTORING_SUMMARY.md) for the full story.\n\n### Request Lifecycle\n\n```mermaid\nflowchart TB\n    Client[\"Embedded \u0026lt;img\u0026gt; tag\u003cbr/\u003e(GitHub README, blog, etc.)\"]\n    API[\"src/pages/api/svg.ts\u003cbr/\u003eTyped handler · Zod validation · X-Request-ID\"]\n    Schema[\"SvgQuerySchema (Zod)\u003cbr/\u003esrc/core/schema/api.schema.ts\"]\n    UGG[\"UnifiedGradientGenerator.js\u003cbr/\u003eOrchestrator\"]\n    TR[\"TemplateRegistry.js\u003cbr/\u003eStatic imports · CATEGORY_REGISTRY\"]\n    ER[\"EffectRegistry.js\u003cbr/\u003ename → generator\"]\n    Gen[\"Effect generator\u003cbr/\u003e(src/utils/gradientGenerators/*.js)\"]\n    SC[\"SVGComposer.js\u003cbr/\u003eFinal SVG assembly\"]\n    Filters[\"src/core/filters/*\u003cbr/\u003eblur · turbulence · glow · lighting · …\"]\n    Headers[\"setAiFriendlyHeaders()\u003cbr/\u003eCache-Control immutable · X-API-Usage · X-Request-ID\"]\n\n    Client --\u003e|\"GET /api/svg?text=Hi\u0026template=aurora-borealis\"| API\n    API --\u003e|safeParse| Schema\n    Schema --\u003e|valid| UGG\n    Schema -.-\u003e|invalid| Reject[\"400 + X-Error-Code: INVALID_QUERY\"]\n    UGG --\u003e|getTemplate| TR\n    TR --\u003e|colors · gradientType · duration| UGG\n    UGG --\u003e|get effect| ER\n    ER --\u003e|generator ref| UGG\n    UGG --\u003e|generate| Gen\n    Gen --\u003e|gradientDef · elements| SC\n    SC --\u003e|getAllFilters| Filters\n    SC --\u003e|SVG string| UGG\n    UGG --\u003e Headers\n    Headers --\u003e|\"Content-Type: image/svg+xml\"| Client\n```\n\n### Feature-Sliced Architecture\n\nEach gradient category is a **vertical slice** under `src/features/\u003cname\u003e/`:\n\n```mermaid\nflowchart LR\n    subgraph features[\"src/features/ — 19 categories + _shared\"]\n        direction TB\n        Manifest[\"effect.js\u003cbr/\u003eeffect metadata · generator refs\"]\n        Templates[\"templates.js\u003cbr/\u003ecolors · gradientType · duration\"]\n        Palettes[\"_shared/palettes.js\u003cbr/\u003epride · rainbow · seasonal\"]\n        Primitives[\"_shared/svgPrimitives.js\u003cbr/\u003eanimatedLinearGradient · animatedRadialGradient\"]\n    end\n\n    subgraph generators[\"src/utils/gradientGenerators/ — 22 files\"]\n        BasicGen[\"basicGradients.js\"]\n        ArtGen[\"artisticGradients.js\"]\n        OrgGen[\"organicGradients.js\"]\n        OtherGen[\"…19 more\"]\n    end\n\n    subgraph core[\"src/core/\"]\n        UGG2[\"UnifiedGradientGenerator\"]\n        ER2[\"EffectRegistry\"]\n        TR2[\"TemplateRegistry\"]\n        FL[\"filters/ — 12 modules\"]\n        SCH[\"schema/ — Zod schemas\"]\n    end\n\n    Manifest --\u003e ER2\n    Templates --\u003e TR2\n    Templates --\u003e Palettes\n    Manifest --\u003e generators\n    generators --\u003e Primitives\n    UGG2 --\u003e ER2\n    UGG2 --\u003e TR2\n    UGG2 --\u003e FL\n```\n\n### Project Structure\n\n```\ngradient-svg-generator/\n├── src/\n│   ├── pages/                      # Next.js pages — all .tsx post-Phase 7\n│   │   ├── _app.tsx / _document.tsx\n│   │   ├── index.tsx               # Home\n│   │   ├── create.tsx              # Full editor\n│   │   ├── templates.tsx           # Gallery (virtualized)\n│   │   ├── api-docs.tsx            # API reference\n│   │   └── api/svg.ts              # Typed handler + Zod validation\n│   ├── core/                       # SVG engine — legacy JS for parity\n│   │   ├── UnifiedGradientGenerator.js\n│   │   ├── EffectRegistry.js\n│   │   ├── TemplateRegistry.js\n│   │   ├── SVGComposer.js\n│   │   ├── filters/                # 12 per-primitive modules\n│   │   └── schema/                 # Zod schemas (TypeScript)\n│   ├── features/                   # 19 vertical slices + _shared/\n│   │   ├── basic · pride · nature · tech · art\n│   │   ├── luxury · gaming · material · animation\n│   │   ├── fluids · specialty · lightShadow\n│   │   ├── pattern · metallic · pathText · shape\n│   │   ├── emotion · culinaryLiquid · githubProfile\n│   │   └── _shared/palettes.js · svgPrimitives.js\n│   ├── utils/gradientGenerators/   # 22 generator files\n│   ├── components/                 # 20 .tsx + 1 .ts\n│   ├── hooks/                      # 8 hooks, all TypeScript\n│   ├── store/                      # Zustand v5 — 3 slices\n│   └── config/                     # gradientConfig.js (176 types)\n├── tests/\n│   ├── contract/svg-parity.test.ts # ~72 URL byte-parity snapshots\n│   └── unit/\n└── docs/\n    ├── architecture.md\n    └── adding-an-effect.md\n```\n\n### Module Responsibilities\n\n| Module                                 | Language | Purpose                                                   |\n| -------------------------------------- | -------- | --------------------------------------------------------- |\n| `src/pages/api/svg.ts`                 | TS       | HTTP entry point. Zod validation, error codes, request ID |\n| `src/core/schema/api.schema.ts`        | TS       | Runtime query contract                                    |\n| `src/core/UnifiedGradientGenerator`    | JS       | Orchestration between template/effect lookup + composer   |\n| `src/core/EffectRegistry`              | JS       | `registerEffect()` / `getEffect()` / category indexing    |\n| `src/core/TemplateRegistry`            | JS       | Static imports of all 19 feature template modules         |\n| `src/core/SVGComposer`                 | JS       | Assembles SVG string with filters + animations            |\n| `src/core/filters/*`                   | JS       | Per-primitive filter factories                            |\n| `src/utils/gradientGenerators/*`       | JS       | 22 category-scoped gradient generator implementations     |\n| `src/features/\u003ccategory\u003e/effect.js`    | JS       | Feature manifest — declarative effect registration        |\n| `src/features/\u003ccategory\u003e/templates.js` | JS       | Array of template entries `{name, label, colors, …}`      |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch3 style=\"display:inline\"\u003e🧪 Testing\u003c/h3\u003e\u003c/summary\u003e\n\nThe test strategy has two layers: **unit tests** for generators/schemas and a **contract snapshot harness** that guards the public SVG output.\n\n```mermaid\nflowchart LR\n    subgraph unit[\"tests/unit/\"]\n        U1[\"api-svg-schema.test.ts\u003cbr/\u003eZod validation rules\"]\n        U2[\"githubProfileGradients.test.ts\"]\n    end\n\n    subgraph contract[\"tests/contract/\"]\n        C1[\"svg-parity.test.ts\u003cbr/\u003e~72 representative URLs\"]\n        C2[\"__snapshots__/\u003cbr/\u003ebyte-identical SVG output\"]\n        C1 --\u003e C2\n    end\n\n    subgraph tooling[\"Vitest runtime\"]\n        V1[\"jsdom environment\"]\n        V2[\"tests/setup.ts\"]\n        V3[\"v8 coverage · html + lcov reporters\"]\n    end\n\n    U1 --\u003e tooling\n    U2 --\u003e tooling\n    C1 --\u003e tooling\n```\n\n`tests/contract/svg-parity.test.ts` hits ~72 representative URLs through the handler, normalizes auto-generated IDs to stable markers, and snapshots the resulting SVG. Any refactor that changes an existing template's byte output fails CI.\n\n```bash\nnpm run test:contract   # Run the parity gate\nnpm run test            # Full Vitest run (unit + contract)\nnpm run test:watch      # Watch mode\nnpm run test:ui         # Vitest UI\n```\n\nWhen adding a new effect: additive changes are safe. Refactors that touch shared code must preserve bytes — update snapshots deliberately, never with `--update` as a reflex.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch3 style=\"display:inline\"\u003e⌨️ Development Guide\u003c/h3\u003e\u003c/summary\u003e\n\n### Adding a New Template\n\nTemplates live co-located with their generator. Add an entry to the relevant feature folder:\n\n```javascript\n// src/features/tech/templates.js\nimport { palettes } from '../_shared/palettes';\n\nexport default [\n  // ... existing entries\n  {\n    name: 'my-awesome-template',\n    label: 'My Awesome Template',\n    colors: ['ff0080', '7928ca', '0070f3'],\n    gradientType: 'hologram',\n    animationDuration: '6s',\n    description: 'A futuristic gradient with hologram effect',\n  },\n];\n```\n\nThe template auto-registers via `CATEGORY_REGISTRY` in `src/core/TemplateRegistry.js`.\n\n### Adding a New Effect / Gradient Type\n\nThe fastest path is the scaffolding CLI:\n\n```bash\nnpm run create:effect\n# Prompts for category, effect name, and seed template.\n# Generates: effect manifest + generator stub + template entry\n```\n\nManual path:\n\n1. **Generator** — add/extend a file in `src/utils/gradientGenerators/`\n2. **Manifest** — register in `src/features/\u003ccategory\u003e/effect.js`\n3. **Config** — add to `GRADIENT_TYPES` in `src/config/gradientConfig.js` (if UI-selectable)\n4. **Run** `npm run test:contract` to ensure no existing URLs regress\n\nSee [`docs/adding-an-effect.md`](./docs/adding-an-effect.md) for the complete walkthrough.\n\n### Adding a New Feature Category\n\n1. Create `src/features/\u003cname\u003e/effect.js` with a manifest\n2. Create `src/features/\u003cname\u003e/templates.js` with initial entries\n3. Update the three position-indexed tables:\n   - `src/core/TemplateRegistry.js` → `CATEGORY_REGISTRY`\n   - `src/data/templateCategories.js` → sidebar array\n   - `src/utils/templateUtils.js` → `categoryMap`\n4. Add to the barrel export in `src/features/index.js`\n\n### Conventional Commits\n\n```\nfeat(phase-7.8): Zod-validate /api/svg query params + 400 on bad height\nrefactor(phase-7.7): drop orphaned CSS (2 files, -191 LOC)\nfix: ...\ndocs: ...\nchore: ...\n```\n\nHusky pre-commit hooks run `eslint --fix` and `prettier --write` on staged files via `lint-staged`.\n\n### Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-template`)\n3. Make your changes with proper documentation\n4. Run `npm run test:contract` to verify no regressions\n5. Submit a pull request with a clear description\n\nFor major changes, open an issue first to discuss your ideas.\n\nAreas for contribution: new template designs, additional gradient types, UI/UX improvements, performance optimizations, documentation, bug fixes.\n\n\u003c/details\u003e\n\n---\n\n## 📄 License\n\nMIT License — see the [LICENSE](LICENSE) file for details.\n\n**Author:** [Chan Meng](https://github.com/ChanMeng666) · [chanmeng.dev@gmail.com](mailto:chanmeng.dev@gmail.com) · [chanmeng.org](https://chanmeng.org/)\n\n---\n\n\u003c!-- LINK DEFINITIONS --\u003e\n\n[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square\n\n\u003c!-- Project Links --\u003e\n\n[live-demo]: https://gradient-svg-generator.vercel.app\n[settings-panel]: https://gradient-svg-generator.vercel.app/create\n[template-gallery]: https://gradient-svg-generator.vercel.app/templates\n[api-docs]: https://gradient-svg-generator.vercel.app/api-docs\n[architecture-doc]: ./docs/architecture.md\n\n\u003c!-- GitHub Links --\u003e\n\n[github-issues-link]: https://github.com/ChanMeng666/gradient-svg-generator/issues\n[github-stars-link]: https://github.com/ChanMeng666/gradient-svg-generator/stargazers\n[github-forks-link]: https://github.com/ChanMeng666/gradient-svg-generator/forks\n[github-contributors-link]: https://github.com/ChanMeng666/gradient-svg-generator/contributors\n[github-release-link]: https://github.com/ChanMeng666/gradient-svg-generator/releases\n[github-license-link]: https://github.com/ChanMeng666/gradient-svg-generator/blob/main/LICENSE\n\n\u003c!-- Shield Badges --\u003e\n\n[github-release-shield]: https://img.shields.io/github/v/release/ChanMeng666/gradient-svg-generator?color=369eff\u0026labelColor=black\u0026logo=github\u0026style=flat-square\n[vercel-shield]: https://img.shields.io/badge/vercel-online-55b467?labelColor=black\u0026logo=vercel\u0026style=flat-square\n[github-contributors-shield]: https://img.shields.io/github/contributors/ChanMeng666/gradient-svg-generator?color=c4f042\u0026labelColor=black\u0026style=flat-square\n[github-forks-shield]: https://img.shields.io/github/forks/ChanMeng666/gradient-svg-generator?color=8ae8ff\u0026labelColor=black\u0026style=flat-square\n[github-stars-shield]: https://img.shields.io/github/stars/ChanMeng666/gradient-svg-generator?color=ffcb47\u0026labelColor=black\u0026style=flat-square\n[github-issues-shield]: https://img.shields.io/github/issues/ChanMeng666/gradient-svg-generator?color=ff80eb\u0026labelColor=black\u0026style=flat-square\n[github-license-shield]: https://img.shields.io/badge/license-MIT-white?labelColor=black\u0026style=flat-square\n\n\u003c!-- Vercel --\u003e\n\n[vercel-link]: https://gradient-svg-generator.vercel.app\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Fgradient-svg-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanmeng666%2Fgradient-svg-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Fgradient-svg-generator/lists"}