# Big Headline Hero with Stats Row > Hero with a huge headline over a rooftop photo and a stats row whose numbers roll like meter drums. Copy the React and Tailwind code or HTML free. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/big-headline-hero-with-stats-row). - Page, with a live preview: https://shadcn.exchange/r/weinc/big-headline-hero-with-stats-row - Screenshot: https://shadcn.exchange/shot/weinc/big-headline-hero-with-stats-row/light.png - Registry item: https://we.inc/r/big-headline-hero-with-stats-row.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/big-headline-hero-with-stats-row.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/big-headline-hero-with-stats-row.tsx` ```tsx import { useEffect, useRef, useState } from "react"; import { motion, useReducedMotion } from "framer-motion"; /** One photograph: a tiled roof with a row of panels, and a lot of open evening sky for the headline. */ const PHOTO = "https://images.unsplash.com/photo-1761158495585-eac721decf1b?auto=format&fit=crop&w=1600&q=80"; const PHOTO_ALT = "An orange tiled roof with a row of solar panels along its lower edge, under a wide pale evening sky crossed by overhead wires"; const firm = { name: "Sunward", trade: "Rooftop solar, fitted by our own crews", eyebrow: "Surveys booking for spring", headline: ["Run the meter", "backwards."], copy: "We survey, fit and look after solar panels and batteries for ordinary houses. One fixed price, one crew from scaffold to switch-on, and a meter that starts counting the other way.", }; const links = ["How it works", "Batteries", "Our roofs", "Prices"]; /** The stats row. Each `value` is shown on rolling meter drums. */ const stats = [ { label: "Roofs fitted since 2011", value: "2,418", prefix: "", unit: "" }, { label: "Typical first-year saving", value: "840", prefix: "£", unit: "" }, { label: "Panel and workmanship cover", value: "25", prefix: "", unit: "yrs" }, ]; /** The live stat: tenths of a kilowatt hour sent back to the grid today. It keeps counting while you watch. */ const LIVE_START = 317642; const LIVE_LABEL = "kWh sent back to the grid today"; const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; function Drum({ digit, delay, red, still }: { digit: number; delay: number; red?: boolean; still: boolean }) { return ( {DIGITS.map((d) => ( {d} ))} {/* Shading that makes the flat strip of numerals read as a turning drum. */} ); } /** A row of drums for a string such as "2,418". Commas stay still; digits roll. */ function Meter({ text, redLast, baseDelay, still }: { text: string; redLast?: boolean; baseDelay: number; still: boolean }) { const chars = text.split(""); const lastDigit = chars.length - 1; return ( ); } function formatTenths(n: number) { const whole = Math.floor(n / 10).toLocaleString("en-US"); return `${whole}${n % 10}`; } export default function BigHeadlineHeroWithStatsRow() { const reduce = useReducedMotion(); const still = Boolean(reduce); const root = useRef(null); const [live, setLive] = useState(true); const [tenths, setTenths] = useState(LIVE_START); useEffect(() => { const el = root.current; if (!el) return; const io = new IntersectionObserver(([entry]) => setLive(entry.isIntersecting)); io.observe(el); return () => io.disconnect(); }, []); // The live meter: a few tenths of a unit every second or so, only while the hero is on screen. useEffect(() => { if (still || !live) return; const id = window.setInterval(() => setTenths((t) => t + 1 + Math.floor(Math.random() * 3)), 1100); return () => window.clearInterval(id); }, [still, live]); const rise = (delay: number) => still ? {} : { initial: { opacity: 0, y: 28 }, animate: { opacity: 1, y: 0 }, transition: { type: "spring" as const, stiffness: 70, damping: 17, delay } }; return (
{/* The photograph and the big headline. */}
{PHOTO_ALT} {/* Low sun travelling across the sky. */}
); } ```