Title Card
Application
Story
Add a memo

記憶のオーブ - Memory Orb

TitleCard

記憶のオーブ, a beautiful showcase of nostalgia.

Memory Orb is a simple, yet mesmerizing, memory showcase for you to store precious moments in our fleeting life.

Inspiration

I have always been a person who gets nostalgic often. At gatherings with university friends, laughing and bantering, I'd remember the high school days when I was similarly excited and happy. But just as often, I'd get sad thinking about those days. Perhaps I didn't experience it fully? Or is it that I was trying too hard to fit in that I forgot about the "now"? It always felt like those moments went by so suddenly, one second you're having the time of your life, and the next you're reminiscing about it. I wonder, how can I capture these fleeting moments and tell a story with it? I want to be able to flip - similar to flipping pages in a book - through my memories like a story.

A quote in Spiritfarer really stuck with me when I played through it:

"After the artist has been long gone, turned to dust, the art remains... And so it is that art alone is left in our wake. The only veritable form of transcendence to ever have been in our grasp." - Gustav

You have only truly lived, when the thoughts left behind for the living, are memories of you. I find it poetic that everything will truly wither and die out, even memories, yet we still try so desperately to cling onto them. Ironic, considering I am also desperately clinging onto my memories. But perhaps that is good, because a memory worth clinging onto, is a memory that deserves to be eternalize.

Thus, I decided to create Memory Orb (or 記憶のオーブ), a beautiful showcase of nostalgia, and a way tell the story of your life, accompanied with mesmerizing visuals.

What it does

Click on the image for the video demo!

High-level idea

Allow users to upload images + a story accompanying that image. From which the users can log in to their account and check them out any time. A nice moment of nostalgia

Inner workings

The user sign up for an account or log in, which will be saved into a remote PostgreSQL DB
The server will then fetch the data associated with the user and return it into a list.
Threejs (or in this case R3F) will extract those data and apply it to the icosahedron, the text, the html, etc.
The add and delete memories work similarly, you send a request to POST or DELETE to the database and the server will respond accordingly

How I built it

Backend

For my project, I decided to use PostgreSQL database extension in Heroku to host my database, and FastAPI as my main web-framework to connect my frontend to my database. The LLM API used was Gemini 2.5 Flash Lite. Additionally, I needed a way to store images and decided on Cloudinary. To create and store tokens I used PyJWT, which is a trusted method to create tokens and verify systems (or users) in Python! As for passwords, I used Argon2 to encrypt them before sending to the database.

Frontend

That was the APIs and backend part, how about the frontend? I chose React as the main interface for the UI due to its contained "components" development philosophies, and also for the ease of use, as React combine HTML and JS into one file, which means I didn't have to track which element is which and I could contain everything within a single component! For the actual visuals (3D part), I used React-Three-Fiber (r3f), which is a wrapper for Three.js in React, essentially wrapping everything into reusable React components, and GLSL, a shading language used for OpenGL.

Specifically, r3f creates the object (the icosahedron in the middle) for us and GLSL give it its unique "refraction" effect with the shape. If you were to put an image behind a glass icosahedron, it would likely look similar to what I made, minus the distortion and chromatic aberration. Speaking of chromatic aberration, this project used an extension of r3f called drei and r3f/postprocessing. Drei is a premade library of r3f components, the stars in the background was made with Drei <Star /> component. While r3f/postprocessing is a wrapper for Three.js postprocessing that makes integration with React much easier and readable.

Furthermore, we need to acknowledge GSAP, a JS animation library with extensive features and incredible functionalities. I used this to animate the hover animation and camera rotation. Finally, I used Howler.js to create the BGM and sound effects.

Challenges we ran into

The biggest challenge was the icosahedron itself. Since I wanted: on hover -> Apply noise to normals and give colors, yet that proved to be a challenge. When an object is created, it hooks itself to the <Canvas /> (as far as I could tell), but postprocessing unmounts that object and mounts it again with postprocessing AND having 2 meshes stacked ontop of each other breaks the onHover function, because now the mesh within the memory is changed, while the onHover is still pointing at old memory space. -> To circumvent this, I used a reference with useRef() in React to store the current memory of the object, allowing the hover to directly point to the mesh itself, no matter where in the memory
Another big challenge was GLSL shaders. That refraction was a big challenge to implement correctly
The final problem is HOW to distribute all references to different components correctly. At first I had them in multiple components, which I noticed to repeat a lot. -> Make all needed references in the main file that holds all components and passing them into those components using interface (TypeScript), this is more of a refactoring process than fixing.

Accomplishments that we're proud of

Advanced GLSL shaders (that I proudly learned all the basics for)
Clean and smooth hover effect
Overcoming hurdles from lack of tutorials and documentation on animating r3f components
Clean backend + frontend communications
Clean implementation of HTML and Three.js
Despite not knowing neither React nor Three.js + GLSL at first, I can confidently say, while not mastered, I can comfortably create a React + Three.js webapp!