Mochi
A Clay Style template for a mobile app landing page.
A landing site for a habit tracker app, in soft clay: very round matte shapes, light from the top left and a soft shadow underneath, pastel clay colours on an oat ground. The sample app, Mochi, is fictional, and the store buttons are placeholders.
- For
- Mobile app landing page
- 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
Matte clay pebbles, a ring and a capsule pop out around the phone, squash as they land and float (three.js); every pebble on the page squashes when pressed.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): hero with the phone and the 3D clay welcome, three steps, a feature split with a second phone screen, the week tray (press a day to roll its pebble), home screen widgets, plans, questions and a closing card. - Try it (
try.html): make a habit pebble, pick its clay colour and press it to smooth it. Kept in this browser only, with an empty state and a limit message. - 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
- Try it
- 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.
