pleate.uiEffects
Interactive

Chroma Grid

Profile cards shown in grayscale, with a circle of full color following the pointer across the grid and a lit border on the card under it.
import { ChromaGrid } from "pleate/effects/chroma-grid";

Team

Pug wrapped in a blanket

Biscuit

@biscuit

Head of naps

Lioness resting

Nala

@nala

Security

Walrus on the ice

Wally

@wally

Cold storage

Vulture close up

Vera

@vera

Code review

Jellyfish in dark water

Jelly

@jelly

Design systems

Barista pouring coffee

Bea

@bea

Fuel

Props

items

Cards; href makes a card a link.

{ image, alt, title, subtitle?, handle?, href?, color? }[]

radius

Spotlight radius in px.

numberdefault 260

minCardWidth

Smallest card width in px.

numberdefault 220

Accessibility

  • The grayscale layer is decorative.
  • Touch screens and reduced motion show the cards in color.