Animated Vectors

Installation

Install the following dependencies:

cli

1npm install motion tailwindcss

Usage

The animated vector components provides a controls object (from Motion) that you can start with different triggers. Here’s how to easily add them:

🕒 Auto-play on Mount

tsx

1useEffect(() => {
2  controls.start("animate");
3}, []);

Preview

🖱️ Trigger on Hover

tsx

1<div
2  onMouseEnter={() => controls.start("animate")}
3  onMouseLeave={() => controls.start("normal")}
4>
5  <Circle1 />
6</div>

Preview

👆 Trigger on Click

tsx

1<div onClick={() => controls.start("animate")}>
2  <Circle1 />
3</div>

Preview

👁️ Trigger When Scrolled Into View

tsx

1import { useInView } from "react-intersection-observer";
2
3const { ref, inView } = useInView({ triggerOnce: true });
4
5useEffect(() => {
6  if (inView) controls.start("animate");
7}, [inView]);
8
9return <div ref={ref}><Circle1 /></div>;

Preview

🧠 Control Animation Manually (via Ref)

tsx

1const circleRef = useRef<Circle1Handle>(null);
2
3<button onClick={() => circleRef.current?.startAnimation()}>
4  Animate
5</button>
6
7<Circle1 ref={circleRef} />

Preview