I built a ten-minute dog reset that leaves room for the dog’s answer

The useful thing my dog teaches me most often is that escalation does not need a big fix. Sometimes what changes the next ten minutes is a lower volume, an open window, and one cue that has never asked too much.

What I built

For the Dog Days Edition of the Weekend Challenge, I built Comfort Paws Lab, a small interactive field guide for the human end of dog care. It turns the vague question, “what does my dog need right now,” into a calm three-step reset: reduce the demand in the room, offer one familiar cue, and pause long enough to notice the answer.

I wanted the interaction to resist the usual temptation to score, diagnose, or optimize a dog. There is no behavior grade here. Each step is a practical invitation to make the environment easier and observe what changes. The field-guide format is deliberate too. I wanted it to feel like a useful note left on the kitchen table, not an app that asks someone to become a different person before dinner.

Demo

The interactive demo is available here: Comfort Paws Lab.

The ritual selector works with a pointer and keyboard. The quiet food study later in the page is there for the person who remembered to care for the dog and needs a minute to care for themselves too. The experience includes a dedicated Noodle Note landing page because a home routine is rarely only about one species in the room.

Code

The source-and-asset archive includes the project source, all five original cover images, and the field-guide design notes. The project is built in React and TypeScript with CSS carrying the visual work. The dog illustration, note cards, paw marks, steam, and ramen scene are composed from ordinary HTML and CSS primitives rather than image assets.

The interaction is intentionally small. A selected reset step is stored in React state, then revealed in a labelled tab panel. The important part is not the amount of code. It is that every action has a visible result, a keyboard path, and language that does not pretend to know more about a dog than the human beside them can observe.

const [selectedRitual, setSelectedRitual] = useState(0)

<button
  role="tab"
  aria-selected={selectedRitual === index}
  aria-controls="ritual-tab-panel"
  onClick={() => setSelectedRitual(index)}
>
  Step 0{index + 1}
</button>

How I built it

I started with a question that had nothing to do with features: what would make a tired person feel less judged when they are trying to help a dog settle. That led to the page’s editorial field-note structure, warm parchment ground, ink-blue reading rhythm, and persimmon actions. The visual system repeats a paw-loop route, stitched labels, paper notes, and small domestic objects so the site feels collected rather than manufactured.

Accessibility shaped the interactions from the beginning. The reset is a real tab interface with a labelled result panel, arrow-key navigation, Home and End support, visible focus, and reduced-motion care. I also kept the primary instruction short enough to scan at a stressful moment. “Set the room down a notch” is more useful than a clinical category when someone is standing in a noisy kitchen with a restless dog.

Prize categories

I am submitting this as a general Dog Days Edition entry. I did not use a prize-category technology because the strongest version of this project was a focused, lightweight experience that makes a small moment of care easier to begin.

The detail I am proudest of is the one the interface never announces: the final step asks the person to let their dog decide whether the moment is enough. That is a small design choice, but it is the whole point of the project.