Moss Club
A Pixel Art template for a chat community.
A landing site for a chat-server community, here a friendly club for people learning pixel art. Pixel Art in daylight, like an old desktop chat client printed on paper: 4 px ink borders, square corners, solid offset shadows, a title bar on every window, a dot-matrix face for headings and labels. The sample community, Moss Club, its members, channels, events and messages are fictional, and no real chat platform is named or shown.
- For
- Chat community
- Built with
- HTML, CSS, ES modules, 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 is a working pixel chat client: a campfire banner loops in 8 fps steps with members sitting round it, the sample conversation types itself in, and you can post; every avatar is a 16 x 16 creature made from its handle, so typing your handle in the join window builds your creature live and joining seats it at the campfire.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): "Draw small. Post often." beside a working chat window (campfire banner, channel list, the sample conversation typing itself in, a message box you can post from, with a member answering). Then the channels as a two-pane window with a live preview, this week as a seven-day strip with today marked and Remind me toggles, today's prompt with a working 16 x 16 drawing grid (palette, eraser, clear, another prompt, post to the channel, save as PNG), five role badges to pick from (up to two), house rules and questions, and a join window where your creature is built from your handle as you type. - Code of conduct (
rules.html): the six rules, how reporting works, volunteer mod hours and a one-question check on giving useful feedback. - 404 (
404.html): an error window,#channel-not-found, with a surprised creature. - Light (parchment) and dark (the same windows after dark). The toggle remembers the choice; otherwise the system setting is followed. Phone to wide desktop, visible focus, keyboard support for tabs, the grid and the badges, reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Code of conduct
- 404
Stack
- HTML
- CSS
- ES modules
- 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.
