How to Clone Procreate

Create a Procreate-inspired web drawing app called Inkwell as a Next.js (App Router) + Tailwind + Prisma + SQLite project. Be realistic: this is a capable canvas + brushes + layers, not a full pro paint engine.

## Product
A browser-based painting app: pressure-sensitive canvas, a brush set, layers with blend modes, a color picker, and PNG export. Local-first projects with an optional cloud gallery. One-time 'Pro' unlock, no subscription.

## Screens
- Marketing landing: creative hero with a drawing demo, 'pay once' badge, feature cards, FAQ
- Gallery: grid of saved artworks + new-canvas button; new-canvas dialog (size presets, background)
- Editor: full-bleed <canvas>, left tool rail (brush/eraser/smudge/color/layers/transform), top bar (undo/redo/gallery/export), sliding brush-settings panel
- Layers panel: stack with thumbnails, opacity, blend mode, add/delete/reorder
- Color panel: wheel + hex + recent + palette

## Canvas implementation
- A drawing module wrapping a 2D canvas context; on pointerdown/move/up, read event.pressure (Pointer Events) and build a smoothed stroke (Catmull-Rom or simple midpoint interpolation)
- Each layer is its own offscreen canvas; the visible canvas composites layers respecting opacity and blend mode (globalCompositeOperation), then redraws on change
- Brushes = a stamp image drawn repeatedly along the path at a spacing; pressure scales size/opacity. Ship 5 brushes.
- Pinch-zoom and pan via a viewport transform applied to all layers
- NOTE in code: for big canvases/many layers this 2D approach will get slow - leave a clear seam to swap in WebGL later

## Prisma schema
User (id, email, name, hasPro), Artwork (id, userId, title, width, height, thumbnailUrl, projectBlobUrl, updatedAt), BrushPack (id, name, price, isPremium)

## Logic
- Autosave the layered project (serialize layers to a blob) to storage and regenerate the thumbnail
- Free tier: max 3 layers, export at screen resolution; the one-time Pro purchase sets hasPro and unlocks unlimited layers + full-res export + premium brushes (mock checkout, Stripe-ready)

## Gestures & undo
- Pinch to zoom and two-finger pan the canvas; a clearly visible undo/redo in the top bar (plus a two-finger-tap undo if feasible)
- Keep a bounded undo history of canvas snapshots per layer so undo is reliable

## Style
Dark editor chrome (#16181D) so art pops, rounded floating panels, large touch targets, smooth slide-ins, an accent color for active tools. Tablet- and mobile-first.
- The canvas is the hero; collapse panels away when drawing

Seed: 4 sample artworks, 5 starter brushes, one demo user.

Build a Procreate-inspired web drawing app, scoped honestly: a capable canvas with brushes, layers and export - NOT a full GPU paint engine in v1. PWA first (installable on iPad), with a clear path to WebGL/native later. This is the hard app on the directory; respect the graphics problem.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui for the tool UI, next-pwa (installs full-screen on iPad)
- The canvas is imperative, OUTSIDE React's render loop - React only drives the tool chrome; the drawing engine owns its own RAF loop and mutates canvases directly
- Supabase Postgres + Auth + Storage for the cloud gallery; IndexedDB for local-first projects
- RevenueCat (non-consumable) for the Pro unlock on mobile, Stripe for web

## Critical architecture
- Engine boundary: define an Engine module (newStroke, addPoint, endStroke, addLayer, composite, exportPNG) with a 2D-canvas implementation now and the SAME interface ready for a WebGL/WebGPU implementation later. Do not leak canvas internals into React.
- Stroke quality: read Pointer Events pressure/tiltX/tiltY; resample raw points and smooth (Catmull-Rom) so fast strokes don't facet; coalesce getCoalescedEvents() points on supporting browsers for higher input resolution.
- Layers: each layer is an offscreen canvas; compositing respects opacity + blend mode. Keep the active layer's dirty-rect tracked so you only recomposite changed regions - naive full recomposites will tank performance.
- Be explicit in code and docs about the ceiling: web Pointer Events latency and 2D-canvas blending will not match native PencilKit/Metal. The native path (Swift + PencilKit + Metal) is the answer if pro-grade feel is required.

## Schema
profiles (id, has_pro), artworks (id, user_id, title, width, height, thumbnail_path, project_path, updated_at), brush_packs (id, name, price, is_premium). RLS on every table; project blobs in Storage with per-user paths.

## Implementation order
1. Scaffold, auth, gallery + new-canvas flow, Supabase/IndexedDB plumbing
2. The Engine: 2D-canvas stroke pipeline with Pointer Events pressure + smoothing; single-layer drawing in the editor first
3. Brushes: stamp-along-path renderer, 5 starter brushes, size/opacity/flow + pressure mapping
4. Layers: offscreen-canvas layers, opacity, blend modes, dirty-rect compositing, the layers panel
5. Color, gestures (pinch zoom/rotate, undo/redo gestures), transform tool
6. Persistence + monetization: autosave/serialize projects, thumbnails, Pro unlock gating (server-verified), PWA install

## Quality bar
- A medium brush draws a smooth, pressure-tapered stroke with no visible faceting at speed
- Drawing on a 2048x2048 canvas with 5 layers stays interactive (target 60fps on a recent iPad in Safari); profile it
- Undo/redo is reliable and bounded; autosave never blocks the drawing thread
- The Engine interface is clean enough that a WebGL backend could replace the 2D one without touching the UI

## Honesty requirement
- Document the web ceiling plainly (input latency, blend performance) and where the native path (PencilKit/Metal) becomes necessary - do not oversell the web version

Start with step 1, then show me the Engine interface and the stroke-smoothing approach before building brushes.

Design the complete UI for a Procreate-inspired web drawing app called Inkwell. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: pro creative tool - near-black editor chrome (#16181D) so artwork pops, rounded floating glass tool panels, one vivid accent (electric coral) for active tools, large touch-friendly targets, smooth slide animations. The canvas is the hero; the UI stays out of the way.

## Screens

### 1. Marketing landing
- Dark hero with a looping timelapse of a drawing forming, headline 'Draw anywhere. No subscription.', a pill badge 'Pay once - own it forever', subline
- Three feature cards (Real brushes, Layers & blend modes, Export anywhere), a masonry gallery of example artwork, a pricing card (one-time), footer

### 2. Gallery
- A grid of artwork thumbnails on a dark canvas, each card showing the piece, a title and last-edited time, plus a prominent dashed '+ New Canvas' card; a top bar with the logo and a 'Pro' badge

### 3. New-canvas sheet
- A clean modal with size-preset cards (Square 2048, Portrait, Landscape, Screen, Custom) each with a tiny proportion preview, a background toggle (white / transparent), and a 'Create' button

### 4. Editor (hero screen)
- Full-bleed canvas area with a subtle checkerboard for transparency; a slim LEFT vertical tool rail of icon buttons (brush, eraser, smudge, selection, color swatch showing current color, layers, transform); a top bar with undo/redo, gallery, and 'Export'; a floating brush-settings panel with size and opacity sliders and a live brush-stroke preview

### 5. Layers panel (right slide-over)
- A vertical stack of layer cards each with a thumbnail, name, an eye toggle, an opacity slider and a blend-mode dropdown; selected layer highlighted; '+ Add layer' at the top; drag handle to reorder

### 6. Color panel
- A large color wheel with a brightness ring, a hex/RGB input row, a 'recent' swatch strip, and a saved-palette grid; clean and tactile

### 7. Brush-settings popover
- Sliders for size, opacity and flow with a live stroke-preview swatch at the top, and a small grid of the available brushes to switch between

### 8. Pro paywall sheet
- A clean sheet listing Pro benefits (unlimited layers, full-resolution export, premium brush packs), a single one-time price, a 'Restore purchase' link, and a tiny 'keep using free' option

### 9. Export sheet
- A sheet with format options (PNG / JPG), a resolution note (screen vs full-res, full-res gated behind Pro), and a share/download action

Tablet- and mobile-first (this is an iPad-in-the-browser experience), but also lay out gracefully on desktop. Use realistic content: gallery pieces with names like 'Sunset study', 'Character sketch', brush names like 'Studio Pen', 'Soft Airbrush', '6B Pencil'. Show a tasteful light-canvas variant too.

Build a Procreate-inspired web drawing app (capable canvas, not a full pro engine) called Inkwell. One-time Pro purchase, no subscription.

## Honest scope note
This is a useful sketch-and-paint app: pressure canvas, brushes, layers, color, export. It does not aim to replicate Procreate's full drawing engine.

## Entities
- Artwork: user, title, width, height, thumbnail, projectFile (the layered data), updatedAt
- BrushPack: name, price, isPremium (boolean)
- UserProfile: hasPro (boolean)

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: draws with up to 3 layers, exports PNG at screen resolution, uses free brushes
- Pro user (after one-time purchase): unlimited layers, full-resolution export, premium brush packs
- Admin: manages brush packs, sees a dashboard (users, pro conversions, artworks created)

## Pages
1. Landing: hero with a drawing demo, one-time pricing, FAQ
2. Gallery: grid of the user's artworks + 'New Canvas'
3. New-canvas dialog: size presets and background choice
4. Editor: canvas with a tool rail (brush, eraser, color, layers, transform), top bar (undo/redo, export), brush-settings panel
5. Layers panel: layer stack with opacity and blend mode
6. Color panel: wheel, hex, recent, palette
7. Admin: brush-pack management and dashboard

## Rules
- Drawing uses pen pressure where the device supports it; pressure affects brush size and opacity
- Free users are capped at 3 layers and screen-resolution export; the one-time Pro purchase sets hasPro and unlocks unlimited layers, full-res export and premium brushes
- Artworks autosave; the gallery shows the latest thumbnail

## Look & feel
Dark pro-tool chrome so artwork pops, rounded floating panels, a vivid accent for active tools, large touch targets, minimal UI. Tablet- and mobile-first.

Seed with 4 sample artworks, 5 starter brushes (3 free, 2 premium), one admin user and one demo user.