3D ASCII text effect with Three.js and interactive mouse controls.
Installation
Usage
import { AsciiText } from "viora-ui";import { AsciiText } from "viora-ui";
export default function AsciiTextDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<AsciiText />
</div>
);
}API Reference
AsciiFilterOptions
| Prop | Type | Default | Description |
|---|---|---|---|
| fontSize? | number | - | Configuration for fontSize. |
| fontFamily? | string | - | Configuration for fontFamily. |
| charset? | string | - | Configuration for charset. |
| invert? | boolean | false | Configuration for invert. |
CanvasTxtOptions
| Prop | Type | Default | Description |
|---|---|---|---|
| fontSize? | number | - | Configuration for fontSize. |
| fontFamily? | string | - | Configuration for fontFamily. |
| color? | string | - | Configuration for color. |
CanvAsciiOptions
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Configuration for text. |
| asciiFontSize | number | - | Configuration for asciiFontSize. |
| textFontSize | number | - | Configuration for textFontSize. |
| textColor | string | - | Configuration for textColor. |
| planeBaseHeight | number | - | Configuration for planeBaseHeight. |
| enableWaves | boolean | false | Configuration for enableWaves. |
ASCIIText
| Prop | Type | Default | Description |
|---|---|---|---|
| text? | string | - | Configuration for text. |
| asciiFontSize? | number | - | Configuration for asciiFontSize. |
| textFontSize? | number | - | Configuration for textFontSize. |
| textColor? | string | - | Configuration for textColor. |
| planeBaseHeight? | number | - | Configuration for planeBaseHeight. |
| enableWaves? | boolean | false | Configuration for enableWaves. |
Built by Otis
Last updated: 9/13/2026