Motify

Creating beautiful CSS background patterns usually means wrestling with complex gradient syntax and layering tricks. Motify is a visual mixing board that takes the guesswork out of the process. Pick a preset, tweak it live, and export production-ready CSS or JSX code in one click.

Features

Preset Gallery - 9 professionally designed patterns to start from (Neon Grid, Dot Matrix, Ocean Waves, Zigzag Sunset, Blueprint, Carbon Fiber, and more)
Real-Time Editor - Split-screen interface with instant visual feedback as you adjust every parameter
Layered Pattern System - Compose patterns from a base layer (solid, linear, or radial gradient), a motif layer (grid, dots, waves, zigzag, crosshatch), and modifier layers (vignette, fade)
Fine-Grained Controls - Adjust colors, opacity, scale, spacing, stroke weight, angle, and gradient direction
Multi-Format Export - Copy clean CSS properties or JSX inline style objects, ready to paste into any project

Tech Stack

TanStack Start - Full-stack React framework with file-based routing
React 19 - UI rendering
TypeScript - Type safety across the codebase
Tailwind CSS 4 - Styling and custom animations
Vite - Fast development and builds

How to Use

Clone the repository:

git clone https://github.com/Achour/motify.git
cd motify

Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

Live Demo

🔗 Try Motify live

💡 Motify is fully open source. Contributions, feedback, and forks are welcome! Check out the repository on GitHub: GitHub Repo 🚀