An abstract artwork does not need to copy what the world looks like — it needs to capture what a feeling feels like. And almost every feeling can be translated into three visual ingredients: color, motion, and rhythm. With just HTML and CSS, you can build moving art that genuinely expresses your mood without drawing a single pixel by hand.
The best part is that it runs anywhere. CSS animations are native to the browser, require no plugins and no servers, and are computed entirely on your own device. Your private emotional state stays private, rendered as art that only you and your screen will ever see.
Color Speaks the Mood
Start with a palette. Warm saturated colors like golden yellows and oranges read as joy, energy, and warmth. Cool blues and deep violets lean calm, melancholic, or contemplative. Near-black with a single electric accent can feel intense and futuristic. When in doubt, choose a dominant color for the emotion and a small contrasting accent for the detail — restraint almost always looks more artistic than noise.
Motion Carries the Emotion
Color tells the viewer the feeling; motion tells them its intensity. A happy mood wants fast, bouncing, springy keyframes — think of a ball rebounding upward with ease. A calm or sad mood wants slow, long, floating drifts with soft fading, like a cloud or a falling leaf. Excited or anxious energy wants erratic, overlapping jumps that never settle. Change the speed, the delay, and the easing, and the same shape can feel joyful, mournful, or electric.
Rhythm Sets the Scene
Finally, think about the composition itself. A single hero element — a sun, an orb, a drifting shape — gives the eye a place to rest. Overlapping accents that move on different delays create depth, like rain behind a moon. And a one- or two-sentence micro-story grounds the whole piece in meaning, turning a pretty animation into a tiny emotional scene.
You do not have to be a designer to do this. Even a gradient, two circles, and one keyframe can already feel profoundly expressive when the color, motion, and rhythm are tuned to the mood you are in.
Let the Machine Do the Sketching
Once you understand the grammar of mood — fast for joy, slow for sorrow, erratic for anxiety, warm palettes for hope — you can let an AI compose it instantly. On MooduTools, a local in-browser model reads your mood, then writes the exact HTML and CSS to match: bouncing rays for jubilance, a drifting moon for melancholy, electric blobs for chaos. The code is written and rendered right on your device, so your feelings never leave your browser.
If you want to see the grammar in action, open the vibe generator and tap a Live Demo — or type a mood and watch the machine paint it.