Typographystable

Stencil

Display type filled with stripes, checks, gradients, an image or video.

Customize

Fillwhat shows through the letters

Wordtext

Patternfill

Image URLimage

Pattern colourscolors

Pattern scale64 pxscale

Pattern angle68 °angle

Pattern flows across the wordcontinuous

Pattern loop time0.00 sanimate

Typesize and weight of the letters

Font size160 pxsize

Weight800weight

Tracking-0.020 emtracking

Outline0.00 pxoutline

Outline colouroutlineColor

Hoverwhat a letter does under the cursor

Effecthover

Strength1.00strength

TSX

import { Stencil } from "zerogravity"

<Stencil />

Generated from the controls above. Only props that differ from their defaults are shown.

16 documented props on Stencil
Property	Type	Default	Description
`text`	`string`	`"ZEBRA"`	Word.
`fill`	`"zebra" \| "leopard" \| "stripes" \| "checker" \| "dots" \| "grid" \| "gradient" \| "rainbow" \| "image"`	`"zebra"`	Pattern.
`image`	`string`	`""`	Image URL.
`colors`	`string[]`	`["#f7f7f5", "#141414"]`	Pattern colours.
`scale`	`number`	`64`	Pattern scale. Range 8 to 300 px.
`angle`	`number`	`68`	Pattern angle. Range 0 to 180 °.
`continuous`	`boolean`	`true`	Pattern flows across the word.
`animate`	`number`	`0`	Pattern loop time. Range 0 to 20 s.
`size`	`number`	`160`	Font size. Range 40 to 340 px.
`weight`	`number`	`800`	Weight. Range 100 to 900.
`tracking`	`number`	`-0.02`	Tracking. Range -0.12 to 0.3 em.
`outline`	`number`	`0`	Outline. Range 0 to 6 px.
`outlineColor`	`string`	`"#ffffff"`	Outline colour.
`hover`	`"none" \| "lift" \| "pop" \| "wave" \| "tilt" \| "shift" \| "glow" \| "expand" \| "reveal"`	`"lift"`	Effect.
`strength`	`number`	`1`	Strength. Range 0 to 2.5.
`media`	`string`	`—`	Video URL used by the reveal hover mode.

0 external runtime dependencies

Ships with nothing but React.