50 components available

Dots Shader

May 2024

Login to access the code

A canvas shader that renders animated colored dots with customizable opacities, dot sizes and colors.

Playground

<DotsShader  
  colors={[
    [226, 67, 41],
    [252, 109, 38],
    [252, 163, 38, 1],
  ]}
  opacities={[0.4, 0.4, 0.6, 0.6, 0.6, 0.8, 0.8, 0.8, 0.8, 1]}
  totalSize={5}
  dotSize={1} 
/>

Installation

Whoops, hang on for a sec

You don't have access to view this resource

Login to access

API Props

Prop	Type	Default
colors	number[][]	[[93, 227, 255]]
opacities	number[]	[0.4, 0.4, 0.6, 0.6, 0.6, 0.8, 0.8, 0.8, 0.8, 1]
totalSize	number	3
dotSize	number	1
maxFps	number	30

Inspired by: https://www.clerk.com