Gravity

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "rockets-path": {
          "0%": {
            transform: "translate(0, 0) rotate(var(--angle))",
            opacity: "1",
          },
          "40%": {
            transform: "translate(var(--x), -300px) rotate(var(--angle))",
            opacity: "1",
          },
          "60%": {
            transform: "translate(var(--x), -350px) rotate(var(--angle))",
            opacity: "0.8",
          },
          "100%": {
            transform:
              "translate(var(--x), 0) rotate(calc(var(--angle) + 180deg))",
            opacity: "0",
          },
        },
      },
      animation: {
        "rockets-effect": "rockets-path var(--duration) ease-in-out infinite",
      },
    },
  },
};

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

<div className="flex items-center justify-center px-4 py-12">
  <div className="relative w-full max-w-sm">
    <div
      className="relative flex h-[340px] 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>