Fragment
Body region
Heart
Meaning
Companionship
Holon
A product prototype where personal reflections become meaning particles and assemble into a breathing body.
The One-Line Idea
Most personal tools ask users to write things down.
Holon asks:
What if reflection could become something you can see, move through, and return to?
Why I Built This
I was interested in a problem that sits between journaling, memory, identity, and interface design.
Most reflection tools store personal thoughts as text. Some organize them into tags, folders, cards, or graphs. But those structures still feel external to the user.
I wanted to explore a different model:
What if personal meaning could feel embodied?
The user writes something true. Holon identifies symbolic meaning. Each signal becomes a dot. The dots assemble into a relaxed human body. The body becomes the interface.
The Design Challenge
The challenge was not simply to design a beautiful screen.
Holon had to move through very different states:
- empty canvas
- meaning detection
- particle formation
- body reveal
- region zoom
- dot detail
- privacy
- presentation
If each state felt visually or emotionally disconnected, the whole product metaphor would break.
So the main design challenge became:
How do you make a complex, cinematic, multi-state product feel like one continuous living interface?
My Workflow
I used Stitch first to shape the product language.
I started with a design.md file so the interface would not drift from screen to screen. The file defined the dark cinematic space, glass surfaces, soft glow, particle-body language, motion principles, and privacy tone.
Then I worked screen by screen. That gave me control over the flow. I could review one state, refine the prompt, and use the strongest result to guide the next screen.
Once the essential screens were ready, I exported the Stitch project as a ZIP and moved into Antigravity.
Key Product Decisions
Body, not graph
IdentityWhy it mattered
The product needed to feel embodied, not like another knowledge tool.
Trade-off
Less familiar than a graph, but more emotionally distinct.
Meaning, not data
ToneWhy it mattered
The language needed to feel human and private.
Trade-off
Less analytical, but more aligned with the product tone.
Correctable placement
AgencyWhy it mattered
Holon can suggest, but the user owns the meaning.
Trade-off
More interaction complexity, but higher trust.
Privacy by default
TrustWhy it mattered
The product holds intimate meaning.
Trade-off
Sharing becomes more controlled, but safer.
Motion as UX
IdentityWhy it mattered
Motion explains transformation and memory.
Trade-off
Higher implementation complexity, but stronger product identity.
Final Experience
Making the prototype operational
After exporting from Stitch, I moved the project into Antigravity to turn the screen direction into a working prototype.
This was where the product became more than visuals.
I worked on the state flow, particle timing, local routing rules, saved states, dot placement, and interaction polish. Several decisions came from testing the product directly — for example, preventing the body from re-forming every time the user returned from a region, making private dots visible to the owner, and fixing region hover so the body felt accurate.
Antigravity helped me move from generated screens into a product I could test, adjust, and record as a real experience.
Product Logic - How dots find their place
For the prototype, I used a local symbolic routing system.
The goal was not to make Holon feel like a black box. It needed to be explainable.
What I'd Improve Next
If I continued Holon, I would focus on four areas:
First, testing whether people understand the body metaphor without explanation.
Second, improving how dots are arranged as the body becomes denser.
Third, strengthening accessibility and keyboard interaction.
Fourth, adding secure cloud persistence, export, and sync.
Other Cases
View more works