Ask someone where rice comes from and most people will probably say Asia. That's partly true, but rice was actually domesticated twice.
Oryza sativa emerged in the Yangtze River Basin around 9000 BCE, while Oryza glaberrima appeared in the Niger River Delta roughly around 3000 BCE. These 2 distinct grains developed independently, thousands of years apart.
While pondering rice's origins (as it's about 70% of my diet personally), an interesting design question came up. How do you tell a story that spans thousands of years and multiple continents without reducing it to a static timeline, a map full of arrows or… making it boring. We'd been looking at projects from pudding.cool for inspiration because 1. they're really cool and 2. they treat the browser as a storytelling tool. That influence led us towards a scrollytelling format built in React and using framer motion to handle transitions. This gives enough control to let the story unfold gradually as the user moves through it.
The desktop layout is simple on purpose. There is a narrative panel on the left and a map on the right which changes as you scroll. The interaction was kept lightweight by using the browser's native intersectionObserver instead of a scrolling library. Each section becomes active once it reaches about 30% of the viewport, updates the application state, and then the StickyVisual moves the story forward. In the final section (with all the cooked rice options), AnimatePresence transitions from the world map into a lineage diagram that connects the origins with their dishes.
One of the more interesting parts of the project was the data model. Rice spread through a few different historical mechanisms including trade routes, colonial expansion, the transatlantic slave trade, agricultural diffusion, and diaspora. So we really wanted those journeys to feature their own data and visual treatment.
The lineage diagram brings everything together and as the user reaches the end of the scroll, animated paths show specific dishes at the end of each migration story. Jollof to the Niger River Delta, Pilau across the Indian ocean via trade routes and of course, Rice & Peas through the caribbean.
Mobile couldn't just be a scaled-down version of the desktop experience, so we reworked the layout and each section has a half screen visual paired with a half screen narrative and stacked vertically. The animation timing on mobile could be better, but this was still a fun project to do, it's nice to look at and you learn something. Looking forward to doing other projects like this in the future.