Shaders | Lab

LabTry any seed as an avatar, a cursor or an outline, pick a shader and colors, then copy the code.npm i @craftedstudios/shadersOptionsEvery option except seed is optional. The same names work as React props, web component attributes (ring-color for ringColor) and plain JavaScript options.

Option

Default

What it does

seed

required

Any name, email or user ID.

size

32

Width and height, in CSS pixels.

effect

auto

linear, radial, thermal, topography or plasma. auto lets the seed choose.

colors

from the seed

Up to four CSS colors for the effect, used in place of the seed's.

motion

auto

still draws one frame and stops.

interaction

goo

What happens on hover: goo, follow, repel, distort, pulse, orbit, turbulence or none.

speed

1

How fast it moves, from 0 to 4.

shape

circle

circle, squircle or square.

ring

0

An outline, in pixels. ringColor sets its color.

label

none

A name for screen readers. Without one, the avatar is hidden from them.

grain, distortion, scale, stretch and thickness fine-tune the look. The Lab shows what each one does.More

Avatars: Live shaders for product UI: avatars from any name, email or user ID, presence cursors, and outlines for buttons and cards. One WebGL context for the whole page.

Cursors: Presence cursors with the avatar built in, in two styles. Your app passes the position, the avatar comes with it.

Outlines: Live outlines for your own buttons, cards and fields, in six metals and five effects. A light travels the edge and follows the pointer.

Docs: How to install and use @craftedstudios/shaders: avatars, cursors, outlines, still images and performance.

@craftedstudios/shaders on npm. MIT license.

llms.txt: the whole of this, as plain text.

Made by Crafted Studios.