Self-hosted GLSL shader platform
1047a1f5fe
Architecture — Shader versioning & draft system:
- New shader_versions table: immutable snapshots of every edit
- Shaders now have status: draft, published, archived
- current_version counter tracks version number
- Every create/update creates a ShaderVersion record
- Restore-from-version endpoint creates new version (never destructive)
- Drafts are private, only visible to author
- Forks start as drafts
- Free tier rate limit applies only to published shaders (drafts unlimited)
Architecture — Platform identity:
- System account 'fractafrag' (UUID 00000000-...-000001) created in init.sql
- is_system flag on users and shaders
- system_label field: 'fractafrag-curated', future: 'fractafrag-generated'
- Feed/explore can filter by is_system
- System shaders display distinctly from user/AI content
API changes:
- GET /shaders/mine — user workspace (drafts, published, archived)
- GET /shaders/{id}/versions — version history
- GET /shaders/{id}/versions/{n} — specific version
- POST /shaders/{id}/versions/{n}/restore — restore old version
- POST /shaders accepts status: 'draft' | 'published'
- PUT /shaders/{id} accepts change_note for version descriptions
- PUT status transitions: draft→published, published→archived, archived→published
Frontend — Editor improvements:
- Resizable split pane with drag handle (20-80% range, smooth col-resize cursor)
- Save Draft button (creates/updates as draft, no publish)
- Publish button (validates, publishes, redirects to shader page)
- Version badge shows current version number when editing existing
- Owner detection: editing own shader vs forking someone else's
- Saved status indicator ('Draft saved', 'Published')
Frontend — My Shaders workspace:
- /my-shaders route with status tabs (All, Draft, Published, Archived)
- Count badges per tab
- Status badges on shader cards (draft=yellow, published=green, archived=grey)
- Version badges (v1, v2, etc.)
- Quick actions: Edit, Publish, Archive, Restore, Delete per status
- Drafts link to editor, published link to detail page
Seed data — 200 fractafrag-curated shaders:
- 171 2D + 29 3D shaders
- 500 unique tags across all shaders
- All 200 titles are unique
- Covers: fractals (Mandelbrot, Julia sets), noise (fbm, Voronoi, Perlin),
raymarching (metaballs, terrain, torus knots, metall/glass),
effects (glitch, VHS, plasma, aurora, lightning, fireworks),
patterns (circuit, hex grid, stained glass, herringbone, moiré),
physics (wave interference, pendulum, caustics, gravity lens),
minimal (single shapes, gradients, dot grids),
nature (ink, watercolor, smoke, sand garden, coral, nebula),
color theory (RGB separation, CMY overlap, hue wheel),
domain warping (acid trip, lava rift, storm eye),
particles (fireflies, snow, ember, bubbles)
- Each shader has style_metadata (chaos_level, color_temperature, motion_type)
- Distributed creation times over 30 days for feed ranking variety
- Random initial scores for algorithm testing
- All authored by 'fractafrag' system account, is_system=true
- system_label='fractafrag-curated' for clear provenance
Schema:
- shader_versions table with (shader_id, version_number) unique constraint
- HNSW indexes on version lookup
- System account indexes
- Status-aware feed indexes
|
||
|---|---|---|
| .bg-shell | ||
| db | ||
| scripts | ||
| services | ||
| .env.example | ||
| .gitignore | ||
| DECISIONS.md | ||
| docker-compose.dev.yml | ||
| docker-compose.override.yml | ||
| docker-compose.yml | ||
| FRACTAFRAG FULL SPEC & SUMMARY.md | ||
| README.md | ||
🔥 Fractafrag
A self-hosted GLSL shader platform — browse, create, generate, and share real-time GPU visuals.
Fractafrag fuses three experiences:
- TikTok-style adaptive feed of living, animated shaders that learns your taste
- Shadertoy-style code editor for writing, forking, and publishing GLSL shaders
- AI generation layer where you describe what you want and the platform writes the shader
Plus a desire queue / bounty board where users express what they want to see, and human creators or AI agents fulfill those requests.
Quick Start
# 1. Clone and configure
cp .env.example .env
# Edit .env with your secrets
# 2. Launch everything
docker compose up -d
# 3. Open
open http://localhost
Architecture
nginx (reverse proxy)
├── / → React frontend (Vite)
├── /api/* → FastAPI backend
└── /mcp/* → MCP server (AI agent interface)
postgres (pgvector/pgvector:pg16) — primary datastore + vector similarity
redis (redis:7-alpine) — cache, rate limiting, job queue
renderer — headless Chromium shader renderer
worker — Celery job processor (render, embed, AI generate)
Tech Stack
| Layer | Tech |
|---|---|
| Frontend | React 18, Vite, Three.js, TanStack Query, Zustand, Tailwind CSS |
| Backend | Python, FastAPI, SQLAlchemy, Pydantic |
| Database | PostgreSQL 16 + pgvector, Redis 7 |
| Jobs | Celery + Redis |
| Renderer | Node.js + Puppeteer (Headless Chromium) |
| MCP | Python MCP SDK, HTTP+SSE transport |
| Payments | Stripe (subscriptions + Connect) |
| Container | Docker Compose, single-stack |
Milestone Roadmap
| Milestone | Focus | Status |
|---|---|---|
| M0 | Infrastructure + Auth | 🚧 In Progress |
| M1 | Core Shader Loop (editor, submit, feed) | ⏳ |
| M2 | Intelligence Layer (MCP, recommendations) | ⏳ |
| M3 | Desire Economy (bounties, fulfillment) | ⏳ |
| M4 | Monetization (Stripe, subscriptions) | ⏳ |
| M5 | AI Generation (prompt → shader) | ⏳ |
Development
# API direct access (dev mode)
http://localhost:8000/api/docs # Swagger UI
http://localhost:8000/health # Health check
# Services
http://localhost:5173 # Vite dev server
http://localhost:3200 # MCP server
http://localhost:3100 # Renderer
License
Private — see DECISIONS.md for project governance.