This is an almost carbon-copy of the Magical Text by Hyperplexed specifically made to by used in React.
The star and square icons are from the Font Awesome's free pack.
Excluding React, none.
Clone the project, enter the project's folder, do npm install
, then npm start
and it's up.
To use this component, MagicText.js
, MagicText.css
and by default, the star.svg
icon are required from the src
folder.
Only the text
property is explicity needed:
<h1>
Hello, this is the <MagicText text={"purple wizard"}/> and I am here to purple you.
</h1>
with by default, a purple gradient-moving background with purple pulsating and rotating stars:
Component properties:
- text: The text to display
- particleCount: How many particles
- particleSvg: The particle SVG
- particleStyling: Custom styling for a particle
- textStyling: Custom styling for the text
Example of a customized MagicText
component:
const styling = {
text: {
background: "linear-gradient(to right, DarkGreen, ForestGreen, Lime, LimeGreen)",
backgroundSize: "200%",
},
particle: {
scale: "1",
fill: "#23a60866"
}
}
<h1>
Hello, this is the <MagicText text={"green wizard"}
particleCount={2}
oneParticleDelay={700}
particleSvg={<Square/>}
particleStyling={styling.particle}
textStyling={styling.text}
/> and I am here to green you.
</h1>