# Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js)
> Interactive pet shop hero section for React, Next.js and Tailwind CSS: an AI-filmed cat follows the cursor at 60 fps, watches shoppers type in search and nods at every add-to-cart. Ships with product cards, page sections, and light and dark themes.
- Kind: Component (Cards)
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: card, grid, hero, video, ecommerce, pet-shop, frame-sequence, nextjs, react, tailwind, hero-section, mouse-tracking
- npm packages: lucide-react, motion
- Published: 2026-10-08
- Updated: 2026-10-08
- Page: https://upfork.dev/products/pet-shop-hero
## How to get it
Install it into a React + Tailwind project with the shadcn CLI:
```bash
npx shadcn@latest add @upfork/pet-shop-hero
```
It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.
## About
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 `` (or `"light"`, `"auto"`) inside ``.
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.