Forge

Scent has no native visual form. You can describe it in words, map it to color, associate it with texture, but there is no agreed translation. Forge is my attempt to build one: a sensory visualizer for the fragrance "Ember," rendered entirely on a 2D canvas.

The central element is an orb with three orbiting ingredient nodes: Bergamot, Saffron, and Oud Wood. Each node follows a pointer-drag path around the orb, with the orbit radius and velocity reflecting something about the ingredient's character in the blend. Bergamot is volatile and citric, so I placed it closer in with faster movement. Oud Wood is deep and anchoring, so its orbit is wider, slower, carrying more mass. Saffron sits between them, warm and spiced, its path slightly elliptical.

The particle fields and magnetic rings respond to interaction. Moving through the canvas pulls particles toward the cursor and releases them in patterns shaped by the orb's current configuration. The rings pulse with a rhythm tied to the overall movement state: still when nothing is happening, alive when the user is exploring.

My constraint was making the abstract sensory experience feel tangible through motion alone, without text labels or explanatory overlays cluttering the canvas. The ingredient names appear as quiet annotations that do not compete with the visual system. The experience of the scent, its warmth and darkness and citric brightness, should be legible in the behavior before you read a single word.

React and Vite keep the build fast. TypeScript manages the canvas animation state. Tailwind v4 handles the typographic elements that frame the experience outside the canvas boundary.