0.9.1 • Published 2 years ago
react-text-galaxy v0.9.1
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 |