Dot field

A picture or a word drawn as dithered dots that move out of the cursor's way and drift back when it leaves. After Emil Kowalski's take on Linear's dithered logo. Canvas only, no dependencies beyond React.

Install

$ npx shadcn@latest add https://savi.fyi/r/dot-field.json

Use it

import { DotField } from "@/components/dot-field";
 
export function Portrait() {
  return (
    <DotField
      source={{ src: "/me.png" }}
      label="My portrait"
      color="#ff471a"
    />
  );
}

Props

source: { src } | { text } | { image }; The picture or word to draw in dots.
label: string; What screen readers hear.
color: string; Any CSS color, including CSS variables. Defaults to the text color.
cell: number; Grid size in pixels. Smaller means more, finer dots.
radius: number; How far from the cursor dots get pushed.
strength: number; How hard they get pushed.
onShapeClick: () => void; Makes the shape itself clickable, not the space around it.

On this site

The homepage portrait →Linear's dithered logo is pretty freaking awesome →