Little Lump
A Clay Style template for a kids' learning app.
A landing site for a letters and numbers app for children aged 3 to 6, written for parents and nursery teachers. Clay Style throughout: matte three.js clay letters, numbers, beads and a pot, fat rounded tiles that look pressed, round buttons that sink. The sample brand, Little Lump, and its prices and policies are fictional.
- For
- Kids' learning app
- 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
Five matte clay letters and numbers lie flat on a long clay shelf, stand up one after another and squash like dough when pressed, saying their sound; a working count-to-five lesson with beads that drop into a clay pot.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a centred headline over a long clay shelf where five pieces (A, b, 3, c, 5) stand up one after another; press one and it squashes and says its sound. Then three ways to play in a staggered row of three sizes, a week of play (today's tile is lifted), a grown-ups section with a sample Sunday note and the list of things the app never does, two plans, questions and a butter closing band. - Try a lesson (
lesson.html): a working "count to five" game (beads drop into the pot, the number grows, the pot wobbles at five, "Tip them out" resets) and five letters to press. - 404 (
404.html): a squashed lump of clay. - Light and dark themes (dark is the same clay on deep plum), phone to wide desktop, visible focus, reduced motion respected. Where the browser has a voice, presses also say the sound aloud (Web Speech API); the caption always shows it.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Try a lesson
- 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.
