React Text Galaxy
This is a text galaxy animation component based on canvas for React.
Galaxy
Matrix
Parallax
Install
npm i react-text-galaxyOR
yarn add react-text-galaxyImport
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 |