Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js)

A hero section for a premium pet shop, built with React and Next.js, whose mascot follows the visitor's attention. The Commander, a Maine Coon in a beret, is an AI-filmed video turned into 90 frames that the page scrubs live on a canvas: move the pointer and he looks where you are.

What it does

• Follows the pointer. He reads the headline, looks down at the products, and turns to whatever is hovered or keyboard-focused.
• Watches the search. While visitors type, he watches the field; suggestions appear as they type, with the matching words highlighted.
• Nods at every add-to-cart. The product's thumbnail flies to the cart, the badge bumps, a toast confirms, and he nods his approval.
• Scans the room when left alone. On phones, scrolling steers him, and on Android tilting the phone does too.
• Stays smooth and sharp. Frames load coarse to fine without blocking the page, the next frames are decoded ahead of the motion, and the poster is the first paint, so nothing ever waits for the video.

What's included

• The hero: a headline with a hand-drawn underline, a pet-type selector with a sliding pill, a search combobox, two calls to action, and three "Inspected this week" product cards with pointer-lit borders and an approval stamp.
• A nav and a demo cart: fly-to-cart, badge and toast, ready to swap for your own store.
• The sections of a full page in the same style: a trust rail, "The inspection" (four checks that light up in turn, with a rotating seal), counting stats, a "Shop by need" bento (monthly box, vet chat, nutrition label, new arrivals), a newsletter sign-up and a footer.
• Light, dark and auto themes. Auto follows your site's .dark class.
• The frames: 90 desktop and 90 mobile WebP frames plus posters, hosted for you.

Accessibility and performance

• The mascot is decorative: everything he does is also said in text. Keyboard focus steers his gaze exactly like hover, the search is an ARIA combobox, the pet types a radio group, and every control has a visible focus ring.
• Under reduced motion he is a still portrait: no scrubbing, parallax or marquee.
• Phones and Save-Data connections get a lighter frame set, and the memory used for frames scales with the device.
• About 20 KB of JavaScript (gzipped) for the hero itself, besides React and motion.

Stack

React 19, Next.js (App Router), TypeScript, Tailwind CSS 4, motion and lucide-react. Fonts: Fraunces and Manrope from Google Fonts.

After installing

1. Load Fraunces and Manrope in your layout with next/font, using the variables --font-fraunces and --font-manrope.
2. Render <CommanderHero theme="dark" /> (or "light", "auto") inside <CartProvider>.
3. Edit components/hero/hero-config.ts: the copy, categories, products, prices and trust claims all live there. You can also pass your own catalogue through the products prop.

All product names, prices, ratings and shop claims are placeholders, marked in the config: replace them with your own.