FreeMarketing

Activity Feed Hero

Use this component for SaaS homepages, marketplaces, and community products where live activity makes the product feel active and credible.

ReactTailwind CSSMotionHero

Live build feed

Ship work where momentum is visible.

Aditi scoped checkoutnow

Ravi pushed UI polishnow

Maya approved launchnow

Overview

A centered hero section with a compact animated live activity feed under the headline.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ActivityFeedHero />

Activity Feed Hero.tsx

tsx

"use client";

import { motion } from "framer-motion";

const activity = ["Aditi scoped checkout", "Ravi pushed UI polish", "Maya approved launch"];

export function ActivityFeedHero() {
  return (
    <section className="rounded-xl border border-white/10 bg-black p-6 text-white">
      <div className="mx-auto max-w-xl text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-lime-300">
          Live build feed
        </p>
        <h3 className="mt-3 text-3xl font-black">
          Ship work where momentum is visible.
        </h3>
      </div>
      <div className="mx-auto mt-6 max-w-md space-y-2">
        {activity.map((item, index) => (
          <motion.div
            key={item}
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.08 }}
            className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/[0.04] p-3 text-sm text-zinc-400"
          >
            <span className="h-2 w-2 rounded-full bg-lime-300" />
            {item}
            <span className="ml-auto text-xs">now</span>
          </motion.div>
        ))}
      </div>
    </section>
  );
}