Did you know your home reflects how much you read?

Not a metaphor. A literal one.

Add a book. Set a timer. Watch your apartment slowly come alive as you read. Dust clears in real time. Rooms bloom from neglect to warmth. Stop reading and watch it all fade back.

Live Site https://shelf-life.figma.site Figma Community https://www.figma.com/community/file/1647020155647824615 Figma Make https://www.figma.com/make/ZLJyeCjm5N9r24VVJ3tc3O/Shelf-life?t=auxQcNct04z0LAgf-1

The Problem

Most reading trackers are lists. Cold. Forgettable. They record what you have not done without making you feel anything about it. You open the app, see a number, close the app. Nothing changes inside you.

Shelf Life is built around a different belief. Your habits should live somewhere. They should breathe. They should have consequences you can see.

Your bedroom holds the book you read before sleep. Your kitchen holds the article you meant to finish over coffee. Your study holds the essay you keep putting off. Read consistently and each space blooms back to life through an organic dust clearing animation driven by your actual reading time. Neglect your reading and the dust returns. Your home becomes a mirror of your habits. Honest and quiet and impossible to ignore.

I deliberately chose not to let users upload or read books inside the app. The moment you can read inside a tracker it stops being a tracker and starts competing with the experience of actually holding a book. Shelf Life honours the ritual of reading without replacing it.

How It Was Built

I started with a design philosophy before I started with a prompt. Warmth. Craft. Human first. Every decision was made to make the user feel something not just complete a task.

The isometric apartment and all ten room images including the neglected and bloomed states for each of the five rooms were generated entirely using Figma Weave. I used Figma for rapid design ideation and layout exploration before moving into Figma Make.

In Figma Make I built the full app in React and TypeScript. The core technical challenge was the dust clearing animation. It uses an SVG mask system with organic circular spots growing via requestAnimationFrame running in parallel with the reading timer. Each spot has its own delay and duration so the reveal feels natural and alive rather than mechanical. The same spots reverse in mirror order when the room returns to neglected. The animation runs both ways. Forward when you read. Backward when you stop.

Room specific ambient music plays in each space. The bedroom has soft rain and piano. The kitchen has morning acoustic warmth. The living room has fireplace crackle. The study is near silence. Each room sounds like it feels.

Tools Used

Figma Weave for AI image generation across all ten room backgrounds Figma for design ideation and layout Figma Make for the full app built in React and TypeScript

The Moment That Matters

Start a reading timer. Watch your room slowly clean itself in real time. Organic dust spots grow across the image revealing the bloomed version beneath. It is not a progress bar. It is not a percentage. It is your home breathing back to life because you chose to read.

When the timer ends the room holds its bloomed state then gradually returns to neglect. The direction of the animation tells you everything about your relationship with reading that week.

Most people go quiet when they watch it happen for the first time.

Excellent presentation 👏

Most kids’ apps still feel like forms with cute colors.

Pick an option. Tap next. See a card. Done.

I wanted WonderNest to feel different.

WonderNest is a magical interactive feeling playground where children don’t just answer questions — they build, touch, drag, unlock, collect, and watch the world react.

The idea is simple:

Children often feel things before they can explain them.

So instead of asking them to describe every emotion, WonderNest lets them create a tiny magical world around it.

They can:

→ drag weather into the sky → place a buddy inside the world → draw a feeling seed → grow that seed into a story → tap clouds to soften rain → drag an umbrella over Milo → light lanterns with kind words → cool a volcano with slow breaths → collect story badges → save each story to a magical shelf

The goal was to make emotional expression feel less like answering a form and more like playing inside a living cartoon world.

Every action creates a visible reaction.

A tap changes the weather. A drag grows the world. A completed game unlocks a badge. A finished story becomes a collectible book.

Built for the Config Makeathon using Figma Make.

Still improving the motion, interactions, and visual polish — but this direction feels much closer to the kind of experience kids would actually want to explore.

WonderNest: a tiny story world for big feelings.

Love the visual direction here. The attention to detail really stands out.