A react package that provides an easy way for text to be animated along shapes and curves.
MPL-2.0 License
# with npm
npm install react-swervy-text
# with yarn
yarn add react-swervy-text
import React from "react";
import { Arc, Circle, Rectangle, Snake, CustomPath } from "react-swervy-text";
import "./styles.css";
function App() {
return (
<div>
<div style={{ marginTop: "3rem" }}>
<Arc text={"This is an arc"} fontSize={"5rem"} />
</div>
<div style={{ marginTop: "9rem", display: "flex", justifyContent: "center" }}>
<Circle
delay={2}
text={"Circle"}
timingFunction="linear"
fontSize="3rem"
/>
<Rectangle
delay={4}
text={"Rectangle"}
x={100}
fontSize={"3rem"}
s1={200}
s2={100}
direction={"Reverse"}
timingFunction="quadratic"
/>
</div>
<div style={{ marginTop: "12rem" }}>
<Snake
delay={6}
text={"This is the snake component!"}
fontSize={"5rem"}
/>
</div>
<div style={{ marginTop: "4rem" }}>
<CustomPath text={"Curve"} delay={8} />
</div>
</div>
);
}
export default App;