Mosaic Studio

Landing pages, shuffled — not slopped.

Mosaic Studio is a curated landing-page playground. Rather than generating a page with AI or starting from a blank canvas, it lets you shuffle through a hand-built system of layouts, typography, colors, content, navigation, artifacts, and shader treatments. Lock the choices that work, continue exploring the rest, then share or export the result.

Every direction is assembled from a structured design system, with real-time feedback and the full page state encoded in the URL.

What you can do

• Shuffle through landing-page directions with the Space key or the Shuffle button.
• Step back through the 20 most recent shuffled directions without losing your current locks.
• Lock individual design decisions while continuing to shuffle everything else.
• Adjust layout, visual treatment, type, color, density, navigation, and hero content from the control panel.
• Edit visible copy directly in the preview: click hero text, badges, CTAs, navigation labels, stats, and trust marks to change or remove them.
• Preview the composition in desktop or mobile mode while responsive layout rules update the page.
• Upload a PNG, SVG, or WebP navbar logo (up to 2 MB), replace it later, or fall back to the text/icon mark.
• Share a page by copying its URL; the current configuration travels with the link.
• Export a self-contained offline ZIP with the page, renderer, fonts, and images.
• Export and import the page configuration as JSON.

Visual effects and responsive controls

The Shader Effects panel includes animated WebGL overlays such as aurora, halftone, CRT, mosaic, fluted glass, and the new Dither shader. Dither uses layered noise, quantized tonal levels, Bayer thresholds, pixel spacing, and pointer movement. Its preset defaults are intentionally restrained: overlay blend mode, 0.50 intensity, 0.25 speed, and 0.1 opacity.

The layout controls expose mobile and tablet overrides for alignment, navbar behavior, CTA visibility, trust-bar visibility, spacing, and compact artifact rendering. The playground also provides a framed mobile preview for checking the composition before export.

Uploaded navbar logos are sanitized and validated before use. They are embedded into offline exports, but share URLs are disabled while a local logo is attached because data-URL assets are not portable through the URL configuration.

Routes

Route	Purpose
/	Public Mosaic Studio landing page and preset showcase.
/playground/	Interactive studio for composing, shuffling, sharing, and exporting a page.

Tech stack

• Next.js 16 with React 19 and TypeScript
• Tailwind CSS and shadcn-style / Radix UI primitives
• Zustand for studio state and URL hydration
• OGL and custom shaders for visual treatments
• Vite for the portable export renderer
• Vitest for unit tests

Getting started

Prerequisites

• Node.js 20 or newer
• pnpm 10 (the version is pinned in package.json)

Install and run

pnpm install
pnpm dev

Open http://localhost:3000, or go directly to http://localhost:3000/playground/.

pnpm dev first builds the offline export runtime, then starts Next.js in development mode. Re-run it after changing files in export-runtime/.

Commands

Command	Description
pnpm dev	Build the export runtime and start the development server.
pnpm build	Build the export runtime and create the static Next.js export in out/.
pnpm start	Build the project, then serve out/ locally.
pnpm build:runtime	Rebuild only the portable offline-export renderer in public/export-runtime/.
pnpm lint	Run ESLint.
pnpm typecheck	Type-check without emitting files.
pnpm test	Run the Vitest suite.
pnpm format	Format supported source and Markdown files with Prettier.

Offline export

In the playground, open Share & Export and choose Download Offline ZIP. The ZIP contains:

• index.html, which can be opened directly after extracting the archive
• an embedded page configuration and the renderer needed to display it
• copied image assets and an inspectable runtime folder
• mosaic-config.json, which can be imported into Mosaic Studio later

For dependable offline exports, use local assets or image URLs that permit browser downloads. Cross-origin image hosts that block CORS cannot be included in the ZIP.

Static deployment

The Next.js app uses static export (output: "export"), so pnpm build produces a deployable out/ directory. Deploy that directory to any static host and preserve trailing-slash routing. Images are intentionally unoptimized so the app remains compatible with static hosting.

Project structure

src/app/                   App Router routes and global application shell
src/components/            Landing page, preview renderer, inline editing, controls, and UI primitives
src/content/               Curated landing and hero presets
src/store/useStudioStore.ts Studio state, locks, URL sharing, and config import/export
src/pageConfig.ts          Page configuration defaults and design-system definitions
src/lib/shufflePageConfig.ts Shuffle behavior for unlocked configuration areas
src/lib/offlineExport.ts   Offline ZIP creation and export-runtime loading
export-runtime/            Vite-built portable renderer bundled into exported pages
public/                    Preset imagery, backgrounds, and generated export runtime
tests/                     Unit tests

Product intent

Mosaic Studio is for founders, marketers, designers, and developers who need a strong landing-page direction quickly but do not want a blank-canvas builder or generic AI output. The loop is simple: shuffle, lock what works, share the direction, and export it.

For product positioning, naming rationale, and launch-page copy, see PRODUCT.md.