Hearth
A Clay Style template for an app onboarding flow.
A landing site whose centrepiece is a working onboarding flow, for a shared-home app (chores, groceries and bills for housemates). Clay Style: soft matte 3D clay objects, pillowy surfaces with a soft top highlight, 28 px radii, buttons pressed into clay that squish when pressed, pastels (peach, mint, powder blue, butter) with one deep plum anchor. The sample brand, Hearth, its housemates, prices and dates are fictional.
- For
- Onboarding flow
- Built with
- HTML, CSS, ES modules, three.js 0.186.1, Motion 14.6.0, anime.js 4.5.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
The hero's setup card is the real five-step flow, and every answer builds a matte clay house beside it (three.js): walls, roof and a name sign carrying the home's name, a clay pebble per housemate, a window per room, door and garden, then smoke from the chimney; each piece drops in and squashes like dough.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): the headline over a powder-blue stage where the setup card is the real five-step flow and a clay house builds beside it as you answer. Then how setup works (five clay pebbles in a groove), chores (a clay spinner that picks who takes the bonus job, and a rota you can tick), a shared grocery list with validation and an empty state, a plum bills card that splits equally or by room size with shares that add up to the penny, two plans, questions and a peach closing band with the finished house. - Set up your home (
setup.html): the full flow with a move-in date, room sizes, rota cadence and a review, beside a large sticky house. Answers carry over from the home hero and stay in the visitor's own browser. - 404 (
404.html): an empty clay plot with a "Plot available" sign. - Light and dark themes (a deep plum evening; 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
- Set up your home
- 404
Stack
- HTML
- CSS
- ES modules
- three.js 0.186.1
- Motion 14.6.0
- anime.js 4.5.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.
