Vibe Canvas: A Spatial AI-Themed Landing Page an Owner Can Reshape from Sanity Studio

This is a submission for the Sanity Challenge, Path Two: Vibe-Code Something Strange

What I Built

Vibe Canvas is a landing page builder for a solo creator/small brand that
wants a distinctive, animated "spatial" hero page — floating nodes, custom
theme presets (Cyberpunk, Vaporwave, Zen Minimal, Aurora Glitch), and a
live-tunable color palette — without touching code. The owner edits
everything from Sanity Studio: theme, colors, layout (floating grid /
circular orbit / 3D card stack), heading copy, and up to several
interactive "nodes" with their own label, description and position.

It's built for someone who wants their landing page to feel alive and
on-brand, and who needs a lightweight editorial workflow (draft → review →
approved → live) before anything goes public — useful for a small team
where one person writes copy and another approves before it's published.

I built this to explore how far Sanity's Studio customization can go: a
genuinely useful custom input component (not just a demo), a real
multi-step editorial workflow modeled as document fields, and Visual
Editing wired end-to-end so clicking an empty field on the live page jumps
straight into Studio.

Demo

Live site: https://vibe-canvas-production.up.railway.app
Studio: https://vibe-canvas-production.up.railway.app/studio
video demo:https://drive.google.com/file/d/1ZKCCdWzNjrtkRFo0FXqKb09ZVV0ir4UF/view?usp=sharing

Code

https://github.com/sundanaeem-systems/vibe-canvas

My Build Process

I built this with an AI coding assistant on Next.js 15 + Sanity Studio v3,
deployed to Railway.

What worked well:

• A custom Studio input component (ColorPalettePicker) that computes real WCAG 2.1 contrast ratios (relative luminance math) against black/white and shows AA/AAA/Fail badges live as the editor picks a color — this went well beyond a cosmetic color swatch.
• A custom document action ("Deploy Vibe") that publishes and calls an external revalidate API in one click, with toast feedback at each step.
• A full editorial workflow modeled as data next to the content: reviewStatus (draft/in-review/approved/live), an append-only reviewHistory audit trail (actor + timestamp per transition), and custom document actions (Submit for Review, Approve, Send Back to Draft, Go Live) that only appear for the document's current stage. "Deploy Vibe" itself is gated — disabled until a document reaches Approved/Live — and a custom Studio structure splits documents into Needs Review / Approved / Live / All Drafts sidebar views, so an approver's inbox is just a click away.
• Presentation + Visual Editing: the public page highlights empty fields and lets an editor click straight into Studio from the live page.

Where I got stuck:

• Deployment surfaced real issues a local dev server hides: a stray trailing space in an env variable broke Sanity client initialization with a cryptic "projectId can only contain a-z, 0-9 and dashes" error; a stale lockfile pinned Next.js to a version with known security advisories and Railway's build scanner blocked the build until I regenerated it; and NEXT_PUBLIC_* variables had to be present before the build step, not just at runtime, since Next.js inlines them at build time.
• Sanity's Studio owns its own internal router, so a Next.js into /studio left the Studio shell blank — swapping it for a plain tag
  (forcing a full page load) fixed it.

I didn't reach the App SDK or Workflows-as-a-plugin in this build; the
editorial workflow here is modeled directly as schema fields and document
actions rather than the dedicated Workflows feature, which is the next
thing I'd explore.

Sanity Project Details

Sanity Project ID: lvf6oqo1
Dataset: production

Schema: a single vibeCanvas document type with theme/color/layout
fields, an interactiveNodes array, and the editorial fields
(reviewStatus, reviewNotes, reviewHistory) described above.

Agent Session