Circular Text

A highly engaging typographical component that wraps a string of text perfectly into a 3D circle. It spins continuously on its own, but integrates with Framer Motion's useScroll and useVelocity to physically accelerate the spin and tilt on the 3D axis when the user scrolls the page.

Live Preview

Installation

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CircularText } from "@/components/creative/circular-text";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CircularText } from "@/components/creative/circular-text";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CircularText
        text="example"
        radius{10}
        baseVelocity{10}
      />
    </div>
  );
}