Gravity Text

Text characters that fall and bounce on mount.

Preview
GRAVITY

Customize

Installation & Usage

tsx
import { GravityText } from "@/components/ui/gravity-text"

export function GravityTextDemo() {
  return (
    <div className="text-4xl">
       <GravityText 
         text="GRAVITY" 
         className="text-4xl" 
         font="font-bold" 
         duration={0.5} 
         stiffness={400} 
       />
    </div>
  )
}

Component Details

FrameworkReact / Next.js
StylingTailwind CSS
AnimationFramer Motion
Dependencies
framer-motion