{"id":14006968,"url":"https://github.com/ruucm/shadergradient","last_synced_at":"2025-05-15T02:07:48.682Z","repository":{"id":37859949,"uuid":"482297518","full_name":"ruucm/shadergradient","owner":"ruucm","description":"Create beautiful moving gradients on Framer, Figma and React","archived":false,"fork":false,"pushed_at":"2025-04-27T10:48:22.000Z","size":77875,"stargazers_count":968,"open_issues_count":20,"forks_count":47,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-27T11:41:59.675Z","etag":null,"topics":["figma-plugin","framer","glsl-shaders","gradient","reactjs","threejs"],"latest_commit_sha":null,"homepage":"https://shadergradient.co","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruucm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-04-16T15:58:05.000Z","updated_at":"2025-04-27T06:04:29.000Z","dependencies_parsed_at":"2024-09-24T06:30:46.913Z","dependency_job_id":"43579503-6d41-4213-91ee-0618e3ed5a47","html_url":"https://github.com/ruucm/shadergradient","commit_stats":{"total_commits":973,"total_committers":7,"mean_commits":139.0,"dds":0.1428571428571429,"last_synced_commit":"d446ba0bd5360360b8f6264ec9323a3c883320b0"},"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruucm%2Fshadergradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruucm%2Fshadergradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruucm%2Fshadergradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruucm%2Fshadergradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruucm","download_url":"https://codeload.github.com/ruucm/shadergradient/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259383,"owners_count":22040820,"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":["figma-plugin","framer","glsl-shaders","gradient","reactjs","threejs"],"created_at":"2024-08-10T10:01:44.094Z","updated_at":"2025-05-15T02:07:43.672Z","avatar_url":"https://github.com/ruucm.png","language":"TypeScript","readme":"# Shader Gradient\n\nCustomizable 3D, moving gradient package for React. Also available on modern design tools like Figma and Framer.\n\n![Intro](./intro.gif)\n\n# Table of contents\n\n- 📦 [Installation](#installation)\n- 💻 [Usage](#usage)\n- 📚 [Examples](#examples)\n- 📝 [Contributing](#contributing)\n- 🚀 [Future Plan](#future-plan)\n- ⚖️ [License](#license)\n\n# Installation\n\n## Figma\n\n[Figma Plugin](https://www.figma.com/community/plugin/1203016883447870818)\n\n## Framer\n\n[Framer ESM (Copy this URL and paste it on Framer Canvas)](https://framer.com/m/ShaderGradient-oWuS.js)\n\n## React\n\nInstall below dependencies on your React app.\n\n⚠️ **New Version (from v2.0.0)**\n\n```\n# with yarn\nyarn add three @react-three/fiber @react-spring/three @shadergradient/react\nyarn add -D @types/three\n\n# with npm\nnpm i three @react-three/fiber @react-spring/three @shadergradient/react\nnpm i -D @types/three\n\n# with pnpm\npnpm add three @react-three/fiber @react-spring/three @shadergradient/react\npnpm add -D @types/three\n```\n\n⚠️ **Old Version (v1.x.x)**\n\n```sh\n# with yarn\nyarn add three @react-three/fiber @react-spring/three shadergradient\nyarn add -D @types/three\n\n# with npm\nnpm i three @react-three/fiber @react-spring/three shadergradient\nnpm i -D @types/three\n\n# with pnpm\npnpm add three @react-three/fiber @react-spring/three shadergradient\npnpm add -D @types/three\n```\n\n# Usage\n\nDrop the gradient component on your canvas. Then you can customize it with props.\n\n## Figma\n\n![Figma](./figma.gif)\n\n## Framer\n\n![Framer](./framer.gif)\n\n## React\n\n### Available Gradient Properties (Types)\n\n```ts\ntype MeshT = {\n  type?: 'plane' | 'sphere' | 'waterPlane'\n  animate?: 'on' | 'off'\n  uTime?: number\n  uSpeed?: number\n  uStrength?: number\n  uDensity?: number\n  uFrequency?: number\n  // renamed to Sprial on Framer \u0026 shadergradient.co\n  uAmplitude?: number\n  positionX?: number\n  positionY?: number\n  positionZ?: number\n  rotationX?: number\n  rotationY?: number\n  rotationZ?: number\n  color1?: string\n  color2?: string\n  color3?: string\n  reflection?: number\n  wireframe?: boolean\n  shader?: string\n  rotSpringOption?: any\n  posSpringOption?: any\n}\n\ntype GradientT = MeshT \u0026 {\n  control?: 'query' | 'props'\n  isFigmaPlugin?: boolean\n  dampingFactor?: number\n\n  // View (camera) props\n  cAzimuthAngle?: number\n  cPolarAngle?: number\n  // for both plane and waterPlane type\n  cDistance?: number\n  // only for sphere type\n  cameraZoom?: number\n\n  // Effect props\n  lightType?: '3d' | 'env'\n  brightness?: number\n  envPreset?: 'city' | 'dawn' | 'lobby'\n  grain?: 'on' | 'off'\n  grainBlending?: number\n\n  // Tool props\n  zoomOut?: boolean\n  toggleAxis?: boolean\n  hoverState?: string\n\n  enableTransition?: boolean\n}\n```\n\n### Configure Gradient Properties\n\n```tsx\nimport React from 'react'\nimport { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'\nimport * as reactSpring from '@react-spring/three'\n\nfunction App() {\n  return (\n    \u003cShaderGradientCanvas\n      style={{\n        position: 'absolute',\n        top: 0,\n      }}\n    \u003e\n      \u003cShaderGradient cDistance={32} cPolarAngle={125} /\u003e\n    \u003c/ShaderGradientCanvas\u003e\n  )\n}\n```\n\nor just copy and paste URL of the gradients. (Grab the URL from [shadergradient.co/customize](https://www.shadergradient.co/customize))\n\n```tsx\nimport React from 'react'\nimport { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'\nimport * as reactSpring from '@react-spring/three'\n\nfunction App() {\n  return (\n    \u003cShaderGradientCanvas\n      style={{\n        position: 'absolute',\n        top: 0,\n      }}\n    \u003e\n      \u003cShaderGradient\n        control='query'\n        urlString='https://www.shadergradient.co/customize?animate=on\u0026axesHelper=off\u0026bgColor1=%23000000\u0026bgColor2=%23000000\u0026brightness=1.2\u0026cAzimuthAngle=180\u0026cDistance=3.6\u0026cPolarAngle=90\u0026cameraZoom=1\u0026color1=%2352ff89\u0026color2=%23dbba95\u0026color3=%23d0bce1\u0026embedMode=off\u0026envPreset=city\u0026fov=45\u0026gizmoHelper=hide\u0026grain=on\u0026lightType=3d\u0026pixelDensity=1\u0026positionX=-1.4\u0026positionY=0\u0026positionZ=0\u0026reflection=0.1\u0026rotationX=0\u0026rotationY=10\u0026rotationZ=0\u0026shader=defaults\u0026type=plane\u0026uDensity=1.3\u0026uFrequency=5.5\u0026uSpeed=0.4\u0026uStrength=4\u0026uTime=0\u0026wireframe=false\u0026zoomOut=false'\n      /\u003e\n    \u003c/ShaderGradientCanvas\u003e\n  )\n}\n```\n\n## More Package Details\n\n### Package Versions\n\n- **without-store.mjs (v2)**:\n  - Current version\n  - Stateless React components\n  - More flexible and easier to integrate into various state management systems\n  - Will continue to be developed and improved\n- **with-store.mjs (v1)**:\n  - Legacy version\n  - Includes built-in state management (using Zustand)\n  - Useful for quick setup but less flexible\n  - Will be maintained but not actively developed\n\n### npm Usage\n\n1. For general React environments (current version, stateless):\n\n   ```\n   import { ShaderGradient } from '@shadergradient/react'\n   ```\n\n   This imports from `/dist/without-store.mjs`\n\n2. For React with legacy Storized Control UI:\n\n   ```\n   import { ShaderGradient } from 'shadergradient/with-store'\n   ```\n\n   This imports from `/dist/with-store.mjs`\n\n   Example: [shadergradient-web.vercel.app/customize](https://shadergradient-web.vercel.app/customize) (Next.js)\n\n### ESM Usage\n\n1.  For ESM-supported React applications (current version, stateless):\n    `https://esm-shadergradient.onrender.com/without-store.mjs`\n2.  For use in the Framer canvas (legacy Storized Control UI):\n    `https://esm-shadergradient.onrender.com/with-store.mjs`\n    Example: [shadergradient.co/customize](https://www.shadergradient.co/customize) (Framer Sites)\n3.  For use in Figma plugins:\n    `https://esm-shadergradient.onrender.com/with-store.mjs`\n    This version is mixed with DB code and uses the same store as StoreGradient.\n\nNote: All ESM modules are dynamically served based on client IPs. We refer to this system as \"ESM Editor\" and use it for development purposes.\n\n### Source Code Structure and Version Management\n\n```\nshadergradient/\n├─ src/\n│  ├─ (current version code)\n├─ src-dev/\n   ├─ (previously used for staging new features)\n\n```\n\nThe `src` and `src-dev` folders exist only within the shadergradient package directory. Previously, `src-dev` was used as a staging area for new versions due to version management limitations in Framer.\n\nHowever, we are phasing out this approach:\n\n1. The `src-dev` folder is no longer actively used for development.\n2. We will no longer maintain separate `src` and `src-dev` directories for version management.\n3. Future version management and development will be handled directly within the Framer project.\n\nThis change will simplify our development process and align it more closely with standard practices. All new features and updates will be developed and tested within the Framer project environment, ensuring better integration and easier maintenance.\n\n# Examples\n\n## Figma\n\n[Figma GIF Example](https://framer.com/projects/shadergradient-co-package-origin--zugKWPH3hb4TzPLbtN8y-aV7Di?node=v1ySO756L)\n\n## Framer\n\n[Framer Remix (Login required)](https://framer.com/projects/new?duplicate=sJitbgOn6on6Savojbyk)\n\n## React\n\n- CRA Starter: [CodeSandbox](https://codesandbox.io/p/sandbox/github/ruucm/shadergradient/tree/main/apps/example-cra?file=%2Fsrc%2FApp.tsx)\n- Next.js Starter (App Router): [CodeSandbox](https://codesandbox.io/p/sandbox/github/ruucm/shadergradient/tree/main/apps/example-nextjs-approuter)\n- Next.js Starter: [CodeSandbox](https://codesandbox.io/p/sandbox/github/ruucm/shadergradient/tree/main/apps/example-nextjs)\n\n# Contributing\n\n## Setup\n\n```\npnpm install\n```\n\n## Start development\n\n```\npnpm dev\n```\n\n## Release\n\n```\npnpm changeset\n```\n\n```\npnpm version-packages\n```\n\nthen commit changes (message with like v1.x.x)\n\n```sh\n# Release to npm\npnpm release\n\n# Release it as ES Module (Hosted by GitHub Pages)\ngit push origin main\n```\n\n# Future Plan\n\n- [x] Detatch framer-motion peer depenency (Seperate UI \u0026 Store Package)\n- [x] Figma GIF Support\n- [ ] More Shaders (Metalic, Glass, etc.)\n- [x] Three.js version upgrade\n- [x] Separate framer component bundles \u0026 shader gradient bundles\n- [ ] Separate shader codes as a separate package, and make it reusable for JS, Vue, etc.\n- [ ] Framer Plugin\n\n# License\n\nMIT © [ruucm](https://github.com/ruucm), [stone-skipper](https://github.com/stone-skipper)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruucm%2Fshadergradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruucm%2Fshadergradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruucm%2Fshadergradient/lists"}