Backgrounds
Tessellation Field
A quiet hexagon or triangle grid with one soft highlight travelling across it, like light catching a cut-glass surface. The grid is drawn to canvas once (on mount and resize, never per frame); only a single masked CSS transform animates, so it costs nothing while idle. Built for pricing tables, technical docs, and enterprise-leaning sections.
$ velocityx add tessellation-field
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Tessellation Field →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| shape | 'hexagon' | 'triangle' | No | 'hexagon' | |
| size | number | No | 64 | |
| lineOpacity | number | No | 0.16 | |
| color | 'primary' | 'accent' | No | 'primary' | |
| duration | number | No | 9 | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/tessellation-field/TessellationField.tsxUsing the Tessellation Field component
Install it with velocityx add tessellation-field.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Backgrounds.
PCB-style wiring paths with travelling light pulses, giving technical and infrastructure pages a systems-and-signal backdrop without any canvas or extra dependency.
reactSlow drifting field of points that link into triangles when close, like a star map redrawing itself. A calm 'data / network / intelligence' backdrop for dashboard, pricing, and AI-product heroes.
reactThree depth layers of a dot matrix that drift at different rates with the pointer, giving a flat section real depth. The structured counterpart to free-floating particle backgrounds — sits behind pricing tables, feature grids, and app screenshots.
reactStripe-style ribbon of thin lines that twists in pseudo-3D — additive blending lights up a glowing fold where the lines bunch. Pure canvas, zero dependencies.
react