Gravity Letters

Text

About

A text component whose letters detach and fall under simulated gravity, piling up at the bottom, then spring back into place on hover, click, or scroll into view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gravity Letters to your project and fits it to your theme.

Code

How Gravity Letters is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import GravityLetters from "@/components/ui/gravity-letters";

export default function GravityLettersDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-8">
      <GravityLetters
        text="Hover me to topple"
        className="text-4xl font-bold text-foreground sm:text-6xl"
      />
    </div>
  );
}