The brief
This is a website demo for a local XL Bully breeder in Vacaville, California. People shopping for a big dog want three things before they call: what the dogs look like, what they are like at home, and how getting a puppy works. The site had to answer all three on one page, look as heavy as the dogs, and end at one clear next step, the waitlist.
What we made
- A one-page site that runs from the opening hero down to the contact block
- A moving hero of the stud dog, with a phone version and a fallback for phones that block video
- An XL section and one screen per dog, with weight, registry and health tests left as blanks for the breeder
- A scroll reveal that opens a golden-hour backyard scene through a merle coat pattern
- An At home strip of six real phone clips that slides sideways as you scroll down
- Pack cards that flip to each dog's paperwork, a first 8 weeks timeline, sample puppy cards and a waitlist form
- A gold seal of the logo mark in 3D that you can drag to turn
- A logo system in nine SVG files: stacked and horizontal logos in light and dark, a crest, a monogram and the mark on its own
- A 1:33 silent walkthrough video of the site, ready to narrate
How it works
It is a static site with no build step. GSAP with ScrollTrigger runs the scroll scenes, Lenis smooths the scroll, and three.js draws the seal. The scripts and the fonts ship with the site instead of loading from other servers.
The backyard reveal is a canvas. A merle pattern image becomes a mask, and as you scroll, the bright scene breaks through it in the shape of the coat. When the reveal finishes, the backyard loop starts playing. The hero picks a 2K video on a computer and a 1280 one on a phone. If the phone blocks autoplay, for example in Low Power Mode, the video swaps for an animated image that plays once and holds, so a play button never shows up.
The six home clips only play while they are on screen. The header checks which section sits under it and flips the logo colors on the light ones. The seal is the logo mark, extruded from its SVG path into a gold coin that spins slowly until you grab it. All motion respects the reduce motion setting.
The brand comes from one of the dogs. The mark is traced from the stud, Wa'Kabi. The colors are black #0E0D0C, gold #B8893B and bone #F4EFE6, and the type is Cinzel with Barlow Condensed.
What we threw away
The work started as three homepage directions on boards: Black Label, Raised at Home and Built Heavy. The final site combines the first two and leaves the third out.
We also dropped the plain play button for phones that block video. The page falls back to a moving image instead, so the hero never sits there waiting for a tap. In the review copy, the waitlist form doesn't pretend to send. It checks the fields, then says the list opens when the site goes live and gives a way to reach the breeder now.
Limits
This is a demo, not a launched site. It is set to stay out of search engines, and the waitlist form doesn't send anything yet. Prices, ready dates, parents, deposit terms, health tests and paperwork are bracketed blanks waiting on the breeder, and the three puppy cards are sample listings.
Not every picture is a photo. The studio portraits, the hero, the puppy images and the backyard scene were generated with an image model from photos of the breeder's own dogs. The hero and backyard loops are Kling 4.0 video clips, upscaled to 2K. The cover on this page is a frame of the hero, and the loop shows the backyard reveal, so both show that generated footage. The pack cards are real photos with no retouching, and the At home clips are real phone footage, sharpened with an AI upscaler but not changed.
