Gravity

Backgrounds 11

About

An animated container effect where small glowing particles launch upward like rockets and fall back down under gravity, used as a decorative background inside cards or hero sections.

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

Code

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

Usage.tsx

import { Gravity } from "@/components/ui/gravity";

export default function GravityDemo() {
  return (
    <div className="flex items-center justify-center px-4 py-12">
      <div className="relative w-full max-w-sm">
        <div
          className="relative flex h-85 w-[90%] flex-col items-start justify-end
          overflow-hidden rounded-2xl border border-gray-300 dark:border-gray-800
          bg-gray-50 dark:bg-[#0a0a0a]
          px-5 py-8 shadow-xl mx-auto transition-colors"
        >
          <h2 className="relative z-50 mb-3 text-xl font-bold text-gray-900 dark:text-white">
            Gravity
          </h2>
          <p className="relative z-50 mb-5 text-base font-normal text-gray-600 dark:text-gray-400 leading-relaxed">
            Gravity pulls everything down, not to defeat it, but to give every
            fall the chance to launch again with greater force.
          </p>
          <Gravity number={20} />
        </div>
      </div>
    </div>
  );
}