SAASPOCALYPSEverdict #COLIR-D5A9
scanned 2026.04.28 · 20:33
subject of investigation
colir.space
▸ curve-based gradient editor with effects
verdict: MONTH
buildability score
48
/100
tier · month
the blunt take
“It's a gradient tool — until you notice it's a WebGL renderer with curve editors, blend modes, and real-time effects at 2K+. The "simple" part is the UX. The hard part is everything underneath it.”
The X/Y curve control and GPU-accelerated WebGL are the actual product moat. Shipping a convincing v1 means you're writing a real-time shader pipeline, not just wrapping a CSS gradient. That's a month, not a weekend.
cost breakdown.
their price ←→ your price
what they charge●
Colir PRO (monthly)
$7
/ user/mo
※ or $49 one-time perpetual license
annual:$84
what it costs you✦
01 · Vercel (hobby tier — static/edge, no heavy backend)$0.00
02 · Supabase free (auth + user records)$0.00
03 · Cloudflare R2 (exported PNG/WebP storage, light usage)$1.00
04 · Resend free tier (transactional emails)$0.00
05 · Domain$1.00
06 · Lemon Squeezy / Stripe (payment processing)$0.00
07 · Sentry free (error tracking)$0.00
08 · CDN / misc$1.00
TOTAL / mo$3.00
▸ break-even:immediately on PRO — $7/mo vs ~$3/mo to run. One subscriber covers infra. The $49 lifetime deal pays back in a single sale.
or, you know, use one of these.
if building feels spicy
option A
Mesher by CSS Hero
free mesh gradient generator in the browser. No WebGL curves, but covers 80% of use cases for free.
option B
Grainy Gradient (self-coded snippet)
SVG feTurbulence + CSS gradient. 20 lines. Kills banding. Zero infra.
option C
Figma (gradient + noise plugin)
already in every designer's workflow. Plugins like Noise & Texture fill the gap for most.
what'll actually be hard.
est. total: 5 weeks
▸ 1 week WebGL renderer + shader basics · 1 week curve editor UI · 1 week effects (noise, glitter, distortion) · 1 week export pipeline + blend modes · 1 week polish + pricing/auth
easy
medium
hard
nightmare
01
easy
Color stop UI + presets
Draggable stops on a bar. Nine palettes. Standard React state. Boring in the best way.
02
easy
Auth + licensing gating
Supabase Auth + a simple 'is_pro' flag. Lemon Squeezy webhook flips it on purchase.
03
medium
Bezier curve editor
Two-axis curve control with draggable points. d3-shape or a custom SVG canvas. Fiddly but well-trodden.
04
medium
High-res PNG/WebP export
Render to offscreen canvas at 4× scale, then toBlob(). Sounds easy until you hit memory limits on Safari.
05
hard
WebGL shader pipeline
The whole product lives here. Curve-driven color interpolation in GLSL, 12 blend modes, real-time at 2K+. This is the week that humbles you.
06
nightmare
Visual effects in shader (noise, glitter, distortion)
Each effect is its own GLSL pass with its own blend mode. Feathering + distortion + noise composited correctly is genuinely non-trivial. Budget a week just for this.
recommended stack · inferred
Next.js (static export)WebGL + custom GLSL shadersSupabase (auth + user data)Lemon Squeezy (one-time + subscription billing)Cloudflare R2 (export storage)
ready to build?
We'll email you the build guide. Cancel some plans.
▸ generated with love, by a heartless robotverdict v2.1 · saaspocalypse.dev