- Notifications
You must be signed in to change notification settings - Fork42
Create beautiful moving gradients on Framer, Figma and React
ruucm/shadergradient
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Customizable 3D, moving gradient package for React. Also available on modern design tools like Figma and Framer.
Framer ESM (Copy this URL and paste it on Framer Canvas)
Install below dependencies on your React app.
# with yarnyarn add three @react-three/fiber @react-spring/three @shadergradient/reactyarn add -D @types/three# with npmnpm i three @react-three/fiber @react-spring/three @shadergradient/reactnpm i -D @types/three# with pnpmpnpm add three @react-three/fiber @react-spring/three @shadergradient/reactpnpm add -D @types/three# with yarnyarn add three @react-three/fiber @react-spring/three shadergradientyarn add -D @types/three# with npmnpm i three @react-three/fiber @react-spring/three shadergradientnpm i -D @types/three# with pnpmpnpm add three @react-three/fiber @react-spring/three shadergradientpnpm add -D @types/three
Drop the gradient component on your canvas. Then you can customize it with props.
typeMeshT={type?:'plane'|'sphere'|'waterPlane'animate?:'on'|'off'uTime?:numberuSpeed?:numberuStrength?:numberuDensity?:numberuFrequency?:number// renamed to Sprial on Framer & shadergradient.couAmplitude?:numberpositionX?:numberpositionY?:numberpositionZ?:numberrotationX?:numberrotationY?:numberrotationZ?:numbercolor1?:stringcolor2?:stringcolor3?:stringreflection?:numberwireframe?:booleanshader?:stringrotSpringOption?:anyposSpringOption?:any}typeGradientT=MeshT&{control?:'query'|'props'isFigmaPlugin?:booleandampingFactor?:number// View (camera) propscAzimuthAngle?:numbercPolarAngle?:number// for both plane and waterPlane typecDistance?:number// only for sphere typecameraZoom?:number// Effect propslightType?:'3d'|'env'brightness?:numberenvPreset?:'city'|'dawn'|'lobby'grain?:'on'|'off'grainBlending?:number// Tool propszoomOut?:booleantoggleAxis?:booleanhoverState?:stringenableTransition?:boolean}
importReactfrom'react'import{ShaderGradientCanvas,ShaderGradient}from'@shadergradient/react'import*asreactSpringfrom'@react-spring/three'functionApp(){return(<ShaderGradientCanvasstyle={{position:'absolute',top:0,}}><ShaderGradientcDistance={32}cPolarAngle={125}/></ShaderGradientCanvas>)}
or just copy and paste URL of the gradients. (Grab the URL fromshadergradient.co/customize)
importReactfrom'react'import{ShaderGradientCanvas,ShaderGradient}from'@shadergradient/react'import*asreactSpringfrom'@react-spring/three'functionApp(){return(<ShaderGradientCanvasstyle={{position:'absolute',top:0,}}><ShaderGradientcontrol='query'urlString='https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1.2&cAzimuthAngle=180&cDistance=3.6&cPolarAngle=90&cameraZoom=1&color1=%2352ff89&color2=%23dbba95&color3=%23d0bce1&embedMode=off&envPreset=city&fov=45&gizmoHelper=hide&grain=on&lightType=3d&pixelDensity=1&positionX=-1.4&positionY=0&positionZ=0&reflection=0.1&rotationX=0&rotationY=10&rotationZ=0&shader=defaults&type=plane&uDensity=1.3&uFrequency=5.5&uSpeed=0.4&uStrength=4&uTime=0&wireframe=false&zoomOut=false'/></ShaderGradientCanvas>)}
- without-store.mjs (v2):
- Current version
- Stateless React components
- More flexible and easier to integrate into various state management systems
- Will continue to be developed and improved
- with-store.mjs (v1):
- Legacy version
- Includes built-in state management (using Zustand)
- Useful for quick setup but less flexible
- Will be maintained but not actively developed
For general React environments (current version, stateless):
import { ShaderGradient } from '@shadergradient/react'This imports from
/dist/without-store.mjsFor React with legacy Storized Control UI:
import { ShaderGradient } from 'shadergradient/with-store'This imports from
/dist/with-store.mjsExample:shadergradient-web.vercel.app/customize (Next.js)
- For ESM-supported React applications (current version, stateless):
https://esm-shadergradient.onrender.com/without-store.mjs - For use in the Framer canvas (legacy Storized Control UI):
https://esm-shadergradient.onrender.com/with-store.mjsExample:shadergradient.co/customize (Framer Sites) - For use in Figma plugins:
https://esm-shadergradient.onrender.com/with-store.mjsThis version is mixed with DB code and uses the same store as StoreGradient.
Note: All ESM modules are dynamically served based on client IPs. We refer to this system as "ESM Editor" and use it for development purposes.
shadergradient/├─ src/│ ├─ (current version code)├─ src-dev/ ├─ (previously used for staging new features)Thesrc andsrc-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.
However, we are phasing out this approach:
- The
src-devfolder is no longer actively used for development. - We will no longer maintain separate
srcandsrc-devdirectories for version management. - Future version management and development will be handled directly within the Framer project.
This 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.
- CRA Starter:CodeSandbox
- Next.js Starter (App Router):CodeSandbox
- Next.js Starter:CodeSandbox
pnpm installpnpm devpnpm changesetpnpm version-packagesthen commit changes (message with like v1.x.x)
# Release to npmpnpm release# Release it as ES Module (Hosted by GitHub Pages)git push origin main
- Detatch framer-motion peer depenency (Seperate UI & Store Package)
- Figma GIF Support
- More Shaders (Metalic, Glass, etc.)
- Three.js version upgrade
- Separate framer component bundles & shader gradient bundles
- Separate shader codes as a separate package, and make it reusable for JS, Vue, etc.
- Framer Plugin
MIT ©ruucm,stone-skipper
About
Create beautiful moving gradients on Framer, Figma and React