Get started
Get started
Install with npm, then import the styles after Tailwind. Every class starts with gx-.
npm i gamifiedui-css gamifiedui-icons
@import "tailwindcss";
@import "gamifiedui-css";
@import "gamifiedui-icons";Controls
Buttons
New character
Quest log and settings
The iron ore
Lost cat
Dragon's den
Menus and navigation
Sort by ▼
Level select
Time and dates
Type YYYY-MM-DD or pick from the calendar.
Pick the first day, then the last.
Daily login
File upload
Uploads
Nothing uploaded yet.
Game HUD
Party
- HP
- 100 / 100
- MP
- 26 / 40
- XP
- 42%
Bag
- Move WASD
- Interact E
- Menu Esc
HUD
The iron ore
- Talk to the blacksmith(done)
- Mine iron ore1/3
- Return to the village
Press 1, 2 or 3, or click a skill.
Leaderboard
| Rank | Player | Level | Score |
|---|---|---|---|
| 1 | Ayla | 42 | 98,120 |
| 2 | Bob | 39 | 87,400 |
| 3 | Chen | 37 | 80,050 |
| 4 | You | 12 | 12,300 |
| 5 | Dee | 11 | 9,870 |
Feedback
Alerts and notifications
New quest
The blacksmith wants 3 iron ore.
Saved
Progress written to slot 1.
Bag almost full
18 of 20 slots used.
Connection lost
Reconnecting to the server.
Hints and status
E Talk to the Old Sage Esc Menu
Made with gamifiedUI · Sponsor · Share your theme
Dialogue
Particles
Mini-games
Gauges, a rhythm lane and a four-way pad for quick-time games. Your game loop writes the numbers as custom properties; holdButton() keeps a hold going when a thumb slides off.
Timing
Rhythm
Sound effects
gamifiedui-sfx makes chiptune sounds with Web Audio, so there are no audio files. Add data-gx-sfx="coin" to any button. Most buttons on this page already have one.
Media and scenes
Sprite and isometric
Images and video
Desktop shell
World map
Route map
Starts fitted to the width. A plain wheel scrolls the page; hold Ctrl (⌘ on Mac) to zoom. Plates size themselves to the labels in each language.
Icons
Icons
341 pixel icons on a 16px grid, including emoji and a Hong Kong set. Each one is a single CSS class.
Animated
Frame strips played with steps(). They hold still under reduced motion.
All icons
Every icon has an animated twin: swap gx-i-NAME for gx-ia-NAME. Stop them with gx-icon-paused, gx-icon-hover-play, or gx-icons-paused on a container.