FreeCards

Spotlight Metric Card

Use this component for proof points, KPI highlights, dashboard summaries, and case-study metrics that deserve more visual weight than a plain number.

ReactTailwind CSSMotionCard

Conversion

38%

More demo calls after adding product proof above the fold.

Overview

A hover-aware metric card with a soft spotlight and animated progress bar.

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

<SpotlightMetricCard />

Spotlight Metric Card.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function SpotlightMetricCard() {
  return (
    <div className="group relative overflow-hidden rounded-xl border border-white/10 bg-zinc-950 p-5 text-white">
      <div className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
        <div className="absolute left-1/2 top-1/2 h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-lime-300/15 blur-3xl" />
      </div>

      <div className="relative flex min-h-[220px] flex-col justify-between rounded-lg border border-white/10 bg-white/[0.04] p-5">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-lime-300">
          Conversion
        </p>
        <div>
          <p className="text-5xl font-black">38%</p>
          <p className="mt-2 text-sm text-zinc-400">
            More demo calls after adding product proof above the fold.
          </p>
        </div>
        <div className="h-2 overflow-hidden rounded-full bg-white/10">
          <motion.div
            initial={{ width: "20%" }}
            whileInView={{ width: "72%" }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="h-full rounded-full bg-lime-300"
          />
        </div>
      </div>
    </div>
  );
}