Variable Weight

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

Installation

npm install @reactbytes/variable-weight

Usage

import { VariableWeightText } from "@reactbytes/variable-weight";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | VARIABLE OUTFIT | The text to animate. | | uppercase | boolean | true | Whether to force the text to uppercase. | | pulse | boolean | false | Whether the weight shift should loop indefinitely. | | duration | number | 0.8 | Animation time for each character (seconds). | | stagger | number | 0.1 | Delay multiplication between characters (seconds). | | initialWeight | number | 100 | Starting font weight (100-900). | | targetWeight | number | 900 | Final font weight (100-900). | | color | color | #E8EAF0 | Hex color for the text. |

Presets

This component includes the following design presets:

• Default Bold (default)
• Breathing Cycle (pulse)
• Rapid Wave (rapid)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Inspiration

• Variable Fonts API - Tech Underlying

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