DitherGlyph

A word or logo woven out of a moving dithered field.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { DitherGlyph } from '@weft-js/warp'export function Word() {  return (    <DitherGlyph text="weft" ratio="4 / 1" />  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { DitherGlyph } from '@weft-js/warp'<DitherGlyph text="weft" ratio="4 / 1" />

A logo

Pass an SVG path and its box.

tsx

import { DitherGlyph } from '@weft-js/warp'export function Logo() {  return (    <DitherGlyph path={BOLT} box={[24, 24]} fit={0.9} label="weft's bolt" ratio="3 / 1" kind="rings" />  )}const BOLT = 'M13 2 4 14h7l-1 8 9-12h-7z'

Your own drawing

draw paints the shape in cells.

tsx

import { DitherGlyph } from '@weft-js/warp'export function Drawn() {  return (    <DitherGlyph draw={drawDiamond} label="A diamond" ratio="3 / 1" ramp="highlight" />  )}const drawDiamond = (ctx: CanvasRenderingContext2D, cols: number, rows: number) => {  const size = rows * 0.42  ctx.beginPath()  ctx.moveTo(cols / 2, rows / 2 - size)  ctx.lineTo(cols / 2 + size, rows / 2)  ctx.lineTo(cols / 2, rows / 2 + size)  ctx.lineTo(cols / 2 - size, rows / 2)  ctx.fill()}

Reveal

reveal draws the shape on over that many seconds.

tsx

import { DitherGlyph } from '@weft-js/warp'export function Reveal() {  return (    <DitherGlyph text="Shipped" reveal={1.6} ramp="positive" ratio="4 / 1" />  )}

When to use

Use it for

A big brand moment: a wordmark or a logo

Reach for something else

Heading, when it is ordinary text

Accessibility

A text glyph is real text. Give a path or draw glyph a label.

API Reference

Prop	Type	Default	Description
`text`	`string`	—	The word to set. It stays in the page as real text for readers and for search.
`path`	`string`	—	An SVG path, for a logo.
`box`	`[width: number, height: number]`	—	The size of the box the path was drawn in.
`stroke`	`number`	—	Line width, for a path made of lines.
`draw`	`((ctx: CanvasRenderingContext2D, cols: number, rows: number) => void)`	—	Paints the shape on a canvas, in cells.
`label`	`string`	—	Names a `path` or `draw` glyph.
`font`	`string`	—	The font for `text`.
`weight`	`string \| number`	—	The font weight for `text`.
`fit`	`number`	—	The share of the box the shape fills, 0 to 1.
`ratio`	`string \| number`	—	Width to height.
`pointer`	`PointerMode \| PointerMode[]`	—	How the field answers the pointer: `ripple`, `pull` or `shockwave`, or several.
`speed`	`number`	—	Multiplies the tier's speed. 0 holds one frame.
`kind`	`"weave" \| Field \| "flow" \| "rings" \| "aurora" \| "drift"`	`'flow'`	A named field, or your own function of (x, y, t).
`smooth`	`boolean`	`false`	Your own `kind` is smooth: evaluate it on a sparse lattice and interpolate, as the named fields do.
`ramp`	`Ramp`	—	The inks: a tone such as `accent`, or your own list of colours.
`spark`	`Ramp`	—	Inks a disturbed cell takes instead, so a push shows in a second colour.
`pattern`	`Pattern`	—	The ordered-dither tile: `bayer2`, `bayer4`, `bayer8`, `blue` noise or `halftone`.
`cell`	`number`	`4`	CSS pixels per cell.
`inks`	`number`	—	How many inks of a tone ramp to use. Default: the tier's.
`gain`	`number`	—	Tone gain, around 1. Default: the tier's.
`seed`	`number`	—	Where a held frame sits in the field's time, in seconds.
`spread`	`number`	—	How much of the step between inks the pattern may cross, 0–1.
`fade`	`Fade`	—	Dissolves the field toward a side, so type can sit on clean ground, or into the page on every edge.
`reveal`	`number`	—	Seconds a mask takes to draw itself on, left to right, with a flash where it lands. Needs motion.
`fps`	`number`	—	Caps the frame rate while it moves.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="dither-glyph"] [data-part="glyph-text"]

glyph-text

RelatedDither field Dither