Tumble
A Clay Style template for a toy shop.
A small online toy shop in soft clay: matte rounded toys rendered in three.js, pressed-clay pills, very round cards with a lighter top edge and a soft shadow underneath. The sample shop, Tumble, is fictional; prices are samples and the basket is a demo with checkout switched off.
- For
- Toy shop
- 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 matte clay ring stacker builds itself in a deep teal card: five rings drop onto the peg and squash, the stack sways toward the pointer and breaks out of the card edge; every toy image is rendered from the same three.js models.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a deep teal hero card where the clay ring stacker builds itself and breaks out of the card edge, shop-by-age blocks that step up like stairs, a bestseller bento (one big tile, four small), a two-tap gift finder with an empty state, the workshop story with a photo, and a season letter sign-up with error and thank-you states. - Shop (
shop.html): all ten toys, age filter (linked from the age blocks with?age=), sort by price or name, add to basket, empty state. - Basket drawer on every page (kept in this browser only), with an empty state and a total.
- 404 (
404.html). - Light and dark (follows the system, toggle remembers the choice), phone to wide desktop, keyboard friendly, reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Shop
- 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.
