Pointerexperimental

Facet

A faceted surface whose colour migrates across the slats instead of switching.

Customize

Surfacefacet size and pointer lighting

Facet size120 pxcell

Tone variation14variation

Light0.70intensity

Seed7seed

Ambient flowinterval picks the next colour, duration is the transition

Enabledambient

PalettepaletteName

Interval7000 msambientInterval

Duration5200 msambientDuration

TSX

<Facet>
    <div>Hero copy</div>
</Facet>

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

9 documented props on Facet
Property	Type	Default	Description
`cell`	`number`	`120`	Facet size. Range 40 to 320 px.
`variation`	`number`	`14`	Tone variation. Range 0 to 40.
`intensity`	`number`	`0.7`	Light. Range 0 to 1.4.
`seed`	`number`	`7`	Seed. Range 1 to 99.
`ambient`	`boolean`	`true`	Enabled.
`ambientInterval`	`number`	`7000`	Interval. Range 1200 to 20000 ms.
`ambientDuration`	`number`	`5200`	Duration. Range 400 to 14000 ms.
`children`	`ReactNode`	`—`	Content laid over the surface.
`palette`	`string[]`	`—`	Colours the ambient flow moves between.

0 external runtime dependencies

Ships with nothing but React.

Experimental: still under evaluation and not part of the published package yet.