Volumetric Text

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

Installation

npm install @reactbytes/volumetric-text

Usage

import { VolumetricText } from "@reactbytes/volumetric-text";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | All hail Rameez | The text content or SVG string to render. | | textSize | number | 300 | Size of the text in the canvas texture. | | shapeScale | number | 0.3 | Scale of the shape relative to screen dimensions. | | invertShape | boolean | true | Whether to invert the shape mask (dark vs light). | | addNoise | boolean | true | Add fractal noise (FBM) to distort the light rays. | | samples | number | 12 | Number of samples along the ray path (requires shader compilation). | | octaves | number | 1 | Number of octaves for FBM noise (requires shader compilation). | | lightStrength | number | 3.5 | Focus/strength of the volumetric light source. | | exposure | number | 0.35 | Overall intensity / brightness exposure of the rays. | | decay | number | 0.96 | How fast the light rays decay over distance (0 to 1). | | falloff | number | 0.5 | Radial falloff rate of the volumetric light color. | | density | number | 0.98 | Density of the ray samples (step spacing). | | weight | number | 0.25 | Weight factor applied to each light sample. | | lightColor | color | #ffff66 | Hex code for the source light color. | | falloffColor | color | #00ccff | Hex code for the surrounding falloff color. | | bgColor | color | #004040 | Hex code for the background scene color. |

Presets

This component includes the following design presets:

• Default Style (default)
• Cyberpunk Fog (cyberpunk)
• Solar Flare (solar)
• Forest Glow (forest)

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