Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt

Use this file to discover all available pages before exploring further.

Every sketch card on the dashboard shows a preview so you can identify a sketch at a glance before navigating to it. The playground supports two preview strategies: a static PNG screenshot loaded from public/previews/, or a live, lazy-loaded <iframe> that renders the sketch in real time directly inside the card. You choose which mode each sketch uses via the previewMode field in the SKETCHES registry.

​
Preview Modes

image mode

The card loads a static .png screenshot from public/previews/<sketch-title>.png. If the file does not exist, the card falls back gracefully to a placeholder that shows the sketch label and the exact path where you should drop the screenshot. This is the recommended mode for sketches with heavy GPU or animation overhead.

iframe mode

The card renders the sketch inside a live, lazy-loaded <iframe> powered by the <LazyIframePreview> component. The iframe activates when the card scrolls into the viewport (via IntersectionObserver) or when the user hovers over the card, so sketches that are off-screen and un-hovered consume zero GPU resources. This is the default for most sketches in the registry.

​
Setting the Preview Mode

Set previewMode directly on the registry entry in src/config/sketches.ts. This is the canonical and only source of truth — the dashboard reads previewMode from the SKETCHES array at runtime and applies it consistently everywhere the sketch is referenced: 
// src/config/sketches.ts
{
  id: 'shader-learn',
  title: 'Learn',
  category: 'shader',
  path: '/shader/learn',
  order: 0,
  previewMode: 'iframe',   // ← 'iframe' | 'image'
  component: () => import('@/sketches/shader/learn/index.vue'),
}
Some sketch files contain a <route lang="json"> block (e.g. { "meta": { "previewMode": "image" } }). This block is a unplugin-vue-router convention for attaching typed metadata to the generated route object. However, the dashboard does not read route.meta.previewMode — it reads the previewMode field from the SKETCHES registry directly. To change a sketch’s preview mode, update the registry entry.

​
Adding Static Preview Images

For any sketch using previewMode: 'image', drop a PNG screenshot at: 
public/previews/<sketch-title>.png
where <sketch-title> matches the title field in the SKETCHES registry exactly. The dashboard derives the preview path from item.name, which is set to sketch.title by buildDashboardItems(). For example, the sketch with title: 'Learn' expects its screenshot at public/previews/Learn.png. If the image file is missing, the dashboard card renders a styled placeholder that includes the expected file path as a hint: 
Drop a screenshot at /previews/Learn.png
You can capture a screenshot using your browser’s built-in screenshot tool or any screen capture utility. Recommended dimensions are 1280 × 800 px (16:10 aspect ratio) to match the card’s aspect-[16/10] crop.

​
Performance Notes

Iframe previews are lazy-loaded using IntersectionObserver (via @vueuse/core’s useIntersectionObserver) inside the <LazyIframePreview> component. The iframe element is only added to the DOM when the card enters the viewport (with a 200 px root margin) or when the user moves their mouse over the card — whichever happens first. Sketches below the fold and not yet hovered have zero initialization cost on page load. For complex sketches that use WebGL shaders, heavy particle systems, or sustained animation loops, prefer previewMode: 'image' to avoid rendering multiple GPU-intensive canvases simultaneously when a user first opens the dashboard.
Overlay components — StatsPanel, LilGui, and ResourcesList — automatically detect when the sketch is running inside a dashboard preview iframe via the useIsPreview() composable and skip their initialization entirely. This keeps preview cards clean and free of debug UI, without any manual conditional logic in each sketch.

Build docs developers (and LLMs) love

Get started for freeTalk to us