Pupil is a one-page Astro template for dog daycares, boarding kennels, groomers and puppy schools. Its host is Pip, a lifelike pup in film-quality renders who turns his head to follow the pointer anywhere on the page.
Meet Pip
- He looks wherever the pointer goes, tilts his head at buttons and glances around when nobody plays with him.
- In the hero the cursor becomes a tennis ball: click to throw it and he catches it.
- As the hero scrolls away he flies into a round Book a visit button at the corner of the screen, then sits beside the booking form and greets your dog by name.
- He is played from three short clips that load after the page is ready, with a smaller cut for phones. His still shows until they do.
Built for a dog care business
- Services with prices, a pup cam monitor, a day in the life, safety promises with figures, the team, a wall of reviews, daycare plans and add-ons, an FAQ and a booking form with a meet-and-greet flow.
- Privacy, terms and cookie pages.
Playful motion that stays out of the way
- Service cards dealt into a row, a monitor that opens like an iris, a pinned day with a trail of paw prints, polaroids you can drag and flip, a swinging dog tag and a footer wordmark that watches you.
- Smooth scroll by Lenis, animation by GSAP, and prefers-reduced-motion support.
Easy to make your own
- Customize it by talking: a built-in AI agent skill lets Claude Code, Codex, Cursor or another agent change the content, replace photos, swap Pip's clips, connect the booking form and deploy, without you touching code.
- Every word, price, list and Pip's lines live in typed content collections (YAML and Markdown), checked at build time.
- Swap Pip for your own mascot in one command: npm run pip turns head-turn clips from any video model into his sweep, measures where he looks in every frame, saves his stills and checks the result (macOS, Windows and Linux).
- SEO built in: title templates, canonical URLs, Open Graph and X cards, JSON-LD (LocalBusiness with opening hours, services with prices, FAQPage, BreadcrumbList), sitemap and robots.txt.
- Cookie banner with Google Consent Mode v2. Google Tag Manager or GA4 come from environment variables and load only after consent.
- Self-hosted fonts. Mobile Lighthouse: Performance 94; Accessibility, Best Practices and SEO 100.
- Documentation for setup, content, customization (including making your own mascot clips), media, SEO, analytics and deployment, plus a best-practices guide with a launch checklist.
