Gem Smoke

Presets

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.8}
  speed={1}
  scale={0.6}
/>

Shader Props

Name	Description	Type	Values
image	An optional image used as an effect mask. A transparent background is required.	`HTMLImageElement \| string`	Image object or URL
shape	The predefined shape used as an effect mask (needs no image)	`enum`	\| `"none"` \| `"circle"` \| `"daisy"` \| `"diamond"` \| `"metaballs"`
colors	Up to 6 colors	`string[]`	Hex, RGB, or HSL color
colorBack	Background color	`string`	Hex, RGB, or HSL color
innerDistortion	The power of smoke distortion inside the input shape (shape defined by alpha channel), needs innerGlow > 0	`number`	0 to 1
outerDistortion	The power of smoke distortion outside the input shape (shape defined by alpha channel), needs outerGlow > 0	`number`	0 to 1
outerGlow	The visibility of smoke shape out of the input shape (shape defined by alpha channel)	`number`	0 to 1
innerGlow	The visibility of smoke shape inside the input shape (shape defined by alpha channel)	`number`	0 to 1
colorInner	Additional color inside the input shape, mixing with smoke	`string`	Hex, RGB, or HSL color
offset	Vertical offset of smoke inside the shape (needs innerGlow > 0)	`number`	-1 to 1
angle	Smoke direction	`number`	0 to 360
size	The size of smoke shape relative to the image box	`number`	0 to 1

Common Props

Name	Description	Type	Values
speed	Controls how fast the animation runs. speed=0 stops the animation loop, and speed=1 defines frame prop as timestamp in milliseconds	`number`	—
frame	Starting point of the animation. When speed=1, this value is treated as start time in milliseconds (try large frame values to see the difference). When speed=0 frame fully defines the state of static shader	`number`	—
scale	Overall zoom level of the graphics	`number`	0.1 to 4
rotation	Overall rotation angle of the graphics	`number`	0 to 360
offsetX	Horizontal offset of the graphics center	`number`	-1 to 1
offsetY	Vertical offset of the graphics center	`number`	-1 to 1
width	CSS width style of the shader element	`number \| string`	—
height	CSS height style of the shader element	`number \| string`	—
fit	How to fit the rendered shader into the canvas dimensions	`enum`	\| `"contain"` \| `"cover"`
originX	Reference point for positioning world width in the canvas	`number`	0 to 1
originY	Reference point for positioning world height in the canvas	`number`	0 to 1
minPixelRatio	Minimum pixel ratio to use when rendering the shader (default is 2 for double resolution)	`number`	—
maxPixelCount	Maximum pixel count that the shader may process	`number`	—

Description

Fluid, smoke shape animating behind the input image and being distorted by shape