Minimalist Spotlight Hero with Kinetic Typography

Heroes

About

An ultra-clean, high-impact hero section powered by Framer Motion word-by-word blur-to-clear reveal animations, a mouse-reactive ambient spotlight, and crisp social proof avatars.

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

Code

How Minimalist Spotlight Hero with Kinetic Typography is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

"use client";

import * as React from "react";
import { Component, type AvatarItem } from "@/components/ui/minimalist-spotlight-hero-with-kinetic-typography";

const DEMO_AVATARS: AvatarItem[] = [
  { name: "Alex Rivera", initials: "AR" },
  { name: "Sarah Chen", initials: "SC" },
  { name: "Marcus Vance", initials: "MV" },
  { name: "Elena Rostova", initials: "ER" },
  { name: "David Kim", initials: "DK" },
];

export default function DemoOne() {
  return (
    <Component
      eyebrow="Version 3.0 is now live"
      headline="Design interfaces at the speed of thought"
      subheadline="A minimalist foundation engineered for clarity, precision, and effortless motion. Built for teams who care deeply about every pixel."
      primaryCtaLabel="Get Started"
      secondaryCtaLabel="Explore Docs"
      onPrimaryClick={() => {}}
      onSecondaryClick={() => {}}
      avatars={DEMO_AVATARS}
      trustedByText="Loved by 14,000+ product designers & engineers"
      rating={5}
    />
  );
}