Tectonic Lattice

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/tectonic-lattice-text

Usage

import { TectonicLatticeText } from "@reactbytes/tectonic-lattice-text";

export default function Example() {
  return (
    <TectonicLatticeText />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | STRUCT | The typography word to render as a grid lattice. | | railMode | select | diagonal | The rail layout defining displacement constraints. | | blockSize | number | 8 | Size in pixels of each block in the lattice. | | blockPadding | number | 1.5 | Padding space between blocks. | | influenceRadius | number | 100 | Cursor proximity radius for block interaction. | | pushStrength | number | 9 | Force multiplier pushing blocks away from the cursor. | | blockMass | number | 1 | Simulated mass slowing down or speeding up spring physics. | | snapStiffness | number | 0.08 | Stiffness of the snap-back home-seeking spring. | | friction | number | 0.82 | Kinetic friction multiplier slowing block motion. | | maxOffset | number | 160 | Maximum offset limit blocks can slide. | | skewIntensity | number | 0.15 | Visual shear/skew strength applied under motion stress. | | baseColor | color | #ffffff | Resting foreground color of lattice blocks. | | stressedBlockColor | color | #c084fc | Color of blocks when pushed/stressed by the cursor. | | wireframeColor | color | rgba(168, 85, 247, 0.45) | Underlying rail lattice wireframe background color. | | bgColor | color | #070709 | Lattice canvas scene background color. |

Presets

This component includes the following design presets:

• Ametrine (Default) (matrix)
• Cyberpunk (cyber)
• Industrial (mono)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Tectonic Lattice.