Back to home

Mesh Gradient Maker

Mesh Gradient Maker

Mesh Gradient Maker

From Canvas to Code

How I transformed a design vision into a production-ready Framer plugin using AI tools, WebGL, and iterative development

As a designer working in Framer, I kept finding myself wanting something that didn't exist: an easy way to create beautiful, dynamic mesh gradients directly in Framer. The trending aesthetic of smooth, flowing color transitions is found everywhere in modern UI designs, brand identities, and creative projects, but the tools to create them in Framer were limited.

I wanted to make mesh gradients as easy as picking colors and dragging points. But first, I needed to understand what was actually possible.

Understanding the Landscape

Before building anything, I dove into research to understand the gradient landscape and technical constraints.

The CSS Limitation

My first instinct was to use CSS gradients. They're native to the web, widely supported, and don't require additional libraries. But I quickly hit a wall: CSS gradients don't easily animate smoothly.

You can transition between predefined gradient states, but you can't animate the individual color stops, positions, or create the fluid, organic
movement that makes mesh gradients feel alive. CSS treats gradients as static background images, not as dynamic, interpolatable values.

This was a fundamental limitation. If I wanted smooth, real-time animation, CSS wasn't going to cut it.

Exploring Existing Solutions

I researched what others had built:

Outside Framer:

  • Kevin Hufnagl's Stripe-style gradient features beautiful WebGL-based mesh gradients with smooth animation. His implementation showed that the visual effect I wanted was achievable, and pointed me toward WebGL as the solution

Within Framer:

  • Shader Gradients by Yongmin Ruucm and Seungmee Lee was the gold standard. It's a sophisticated, highly customizable gradient tool built specifically for Framer. It's an impressive solution with extensive controls and beautiful presets.

Shader Gradients proved that Framer users wanted gradient tools, and showed what was possible with shaders. But it also revealed a gap: what if someone wanted something simpler? A more focused tool for creating mesh gradients specifically, without the learning curve of shader programming?

The Decision

I decided to build a focused tool that would:

  • Use WebGL for performance and animation capability

  • Start as a Framer code component for direct canvas integration

  • Evolve into a Framer plugin to make customization easier

  • Offer an intuitive interface for designers who just want beautiful gradients

The opportunity was clear: Framer's plugin ecosystem was growing, designers craved these effects, and I could build something both powerful and approachable.

I wasn't a WebGL expert, but I had a clear vision and AI as my co-pilot. Time to build.

The Vision

After initially testing out an validating my ideas, I mapped out what this plugin needed to be:

Core Value Proposition: Make professional mesh gradients accessible to every Framer user, regardless of coding ability.

Key Features:

  • Intuitive color point addition and positioning

  • Real-time preview of gradient changes

  • Customizable radius controls for each point

  • One-click addition to Framer canvas

  • Randomization for quick experimentation

  • Clean, designer-friendly interface

Technical Foundation: WebGL for performance, React for the UI, and seamless integration with Framer's plugin API.

Building with AI: The Reality

Let me be honest: building with AI wasn't magic. It was messy, iterative, and required constant problem-solving. But it made something possible that would have taken me months (or never happened at all) otherwise.

Phase 1: CSS Experiments

I started by trying to prove my research wrong. Maybe there was a clever CSS trick I'd missed?

I built prototypes using pure CSS with multiple radial-gradient layers, attempting to animate them with transitions and CSS variables. The results were... disappointing. Gradients would snap between states, color transitions looked muddy, and performance tanked with more than a few color stops.

Key learning: Sometimes research is right. CSS wasn't going to work for what I envisioned. Time to move to WebGL.

Phase 2: Making a Framer Component

I started with Claude, describing what I wanted to build:

"Create a react js mesh gradient component."

This was the beginning of a journey that took me down multiple research paths, projects, implementations, and solutions that other creators made.

The AI gave me foundational knowledge about WebGL shaders, basic radial gradient blending logic, and a rendering loop. The first version was rough, but when I saw multiple colored circles bleeding into each other smoothly, I knew the core concept was viable.

Key learning: Start with the hardest technical challenge first. If the WebGL rendering didn't work, nothing else mattered.

My first working version was a Framer code component. It worked, but had a problem: every time you wanted to change a color or adjust positioning, you had to edit code properties.

Phase 3: The Framer Plugin Interface

The Framer Code Component on its own was not ideal for designers. This is when I decided to build a plugin interface. Plugins in Framer let you build custom UI panels with controls, live previews, and adding the code component directly to the canvas manipulation. This is perfect for what I needed.

The transition required:

  1. Extracting the WebGL gradient logic into a reusable library

  2. Building a React-based plugin UI with color pickers and position controls

  3. Creating a bridge between the plugin controls and the canvas rendering

Now I needed a UI that designers would actually want to use. I designed the interface in Figma first, then worked with AI to implement it in React:

Key UI Elements:

  1. Live preview canvas

  2. Gradient point handles

  3. Color picker for canvas color

  4. Color pickers for for each color point

  5. Re-orderable color controls (X, Y coordinates)

  6. "Add to Canvas" action button

  7. Randomize button for instant inspiration

Phase 4: Publishing and Iteration

I published version 1 to the Framer Marketplace with minimal features. The response was immediate: 1,000+ users in the first few weeks

Phase 5: The Monorepo Structure

As the codebase grew, I needed better organization. I asked AI to help me set up a monorepo (check it out on Github):

  • /packages/mesh-gradient - Core WebGL library published as a npm package

  • /apps/framer-plugin - Framer plugin with UI controls

  • /apps/demo - Standalone demo for testing outside Framer

This structure meant I could:

  1. Test the core gradient logic independently

  2. Use the same engine in both the component and plugin

  3. Potentially publish the core library to npm for others to use

The Technical Stack

Core Technology:

  • WebGL via twgl.js for high-performance rendering

  • Chroma.js for color manipulation and interpolation

  • React JS for the plugin UI

  • TypeScript for type safety

Development Tools:

  • Claude/AI for code generation and debugging

  • Figma for UI design and prototyping

  • Git for version control

  • GitHub for repository hosting

Publishing:

  • NPM for the core library

  • Framer Marketplace for plugin distribution

  • Framer Components for direct code component access

Key Metrics

From zero to production-ready plugin:

  • Development time: ~6 weeks (part-time)

  • Lines of code: ~2,000 (including shaders)

  • Total users: 3,500+

  • Versions released: 3 major updates based on user feedback

  • Active Weekly Users: ~80 users per week

Reflections

Building Mesh Gradient Maker taught me that AI doesn't replace creativity or vision, but it amplifies your ability to execute on them.

It was easier. I got stuck many times. Some features took days to get right. But each obstacle taught me something new about WebGL, React, or something I’m not familiar with.

It was faster. What might have required hiring a developer or spending months learning became weeks of focused work. All with AI as a sounding board for my ideas.

It was worth it. Seeing designers create beautiful gradients with my tool that they couldn't have made otherwise. This make every late night and debugging session worth it!

Try It Yourself

Framer Plugin: Mesh Gradient Maker on Framer Marketplace

React Component: Framer Component

Source Code: GitHub Repository

NPM Package: npm install mesh-gradient

If you're building something creative with AI, I'd love to hear about it. The tools are here. The only question is: what will you build?