Gem Smoke
Installation
npm i @paper-design/shaders-react
Code
import { GemSmoke } from '@paper-design/shaders-react';
<GemSmoke
width={1280}
height={720}
image="https://shaders.paper.design/images/logos/diamond.svg"
colors={["#cc3333", "#cc9933"]}
colorBack="#f0efea"
colorInner="#fafaf5"
shape="diamond"
innerDistortion={0.8}
outerDistortion={0.6}
outerGlow={0.55}
innerGlow={1}
offset={0}
angle={0}
size={0.1}
speed={1}
scale={0.6}
/>
Shader Props
Common Props
Description
Fluid, smoke shape animating behind the input image and being distorted by shape