React Text Galaxy
This is a text galaxy animation component based on canvas for React.
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 |