Storytime with Nigel
- Client
- Xyzal - Sanofi
- Year
- 2024
- Stack
- Next.js, GSAP, WebGL
[0] The project
An interactive web platform combining storytelling with bespoke illustrations. It offers both pre-written stories and options for families to create their own, enhancing bedtime with technology and charm to suit all ages.
[0][0] Challenge
Help Xyzal create a tool that enables users to input specific words or preferences, leading to the generation of personalized bedtime stories.
[0][1] Approach
A predefined amount of stories to choose from, 3 different parts each that alter the story based on the users input.
[0][2] Result
A visual captivating interactive bedtime experience that connects parents and children.
Experience walkthrough
[1] Awarded by
- FWA
- FWA Of The Day
- FWA
- March FWA Of The Month
- 2022
- Awwwards
Homepage
Book selection
Dream Island
[1] The Experience
The perfect nighttime activity.
Crafted to be used right before bed, the experience allows parents and children to navigate and decide how the stories should evolve.
Choose a path
Dream Island parrot path
Sleepy Wizard
Noble Fish Knight
[2] Built for this project
Components
A selection of the elements I brought to life along the way.
Loading animation
Instead of a loading spinner we drop a book for each loading milestone, giving it a fun and playful twist.
Book carousel
A combination of CSS perspectives and GSAP Draggable to bring this carousel to life.
Story path selector
A playful selector, full of CSS masks.
[3] Credits
The Team
The people I had the pleasure of closely working with to bring this project to life.
- Designer
- Paula Kina
- Frontend Developer
- Hendrik Jan de Harder
- WebGL Developer
- Reinder Nijhoff
- Project Manager
- Tim Blokker