Falling Letter

Heroes

About

A dynamic background animation system that generates physics-based falling letters with collision detection.

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

Code

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

Usage.tsx

import { Suspense, memo } from 'react';
import FallingLetter from '@/components/falling-letter';



// optimize the alphabet generation
const ALPHABET = Array.from({ length: 5 }, (_, i) => 
  String.fromCharCode(65 + i)
);

export default function Demo() {
  return (
    <div className="relative min-h-screen">
      
      
      {/* optimize the Suspense usage */}
      <Suspense fallback={null}>
        <FallingLetter />
      </Suspense>

      {/* main content container */}
      <div className="relative z-10 min-h-screen flex flex-col items-center justify-center p-8">
        <div className="max-w-4xl w-full space-y-8">
          {/* title section */}
          <h1 className="text-6xl md:text-8xl font-bold tracking-tighter text-center">
            <span className="bg-gradient-to-r from-blue-600 to-purple-500 bg-clip-text text-transparent">
              LETTERS
            </span>
          </h1>

          {/* optimize the letter display area */}
          <div className="grid grid-cols-3 md:grid-cols-5 gap-4 p-6 bg-background/80 backdrop-blur-lg rounded-2xl border shadow-xl">
            {ALPHABET.map((letter) => (
              <MemoizedLetterTile key={letter} letter={letter} />
            ))}
          </div>

          {/* description text */}
          <div className="text-center space-y-4">
            <p className="text-xl text-muted-foreground">
              Explore the infinite possibilities of letters
            </p>
            <button className="px-8 py-3 bg-primary text-primary-foreground rounded-full 
                            hover:bg-primary/90 transition-colors shadow-lg">
              Start creating
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// use memo to optimize the letter block rendering
const MemoizedLetterTile = memo(({ letter }: { letter: string }) => (
  <div 
    className="aspect-square flex items-center justify-center text-4xl font-bold 
             bg-gradient-to-br from-blue-100 to-purple-100 dark:from-zinc-800 dark:to-zinc-700 
             rounded-xl shadow-lg hover:scale-105 transition-transform cursor-pointer"
  >
    {letter}
  </div>
));

// Add display name to fix the error
MemoizedLetterTile.displayName = 'MemoizedLetterTile';