Skip to content

README.md

Latest commit

 

History

History
162 lines (129 loc) · 5.8 KB

README.md

File metadata and controls

162 lines (129 loc) · 5.8 KB

Gradient Galore

A visual gradient maker with 6 gradient types, a palette system, and a community gallery. Built with React Router, Tailwind CSS v4, shadcn/ui, Jotai, and Drizzle ORM.

Features

Gradient Types

Type Description Rendering
Linear Classic directional gradient CSS linear-gradient
Radial Circular/elliptical from a center point CSS radial-gradient
Conic Angular sweep from a center point CSS conic-gradient
Aura Soft glowing color blobs layered together CSS radial layers or rotated <div> blobs
Marble Blurred organic shapes with blend modes Inline SVG with feGaussianBlur
Mesh Multi-point color blending CSS radial layers or rotated <div> blobs

Controls Per Type

Linear / Radial / Conic

  • Color stops with position sliders
  • Angle (linear, conic)
  • Center X/Y position (radial, conic)
  • Shape & size mode (radial)
  • Repeating toggle

Aura / Mesh (per-point controls)

  • Color, X/Y position, Size/Spread, Opacity
  • Stretch (circle to ellipse blob shaping)
  • Rotation (per-blob rotation)
  • Z-index reordering (move up/down in list)
  • Background color picker

Marble

  • Shape Size, Blur, Rotation, Variation (seed)
  • Blend Mode (overlay, soft-light, multiply, screen, color-dodge, color-burn)
  • Color layers (each color becomes a blurred SVG shape)

All sliders have hover tooltips explaining what they do.

Palette System

  • Import — paste palette text in ═══ NAME ═══ / shade #hex format (or simpler formats)
  • Quick Colors — palette swatches appear inline in the gradient controls; select a color stop then click a swatch to apply
  • Persistence — palettes persist in localStorage across sessions
  • Management — full palette page at /palettes for browsing, importing, and removing palettes

Gallery

  • Publish — name and tag your gradient, publish it to the gallery
  • Browse — view all published gradients at /gallery
  • Filter — by gradient type (linear, radial, conic, aura, marble, mesh)
  • Preview cards — live CSS gradient thumbnails

Other Features

  • Presets — 6 built-in presets (one per gradient type)
  • Randomize — randomize all colors, angle, and seed
  • CSS Output — live generated CSS with copy button (SVG markup for marble)
  • State persistence — gradient state saved to localStorage, survives refresh
  • Hex validation — color text inputs validate hex format with visual feedback

Tech Stack

Layer Technology
Framework React Router v7 (Remix successor)
Styling Tailwind CSS v4, shadcn/ui (New York style)
State Jotai (atomWithStorage for persistence)
UI Components Radix primitives (Slider, Switch) via shadcn
Database SQLite (better-sqlite3) for local dev
ORM Drizzle ORM (portable to Postgres for production)
Build Vite

Project Structure

app/
├── components/
│   ├── ui/                  # shadcn components (button, slider, switch)
│   ├── gradient-preview.tsx # Live gradient canvas
│   ├── gradient-controls.tsx# All controls (type selector, sliders, color editors)
│   ├── marble-canvas.tsx    # SVG renderer for marble gradients
│   ├── code-output.tsx      # CSS output with copy button
│   ├── publish-dialog.tsx   # Publish to gallery dialog
│   ├── palette-strip.tsx    # Quick-pick palette swatches
│   ├── presets.tsx           # Built-in gradient presets
│   └── nav.tsx              # App navigation
├── db/
│   ├── schema.ts            # Drizzle schema (gradients table)
│   ├── index.ts             # Database connection
│   └── migrate.ts           # Migration script
├── lib/
│   ├── gradient-engine.ts   # Core: types, CSS generation, defaults
│   ├── atoms.ts             # Jotai atoms (gradient, palettes, active target)
│   ├── palette.ts           # Palette parser
│   └── utils.ts             # cn() utility
├── routes/
│   ├── home.tsx             # Gradient editor (/)
│   ├── gallery.tsx          # Published gradients (/gallery)
│   ├── palettes.tsx         # Palette manager (/palettes)
│   └── api.publish.tsx      # Publish action (POST /api/publish)
├── app.css                  # Global styles, theme tokens
├── root.tsx                 # App shell
└── routes.ts                # Route config

Getting Started

# Install dependencies
npm install

# Create the database
npm run db:migrate

# Start dev server
npm run dev

The app runs at http://localhost:5173.

Scripts

Script Description
npm run dev Start dev server with HMR
npm run build Production build
npm run start Run production server
npm run db:migrate Create/update database tables
npm run typecheck Run TypeScript type checking

Database

Local development uses SQLite (gradient-galore.db file). The schema is designed to be portable to Postgres via Drizzle ORM for production deployment.

Gradients table:

  • id — auto-increment primary key
  • name — gradient name
  • type — gradient type (linear, radial, conic, aura, marble, mesh)
  • state — full GradientState as JSON
  • tags — comma-separated tags
  • preview_css — pre-rendered CSS for thumbnail display
  • created_at — timestamp

Docker

docker build -t gradient-galore .
docker run -p 3000:3000 -v gradient-data:/data gradient-galore

Roadmap

  • Postgres support for production
  • Export to PNG/SVG
  • Gallery likes and saves
  • User accounts
  • Drag points directly on preview canvas
  • Undo/redo
  • Custom preset saving
  • Share links for gradients