Crumb
A Clay Style template for a pet food brand.
A landing site for a direct-to-door pet food brand, with a working portion dial at its heart. Clay Style: soft matte 3D clay objects, pillowy surfaces with a soft top highlight, 32 px radii, pill buttons pressed into clay (one tilted), warm sand and cocoa with tomato, sage, sky and butter. The sample brand, Crumb, its recipes, prices and feeding guide are fictional; the portion maths is a common starting guide, not veterinary advice.
- For
- Pet brand
- Built with
- HTML, CSS, ES modules, three.js 0.186.1, Motion 14.6.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A portion dial beside a matte clay bowl (three.js): pick dog or cat and slide the weight, and the grams a day, the two meals and how long a tin lasts update while bone, fish and ring biscuits pour into the bowl and squash as they land; lower the weight and the top pieces lift back out; recipes recolour the bowl.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): "Baked slow. Eaten fast." in heavy rounded caps beside a cocoa card where a portion dial (dog or cat, weight) works out the grams a day, the two meals and how long a tin lasts, while a clay bowl fills to match. Then three recipes (one featured, two stacked; each can recolour the hero bowl), a clay plate of ingredients linked to a list, the tin's journey as a track a clay tin rolls along, a price table worked out from the same maths with your pet's row marked, questions and a tomato closing band. - Build a plan (
plan.html): name, dog or cat, weight, age, how active, recipe (cats get the salmon one); a live summary with grams, meals, tin length, refill timing and price per refill and per day; validation and a saved state. - 404 (
404.html): an empty bowl, licked clean. - Light and dark themes (the kitchen after dark; the clay keeps its colours). The toggle remembers the choice; otherwise the system setting is followed. Phone to wide desktop, visible focus, reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Build a plan
- 404
Stack
- HTML
- CSS
- ES modules
- three.js 0.186.1
- Motion 14.6.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
