Axial Shear Text

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

Installation

npm install @reactbytes/axial-shear-text

Usage

import { AxialShearText } from "@reactbytes/axial-shear-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | SHEAR | The hidden text string to mount onto the shear line matrix. | | fontSize | number | 80 | Font scale in pixels (handles absolute container footprint bounds). | | maxShearOffset | number | 24 | Maximum vertical pixel offset a character can split apart. | | influenceRadius | number | 75 | Proximity trigger radius surrounding the cursor position (in pixels). | | stiffness | number | 0.07 | Hooke's spring calculation stiffness profile. | | damping | number | 0.75 | Kinetic damping factor to settle vertical slide motion. | | color | color | #ffffff | Primary typography color of the solid glyph hulls. | | shearColor | color | rgba(14, 165, 233, 0.5) | Accent color of the interior alignment tracks and micro-telemetry scales. |

Presets

This component includes the following design presets:

• Precision Shear (Default) (precision)
• Deep Fracture (deep)
• Rapid Divide (rapid)

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 - Axial Shear Text.