The World of Flow
The World of Flow is an immersive website inspired by the 2024 film Flow, using various front-end techniques like web audio API, canvas objects, and CSS animation to visualize flowers, clouds, and butterflies. Combining the essence of nature, an adventurous soundtrack, and the quintessential darling black cat from Flow, my project uses these digital mediums to bring out the beautiful randomness of nature and expand upon the scenes of the film.
March - May 2026
ROLE
Interaction Designer
Javascript
HTML/CSS
Illustrator
BUILDING INTERACTIVE SCENES THROUGH CODE
Home Page: Navigation
Page Planning
- Three different icons to represent each page that the user can click into:
- Butterfly sends to sky page
- Fish in little puddle sends to fishing
- Flower sends to field
- Three main pages based off of the elements land, ocean, and sky
- All illustrations or SVG designed by me in Illustrator or directly in browser
Field of Flowers
Main coding technique: Canvas Objects
- Draws random flowers on click with canvas objects – taking pixel color data from the background image to blend in with the background
- Based on the field of flowers scene on Windmill Island from the film
- Flow cat on each of the pages with eyes tracking mouse and butterfly, but just different backgrounds for each
- A larger butterfly, along with the cat’s eyes, follows the mouse pointer
- On each page, clicking on the cat goes to next scene
Execution
Fishing
Main coding technique: CSS Animation
- Fish are also random hues of blue, randomly changing the hue and saturation of the original illustrator PNG
- Fish swim back and forth using CSS
- All original fish spawn at random places and have random speed
- When the user clicks, new fish will spawn in at that point, swimming back and forth
- Based on the scene “Fishing” from the film
Execution
Windmill Island
Main coding technique: Web Audio API
- Web audio API change size of clouds based on music wavelengths
- Butterflies rotate with CSS, giving them an active appearance when static
- Butterflies are summoned to mouse pointer on click and jump to a new random position after, creating an illusion of moving around when mouse is not held
Execution
Product
This project is designed for web and contains audio. Best viewed and interacted with on desktop.
Click around each page and click the cat to move onto the next page!