Tectonic Track Text

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

Installation

npm install @reactbytes/tectonic-track-text

Usage

import { TectonicTrackText } from "@reactbytes/tectonic-track-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | TECTONIC | The word/text to render and animate. | | fontSize | number | 75 | Font size in pixels defining absolute canvas layout size. | | maxTrackingExpansion | number | 35 | Maximum letter spacing tracking expansion value (in pixels). | | maxScaleX | number | 1.25 | Maximum width scale multiplier applied under tension. | | influenceRadius | number | 120 | Horizontal mouse proximity interaction threshold. | | stiffness | number | 0.08 | Elastic tracking snap stiffness coefficient. | | damping | number | 0.74 | Spring system damping friction factor. | | color | color | #ffffff | Foreground color of the characters. | | lineColor | color | rgba(255, 255, 255, 0.15) | Color of the alignment track baseline and ticks. |

Presets

This component includes the following design presets:

• Standard Elastic (Default) (standard)
• Wide Accordion (accordion)
• Snappy Horizon (horizon)

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 Track Text.