# Meshmallow: Animated gradient generator **Client:** Meshmallow **Year:** 2025 **Role:** Product & UX Designer **URL:** https://www.afekenst.am/case/meshmallow --- ## Outcome A tool for generating, controlling, and reusing animated gradients without writing shader code. Three modes (Mesh, Warp, Particles) share one interface for color, motion, and export. Meshmallow powers the background of this portfolio site, cycling through a curated playlist of gradients on each visit. Built with React and three.js. --- ## Interactive demo - Project site: https://meshmallow.com --- ## Context The starting point was Stripe's animated gradient. It set the standard for how a background surface can feel alive without being distracting. I spent a lot of effort trying to reverse-engineer it with AI tools before finding Kevin Hufnagl's breakdown of how the effect actually works (kevinhufnagl.com). His implementation gave me a working mesh gradient foundation to build from. For the warp effect, I looked at Paper (shaders.paper.design), a shader playground with a broad range of visual effects. Paper is built for open exploration across a large parameter space. Starting from scratch or trying to adapt its output to a specific context meant sorting through too many options to get to something usable. I took the mesh gradient technique from Hufnagl's work, borrowed the warp effect from Paper, and adapted particles.js (vincentgarreau.com/particles.js) into a third mode. Then I rebuilt all three into a smaller, more opinionated tool where a designer could get to a controlled, reusable result without understanding shaders. --- ## Challenge Three problems to solve. Gradient generators optimize for variety: more modes, more sliders, more randomness. I needed the opposite, fewer controls that produce reliable, reusable results. Color selection for generative visuals is hard to do manually. Picking four colors that look good in motion is not the same as picking a static palette. And there was no workflow for saving a result and using it later. Every session started from zero. Looking at existing tools confirmed the gap. Mesh (meshgradient.com) and MSHR (mshr.app) produce static gradients only. ShaderGradient and Paper handle animation but have no way to save or collect results. None of them extract color from images automatically. Paper has an eye dropper, but it samples one color at a time. Nothing combined animation, a persistent library, and image-based color input in one tool. --- ## Approach Three ways into color. Users can upload a reference image and the tool extracts a four-color palette automatically. A schemes menu offers 14 palettes grouped by color theory (Analogous, Triadic, Split-Comp, Mono) and mood (Sunset, Ocean, Northern Lights, Velvet Night, and others). Each scheme varies hue, saturation, and lightness within set ranges, producing roughly 1.75M unique palettes across all schemes. Random cycles through all of them. Manual hex input is there if someone already knows what they want. The goal was to make color the easiest part of the process, not the bottleneck. Controls grouped by intent, not by parameter. The interface organizes around three questions: what colors (Color), what shape (Pattern), and how fast (Speed). Technical parameters like distortion, swirl, and scale sit inside these groups instead of being shown as a flat list. Someone can explore without knowing what each slider does technically. A quiet interface. Color is reserved for the output canvas, not the UI. Controls collapse when not in use. Export actions sit in a utility section at the bottom. The tool stays out of the way of the visual result. Keyboard shortcuts and mobile fullscreen. On desktop, a keyboard layer covers the core actions: R to randomize, arrow keys to shift hue, S to save, Tab to toggle the panel, F for fullscreen. On mobile, the gradient goes fullscreen and the screen becomes the controller. Rotating to landscape enters fullscreen automatically. Inside it, every action is a gesture: swipe in a direction to shift hue on one of four colors, double-tap to randomize, three-finger tap to toggle between mesh and warp, pinch to zoom, two-finger tap to exit. No on-screen buttons. A dismissible hint strip shows the mappings once, then gets out of the way. Save, collect, rotate. Generated variations save to a persistent library. A playlist feature lets you select multiple gradients and set how they rotate, sequentially or randomly on each page load. A single session can become an ongoing visual system. The portfolio site you're looking at right now runs on a Meshmallow playlist. --- ## Impact Meshmallow is a working product at meshmallow.com. The install workflow generates a paste-ready code snippet for Cursor, Lovable, or v0. You can go from generating a gradient to embedding it in a live site in under a minute. I designed, built, and shipped it end-to-end using React and three.js, then put it to use on my own site as both the background system and a portfolio piece. --- ## Reflections The bigger idea is that a gradient can be functional, not just decorative. One direction I'm exploring is using gradient flow as a directional cue, shaping the animation to guide attention downward below the fold or toward a specific part of the page. I'm also extending the system with custom shaders to support a wider range of patterns beyond the current three modes. The interaction model (image-derived color, intent-grouped controls, playlist rotation) should hold up as the visual engine underneath gets more complex. --- ## Static exports - Markdown: https://www.afekenst.am/exports/meshmallow-case.md - HTML: https://www.afekenst.am/exports/case-html/meshmallow.html - Interactive case: https://www.afekenst.am/case/meshmallow - Full portfolio: https://www.afekenst.am/llms-full.txt