React Text Galaxy

This is a text galaxy animation component based on canvas for React.

Galaxy

Matrix

Parallax

Install

npm i react-text-galaxy

OR

yarn add react-text-galaxy

Import

import { TextGalaxy, TextMatrix, TextParallax } from 'react-text-galaxy';

Use

const [text, setText] = useState<string>("");

<TextGalaxy text={text} />

<TextMatrix text={text} />

<TextParallax text={text} />

Parameters

TextGalaxy

| Parameter | Description | Default Value | Data Type | Required | | ----------- | ----------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | text | Text content | "" | string | Yes | | spiralSpeed | Animation speed | "normal" | SpeedType | No | | font | Font property of text | { sizeInPx: 14, family: "Arial Black" } | { sizeInPx: number, family: string } | No | | textColors | Colors of text line | ['rgba(166, 213, 119, 1)', 'rgba(67, 128, 50, 1)', 'rgba(1, 68, 33, 0.8)', 'rgba(1, 50, 32, 0.5)'] | string[] | No | | background | Background property of canvas | { color: "#081330" } | { color: string } | No | | size | Size property of canvas | { width: { value: 100, unit: "%" }, height: { value: 100, unit: "%" } } | { width: { value: number; unit: "px" \| "em" \| "rem" \| "vh" \| "vw" \| "%" }, height: { value: number, unit: "px" \| "em" \| "rem" \| "vh" \| "vw" \| "%" } } | No |

TextMatrix

| Parameter | Description | Default Value | Data Type | Required | | ------------ | ----------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | text | Text content | "" | string | Yes | | fallingSpeed | Animation speed | "normal" | SpeedType | No | | font | Font property of text | { sizeInPx: 16, family: "Arial Black" } | { sizeInPx: number, family: string } | No | | textColors | Colors of text line | ['rgba(166, 213, 119, 1)', 'rgba(67, 128, 50, 1)', 'rgba(1, 68, 33, 0.8)', 'rgba(1, 50, 32, 0.5)'] | string[] | No | | background | Background property of canvas | { color: "#071104" } | { color: string } | No | | size | Size property of canvas | { width: { value: 100, unit: "vw" }, height: { value: 100, unit: "vh" } } | { width: { value: number; unit: "px" \| "em" \| "rem" \| "vh" \| "vw" \| "%" }, height: { value: number, unit: "px" \| "em" \| "rem" \| "vh" \| "vw" \| "%" } } | No |

TextParallax

| Parameter | Description | Default Value | Data Type | Required | | --------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | words | Array of word | | string[] | Yes | | movingSpeed | Animation speed | "normal" | SpeedType | No | | movingDirection | Animation direction | "right-left" | DirectionType | No | | font | Font property of text | { sizeInPx: 26, family: "Arial Black" } | { sizeInPx: number, family: string } | No | | textColors | Colors of text line | ['rgba(166, 213, 119, 1)', 'rgba(67, 128, 50, 1)', 'rgba(1, 68, 33, 0.8)', 'rgba(1, 50, 32, 0.5)'] | string[] | No | | background | Background property of canvas | { color: "#071104" } | { color: string } | No | | size | Size property of canvas | { width: { value: 100, unit: "vw" }, height: { value: 100, unit: "vh" } } | { width: { value: number; unit: "px" \| "em" \| "rem" \| "vh" \| "vw" \| "%" }, height: { value: number, unit: "px" \| "em" \| "rem" \| "vh" \| "vw" \| "%" } } | No |