Stagecraft

Who it is for

• Founders and PMs giving product demos
• Educators teaching with simulations
• Developers presenting technical talks
• Sales teams showing live calculators

Layout

1. Thin white top bar: deck title left, overflow menu right
2. Left thumbnail rail (~255px) with numbered live-rendered slide previews and a collapse chevron; active slide outlined in blue
3. Main stage on light grey showing the current 16:9 slide scaled to fit
4. Slide 1: full-bleed blue-pink-orange mesh gradient title slide with icon tile, huge white title, subtitle, 'Press → to continue' hint
5. Slide 2: interactive supply/demand simulation with curve controls, equilibrium and surplus panels
6. Slide 3: live-calculation feature cards with live counters
7. Slide 4: 3D knot simulation
8. Slide 5: booking-style calendar form
9. Slide 6: closing call-to-action slide

Palette

Vivid, technical, energetic, modern. The chrome is quiet and neutral so bold gradient title slides and interactive content stand out.

• app background#f3f4f6
• surface#ffffff
• text#111827
• primary blue#0b77d0
• gradient pink#ff4fa3
• gradient orange#ff5a1f
• gradient periwinkle#6b8cff

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type

Display

IBM Plex Sans 700, 88px on title slides with -2.2px tracking; 44px slide headings

Body

IBM Plex Sans 400 16px; IBM Plex Mono for labels and data

Plex Sans + Plex Mono give a technical, engineered voice that suits code-driven slides. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Fixed 1920x1080 slide canvas scaled via transform; generous internal slide padding (~96px); 6px radius controls; compact editor chrome.

Abstract mesh gradients on title slides, live Recharts-style line charts, a rendered 3D torus knot, UI cards -- no photography.

Components

• Top app bar with deck title and menu
• Collapsible thumbnail sidebar
• Scaled 16:9 slide stage
• Title slide with mesh gradient
• Interactive chart slide with sliders
• KPI/calculation cards
• 3D scene slide
• Calendar/booking form slide
• Keyboard hint chip
• Fullscreen presenter mode
• Progress indicator
• Zoom controls

Interactions

• Arrow keys / space to navigate
• Click thumbnails to jump
• Collapse and expand thumbnail rail
• Fullscreen toggle
• Sliders recompute charts live
• Rotate/animate 3D object
• Fill and submit an in-slide form
• Slide transition animations

Data

• Slide{id, title, component, notes?}
• Deck{title, slides[], theme}
• Per-slide local state (e.g. SimulationParams{supply_slope, demand_slope, price})

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Stagecraft**, a presentation shell where every slide is a React component. It is for people giving demos, lectures and pitches who want slides that do things: sliders that redraw charts, live calculators, a rotating 3D model, a working booking form. The core job is to present these reliably at a fixed resolution on any screen, with familiar presenter controls.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Slider, Tooltip, DropdownMenu, ScrollArea), lucide-react. Recharts for chart slides, React Three Fiber + drei for the 3D slide, Framer Motion for slide transitions, react-hook-form + zod for the form slide, date-fns for the calendar. No backend; slides are code in the repo.

### Pages & layout
1. **Editor/viewer**: top bar (deck title, menu with Present, Export notes, Theme); left rail of numbered thumbnails rendered from the real components at small scale, collapsible; right stage with the active slide centered and letterboxed on a light grey backdrop.
2. **Present mode**: fullscreen, no chrome, a thin progress bar and slide counter that fade after inactivity.
3. **Starter slides** (make your own content):
   - Title slide on a soft mesh gradient (periwinkle → pink → orange) with icon tile, large title, subtitle and "press → to continue" chip.
   - Interactive economics or growth model: sliders on the right, line chart on the left, computed outcome cards.
   - "Live numbers" grid of feature cards with counters that react to toggles.
   - 3D showcase with an orbiting object and a caption.
   - Scheduling form with a month calendar and time-slot list.
   - Closing call-to-action slide.

### Design system
Tokens: `--background: #f3f4f6` (stage), `--card: #ffffff`, `--foreground: #111827`, `--muted: #f3f4f6`, `--border: #e5e7eb`, `--primary: #0b77d0`, `--primary-foreground: #ffffff`; gradient stops `#6b8cff`, `#ff8be0`, `#ff4fa3`, `#ff5a1f`. Fonts: IBM Plex Sans 400/600/700 and IBM Plex Mono for labels and numbers. Slide type scale at 1920px: 24/32/44/64/88. Spacing on 8px; slide padding 96px. Radius 6px for controls, 12px cards inside slides. Motion: 300ms ease-out cross-fade/slide; respect reduced motion. Title slides add `--title-scrim: rgb(17 24 39 / .4)` over the mesh gradient so white text stays legible on every stop. Add `--muted-foreground: #6b7280` and `--input-border: #8c95a6` for slide controls.

### Components & interactions
`SlideFrame` renders children at 1920×1080 and scales with `transform: scale()` based on container size (ResizeObserver). `Deck` handles index, keyboard (←/→/Space/Home/End, F for fullscreen, Esc), URL hash `#/3` for deep links, and thumbnail clicks. Thumbnails show active outline and hover state. Interactive widgets have disabled and loading states (e.g. 3D canvas shows a spinner until ready). Slide errors are caught by an error boundary per slide so one broken slide doesn't blank the deck.

### Data & state
`slides: { id, title, Component, notes? }[]` in a single registry file. Current index in URL hash; rail collapsed state in localStorage (guarded). Each interactive slide keeps its own local state and resets on revisit unless marked persistent. All sample numbers are illustrative.

### Accessibility
Each slide is a `section` with an `aria-label` from its title; announce slide changes via a polite live region. Thumbnails are buttons with "Slide 3: title". Sliders have labels and value text. White title text sits on `--title-scrim`, verified at 4.5:1 or better on every gradient stop. Provide speaker notes view. 3D and transitions pause under reduced motion. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #111827 on #ffffff = 17.74:1; text #111827 on #f3f4f6 = 16.12:1; muted text #6b7280 on #ffffff = 4.83:1; white text #ffffff on #0b77d0 = 4.6:1.

### Security
Static app with no secrets. The demo form must not submit anywhere real; validate with zod and show a local confirmation. If slides embed external content, use sandboxed iframes and `rel="noopener noreferrer"` links. Avoid `dangerouslySetInnerHTML`.

### Performance & SEO
Lazy-load heavy slides (3D, charts) with `React.lazy` and preload the next slide. Render thumbnails as static snapshots after first paint to avoid running every widget at once. Set title/description/OG from the deck title.

### Guardrails
- Original sample content; no third-party logos or product names.
- No fabricated statistics presented as real; label demo numbers.
- Keep slides as small typed components; no `any`; visible error boundaries.
- Done when: slides scale crisply at 1280, 1920 and 4K; keyboard and thumbnail navigation work; deep links open the right slide; sliders update the chart live; the 3D slide loads lazily; present mode hides chrome and exits with Esc.

Open the builderAll templatesThis palette on its own