PIXIA

Inspiration Pixia was inspired by the idea of making reading more playful and engaging. Instead of a traditional blog, we envisioned a retro board-game-style platform where each article becomes a tile on a winding path. The concept came from combining our love for storytelling with elements of gamification, so that reading doesn’t just inform—it feels like playing.

How We Built It We built Pixia using Next.js and integrated it with the Storyblok CMS through its API (using our preview token). Articles stored in Storyblok dynamically appear as tiles on the homepage. Each tile displays the article title, thumbnail, and XP badge. Clicking a tile opens the full article page, which includes title, summary, featured image, and body content.

We designed the homepage like a board game. A dice roller feature was added to let users discover a random article. To encourage engagement, we built an XP system stored in local storage, so users earn points for reading and completing articles. We also added a leaderboard to bring in a competitive element.

What We Learned Through this project, we learned how to:

Integrate a headless CMS (Storyblok) with a gamified frontend.

Manage state and progress without a backend using local storage.

Design playful yet minimal UIs that balance retro aesthetics with modern responsiveness.

Add interactive animations (hover effects, XP updates, dice roll mechanics) to boost user experience.

Challenges We Faced

Initially, only article titles were rendering from Storyblok; we had to debug and properly map the API response to display full content (summary, body, and images).

Storing and updating XP consistently across multiple pages with only local storage required careful handling.

Making the board game layout responsive while keeping it visually appealing across desktop, tablet, and mobile devices was tricky.

Designing subtle animations that felt playful but not overwhelming was a balancing act.

Outcome Pixia is now a fully functional, multi-page interactive blog platform that turns reading into a game. Users can roll dice, earn XP, and track progress—transforming blogs into a fun, gamified journey.

What’s Next for Pixia

Pixia has laid the foundation for a gamified reading experience, but we see plenty of opportunities to grow. Next, we plan to:

User Accounts & Cloud Sync – Move beyond local storage by enabling sign-ups and storing XP, progress, and achievements in the cloud.

Community & Multiplayer Mode – Introduce challenges, friend lists, and collaborative XP quests where readers can unlock articles together.

Achievements & Badges – Add milestone-based rewards like “Explorer” or “Speed Reader” badges for completing sets of articles.

Personalized Dice Rolls – Use AI/ML to recommend surprise articles based on a user’s interests when rolling the dice.

Mobile App Version – Expand Pixia into a cross-platform mobile app for even more accessible, on-the-go gamified reading.

Extended Leaderboards – Scale the leaderboard to be global, letting readers compete beyond their local device and foster a true community.

Our vision is to make Pixia the Duolingo for blogs and storytelling—where learning and reading are gamified, social, and fun.

Built With

• and-leaderboard-data)-design-&-styling:-pixelated-retro-fonts
• avatar
• css-frameworks-&-libraries:-next.js
• custom-images-(bg
• framer-motion
• framer-motion-(for-animations)-cms-&-apis:-storyblok-headless-cms-(preview-access-token-api)-state-&-storage:-local-storage-(for-xp
• git
• html
• javascript
• local-storage
• logo
• next.js
• node.js
• npm
• progress
• react
• rest-api
• storyblok-api
• tailwind-css
• thumbnails)-hosting-&-deployment:-vercel-(auto-deployment-from-repo)-extra-features:-dice-roller-(random-article-fetch)
• typescript
• vercel
• xp-progress-bar