Components

Gravity Letters

A playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.

Interaction Type

Click or tap anywhere to drop a glyph, or press and hold to pour a steady stream. Glyphs tumble as they fall, bounce softly when they land, and pile up into rounded hills. On phones, tilt the device to spill the pile toward the low side. Honors prefers-reduced-motion.

Props

Options you can pass to customize this component.

Prop
Type
Description
type
lettersnumbersboth

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

items
React.ReactNode[]

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

gravity
number

Downward acceleration in px/s². Lower is floatier, higher is heavier.

size
number

Base glyph size in pixels. Each drop varies slightly around it.

color
#1A73F2#AF52DE#FF3B30#F75001#34C759

Glyph color. Defaults to currentColor so it follows your theme.

maxGlyphs
number

Max glyphs kept in the field; past the cap the oldest fade out. Unlimited by default.

deviceTilt
boolean

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

className
string

Extra classes for the root element. Use it to size the field.

Installation

npx shadcn@latest add swamimalode07/rare-ui/gravity-letters

How to use

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 stays clickable-through */}
      <p className="absolute inset-0 grid place-items-center text-sm text-muted-foreground">
        Click anywhere
      </p>
    </GravityLetters>
  )
}


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


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

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Rare UI component must credit Rare UI with a visible link back to rareui.com, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Rare UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
Gravity Letters
Click anywhere in the box