Aperture Text

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

Installation

npm install @reactbytes/aperture-text

Usage

import { ApertureText } from "@reactbytes/aperture-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | DESTRUCT | The typography string to separate and animate. | | fontSize | number | 85 | Scale of font size in pixels (defines localized canvas bounds). | | expansionForce | number | 18 | Maximum displacement reach of the separating plates. | | influenceRadius | number | 75 | Proximity threshold for the pointer pressure trigger. | | stiffness | number | 0.07 | Mechanical lock-back spring stiffness index (Hooke's spring constant). | | damping | number | 0.76 | Kinetic friction dampening index (velocity decay multiplier). | | color | color | #ffffff | Foreground color of the solid shifting character plates. | | blueprintColor | color | rgba(244, 63, 94, 0.45) | Color of the inner wireframe blueprint revealed on fracture. |

Presets

This component includes the following design presets:

• Rose Destruct (Default) (destruct)
• Cyber Fracture (cyber)
• Soft Bloom (bloom)

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