"use client"; import * as React from "react"; import { motion } from "motion/react"; import { AvatarStack } from "./avatar"; import { Button } from "./button"; import { CopyButton } from "./copy-button"; import { GridBackground } from "./backgrounds"; import { Magnetic } from "./magnetic"; import { RotatingWords } from "./rotating-words"; import { ArrowRightIcon, StarIcon } from "@kineticui/icons"; export type HeroCenteredProps = { announcement?: string; title?: string; rotating?: string[]; description?: string; command?: string; }; const fade = (d: number) => ({ initial: { opacity: 0, y: 16 }, animate: { opacity: 1, y: 0 }, transition: { delay: d, type: "spring" as const, stiffness: 120, damping: 20 } }); /** Centred hero with announcement pill, rotating headline word, magnetic CTAs, install command and social proof. */ export function HeroCentered({ announcement = "Kinetic 2.0 · 120 components", title = "Interfaces that feel", rotating = ["alive", "fast", "effortless", "yours"], description = "Motion-first React components for Next.js and Tailwind. Install from npm or copy the source with one command.", command = "npx @kineticui/cli init", }: HeroCenteredProps) { return (

New {announcement} {title}
{description} $ {command} {Array.from({ length: 5 }, (_, i) => ( ))} Loved by 12,000+ developers

); }

Hero — Centered

Installation