HadootaInteractive storybooks
An illustrated storybook experience where the shelf, the cover and the page turn are part of the story. I used AI-assisted building to explore the space between a website and a tactile reading ritual.
What I brought
Experience direction, story art direction and AI-assisted interaction development.
How I built it
- 01
Start with the feeling
Use a physical book as the interaction model: choose it, bring it closer, open the cover and turn a page.
- 02
Build the object
Move beyond flat CSS transitions into hinged covers, cloth spines, layered pages and curved page turns. Adapt the book geometry from StoryComet, then connect it to Hadoota's reader.
- 03
Tune the experience
Iterate the continuity between shelf and reader, with narration, sounds and illustrated stickers. Include a reduced-motion path so atmosphere does not become a barrier.
Keep the same book from shelf to story.
A continuous shelf-to-table transition makes opening a story feel like handling an object, rather than navigating to another screen.
The thinking behind Hadoota
Feeling first, then the object.
A physical book is the model: choose it, bring it closer, open the cover and turn a page.
Atmosphere should not block reading.
A reduced-motion path keeps the atmosphere from getting in the way.
Direct product capture. The open book brings reading, narration and scene interaction together.
Direct product capture. Selecting a word reveals its Arabic meaning within the reading context.
Original story artwork used in the prototype.
Original environment artwork used by Hadoota.
The library and reader images are direct product captures. Cover and environment images are original artwork used by the prototype.
Book geometry adapted from StoryComet; the exploration combines that interaction reference with Hadoota's own visual direction.