Pawfection
The site had to open the van door.
A single-file site with a hash router, built to show rather than tell. The centrepiece is a horizontal timeline, run by its own state machine, that tells the founder's story while the camera follows on its own; alongside it, a slideshow of the van's interior in real photos of the vehicle. Whatever only the business would know is marked [CONFIRMAR] ("to confirm") instead of being made up.
- Design and front-end
- Website · Animation · Concept
Context
What was live
- The van appeared as a footer detail
- Stock photography in place of the real service
- Nothing showed the inside of the vehicle
- The business's differentiator stayed invisible
Challenge
Mobile grooming sells an invisible experience.
One dog at a time, no cage, no car ride, inside a fitted van parked in the customer's own driveway. Describing that in prose convinces nobody.
Research
- The business's public information, on its Facebook page: the basis of everything the site claims.
- Real photos of the vehicle, inside and out, in place of stock imagery.
- Anything only the business would know, such as a real photo of the groomer, the post captions or the licence number, was left as [CONFIRMAR] ("to confirm").
Decisions
A timeline that drives itself
- The first version had a horizontal scrollbar and cards alternating above and below: you had to scroll the page to read each stop.
- A custom state machine walks the paw from milestone to milestone, with the camera following and two or three milestones always in view.
- The horizontal scrollbar went: anyone who wants to skip ahead clicks.
- Manual control comes off the critical path; clicking is a shortcut, not a requirement.
The van's interior, in real photos
- The whole differentiator sits inside a van the customer has never seen from the inside.
- A "step inside the van" slideshow made of real photographs of the vehicle.
- Three photos of the interior, the real ones, with no stock image to fill the gaps.
- Show, rather than tell.
Cut-outs with an organic edge
- The first cut-out, done with mask-image, left the photo looking ghostly.
- Full opacity on the photo and an asymmetric organic edge.
- The long fade goes: the photo meets the background in a short transition.
- Melt only 5 to 8% of the edge.
Demonstration
Services page. The brand's violet on the headline and the button, kept flat. 
An asymmetric organic edge, with a 5% melt only at the rim. 
The whole homepage. Wherever only the business would know, such as the groomer's real photo or the post captions, the site says [CONFIRMAR] ("to confirm").
An unsolicited prospecting concept. This is not Pawfection's official website.
Interactions
- At each of the six milestones, the same phrase: the paw travels, enters the circle, pauses, reveals the card, exits and moves on.
- The camera follows on its own, and a click jumps to any point on the line.
- No animation library: the state machine is custom.
Implementation
- One file: the whole SPA, with a hash router, across six screens.
- Images optimised with sharp; checks run with Playwright.
- Built one section at a time (the hero first, the rest in sequence), even when running ahead was possible.
What was built
- A single-page site with six screens
- An animated timeline of the founder's story
- A slideshow of the van interior, in real photography
- Images retouched, cut out and optimised
- Fields marked [CONFIRMAR] ("to confirm") wherever only the business would know the answer
Technology
- sharp
- HTML
- CSS
- JavaScript
- Playwright
Outcome
An unsolicited concept, built from public information. The [CONFIRMAR] fields are still waiting for what only the business knows, and this is not Pawfection's official website.
6
milestones on the animated timeline
1
file: the whole SPA, with a hash router
3
real photos of the van interior, none from stock
0
animation libraries: the state machine is custom
Learnings
- Cutting out a photograph is where the finish shows or vanishes, and the difference lay in melting only 5 to 8% of the edge.
- A repeated pattern reads as copy-and-paste: the depth came from CSS layers, not from tiling.
- Manual control on the critical path makes people work to read; the second version let the timeline drive itself.
