Mesh Magic

Enjoying my project? Please show your appreciation by starring it on GitHub! ⭐

A beautiful and intuitive mesh gradient generator built with Nuxt 4. Create stunning gradients for your next project with precision and style.

🌐 Live Demo: https://mesh-magic-hbt934.cranl.net/

Features

• 🎨 Interactive Gradient Editor - Create beautiful mesh gradients with a user-friendly interface
• 🎯 Precise Controls - Adjust position, blur, size, and colors with pixel-perfect precision
• 🌈 Quick Themes - Apply pre-defined color themes (Cosmic, Mystic, Sunset, Ocean, Forest, Aurora)
• 🔄 Real-time Preview - See your changes instantly as you customize

Tech Stack

• Framework: Nuxt 4
• UI Components: shadcn-vue
• Styling: Tailwind CSS v4
• Icons: Hugeicons
• UI Primitives: reka-ui
• Animations: GSAP

Feature Roadmap

[x] Share gradient via URL with encoded config

Goal: Generate a shareable URL containing the gradient configuration.

Steps:

1. Serialize config to a JSON string.
2. Compress using LZString or pako for URL-friendliness.
3. Encode to Base64 and append to the URL as a query param (e.g., ?g=...).
4. On page load, detect the param, decode, and apply the config.
5. Add a "Copy Share Link" button.

---

[ ] Performance optimization for large layer counts

Goal: Ensure smooth rendering even with 10+ layers, with a max count of 15 layers at max count.

Steps:

1. Debounce/throttle slider updates using VueUse's useDebounceFn.
2. Use v-memo or shallowRef for layer arrays where deep reactivity isn't needed.
3. Consider rendering layers to an offscreen canvas for heavy blur effects.
4. Profile with Vue DevTools and Chrome Performance tab to find bottlenecks.

Getting Started

Prerequisites

• Node.js 20+ (or Bun, pnpm, yarn)
• npm, pnpm, yarn, or bun

Installation

Install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development

Start the development server:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

Visit http://localhost:3000 to see your application.

Build for Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

Preview the production build locally:

# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview

Project Structure

mesh-magic/
├── app/
│   ├── components/      # Vue components
│   │   ├── ui/          # UI components (shadcn-vue)
│   │   └── Mesh/        # Mesh gradient components
│   ├── composables/     # Composables (useMeshGradient, etc.)
│   ├── layouts/         # Layout components
│   ├── pages/           # Pages/routes
│   └── assets/          # Static assets and styles
├── public/              # Public static files
└── nuxt.config.ts       # Nuxt configuration

Learn More

• Nuxt Documentation
• Vue 3 Documentation
• Tailwind CSS Documentation
• shadcn-vue Documentation

License

This project is private and proprietary.

---

Built with 💚 using Nuxt 4