Gravity Letters React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import GravityLetters from @/components/ui/gravity-letters.

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

export function Demo() {
  return (
    <GravityLetters type="letters" className="h-96 w-full rounded-3xl border">
      {/* anything you render inside sits under the falling glyphs */}
      <p className="absolute inset-0 grid place-items-center text-sm text-muted-foreground">
        Click anywhere
      </p>
    </GravityLetters>
  )
}

// A blank field, or your own opening word:
// <GravityLetters initialText="" />
// <GravityLetters initialText="404" type="numbers" />

// Digits instead:
// <GravityLetters type="numbers" />

// Or drop your own content: emoji, icons, any component:
// <GravityLetters items={["🍎", "🍊", "🍇", <Sparkles key="s" className="size-7" />]} />

Props

• typedefault "letters"
  "letters" | "numbers" | "both"

  Which pool to draw from: letters, digits, or both. Ignored when items is set.

• initialTextdefault "HELLO"
  string

  Letters poured across the middle of the field on mount, one after another, so it never starts empty. Spaces leave gaps; pass an empty string for a blank field.

• items
  React.ReactNode[]

  Your own drop pool: emoji, icons, or any components. Each drop picks a random entry. Overrides type.

• gravitydefault 800
  number

  Downward acceleration in px/s². Lower is floatier, higher is heavier. Changes apply mid-fall.

• sizedefault 28
  number

  Base glyph size in pixels. Each drop varies by up to 20% around it. Applies to new drops.

• colordefault "currentColor"
  string

  Glyph color, any CSS color. Defaults to currentColor so it follows your theme.

• weightdefault "semibold"
  "normal" | "medium" | "semibold" | "bold"

  Font weight of the falling glyphs.

• sizeVariancedefault 0.2
  number

  How much a dropped glyph's size varies around size: 0.2 means 80% to 120%. initialText letters always use size exactly.

• bouncedefault 0.22
  number

  How much of its speed a glyph keeps on its first touch down, 0 (a thud) to 0.95.

• holdDelaydefault 300
  number

  How long a press has to last, in milliseconds, before glyphs start pouring.

• pourIntervaldefault 120
  number

  Time between glyphs while pouring, in milliseconds.

• maxGlyphsdefault 0
  number

  Max glyphs kept in the field; past the cap the oldest fade out and the pile settles into the gap. 0 keeps every glyph, which is the default.

• deviceTiltdefault true
  boolean

  Tilting a phone spills the pile toward the low side. iOS asks for motion permission on the first tap.

• children
  React.ReactNode

  Rendered under the glyph layer, e.g. a hint or an empty state. Clicks on it still drop glyphs unless a handler calls preventDefault.

• className
  string

  Extra classes for the root element. Use it to size the field; glyphs pile on its bottom edge and are clipped to it. Pointer handlers you pass run before the drop.

FAQ

More React effect components