Curated and customizable 3d gradient package in modern design tools and React.
Figma Plugin
Link
Framer Package
Link
Installation
yarn add shadergradient three @react-three/fiber @react-three/drei @react-three/postprocessing
Develop shadergradient package with website & figma-plugin
To develop with the shadergradient package, follow below instructions.
yarn install
yarn link shadergradient
(Link and replace shadergradient package to local.)npm link ../path/to/your/project/node_modules/react
(Use shadergradient package's react)npm link ../path/to/your/project/node_modules/@react-three/fiber
(Use shadergradient package's @react-three/fiber)npm link ../path/to/your/project/node_modules/@react-three/drei
(Use shadergradient package's @react-three/drei)npm link ../path/to/your/project/node_modules/postprocessing
(Use shadergradient package's postprocessing)
For example
yarn link shadergradient && npm link '/Users/ruucm/MyDocuments/Carving/blocks/shadergradient/node_modules/react' && npm link '/Users/ruucm/MyDocuments/Carving/blocks/shadergradient/node_modules/@react-three/fiber' && npm link '/Users/ruucm/MyDocuments/Carving/blocks/shadergradient/node_modules/@react-three/drei' && npm link '/Users/ruucm/MyDocuments/Carving/blocks/shadergradient/node_modules/postprocessing' && yarn dev
Next.js Example Project
Codesandbox
This example project was bootstrapped with create-r3f-app