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.

LazyIframePreview wraps a sketch route in an <iframe> and uses VueUse’s useIntersectionObserver to defer loading until the card scrolls into the viewport. Without this deferral, every sketch tile on the dashboard would initialize its WebGL context, animation loop, and asset pipeline simultaneously — quickly exhausting GPU memory and making the page unresponsive. By activating sketches lazily, the dashboard stays fast regardless of how many sketches are registered.

​
Props

​
path
string
required
The sketch route path passed as the iframe src. For example, /shader/learn resolves to #/shader/learn inside the hash-based router. This must match the route registered in the SKETCHES registry.
​
icon
string
An icon character (emoji or symbol) displayed in the animated loading placeholder before the iframe has finished loading. Falls back to ✨ if omitted.
​
label
string
A short text label shown below the icon in the loading placeholder — for example "Shader Learn". Falls back to "preview" if omitted.

​
Lazy Loading Behavior

The component tracks two signals to decide when to render the iframe:
  • isIntersecting — set to true by useIntersectionObserver with a rootMargin of 200px, meaning the iframe activates up to 200 pixels before the card enters the visible viewport.
  • isHovered — set to true on mouseenter, so hovering the card also triggers the iframe even if the card hasn’t scrolled into view yet.
The computed shouldRenderIframe is true when either signal is active. Once the iframe fires its load event, a fade-in transition reveals it and hides the placeholder. The iframe itself is rendered at 400% × 400% and scaled down to 25% via transform: scale(0.25) — this renders the sketch at full desktop resolution and then downscales it for the card, producing a sharp, pixel-accurate miniature of the actual sketch output.

​
Loading Placeholder

While shouldRenderIframe is false, or while the iframe has not yet fired load, a placeholder is shown in place of the sketch. It displays:
  • An animated pulsing icon tile showing the icon prop.
  • A short line of text reading Loading {label}....
The placeholder fades out and the iframe fades in once isLoaded becomes true.

​
Usage

LazyIframePreview is consumed internally by the dashboard’s index.vue. It is automatically rendered for any sketch whose registry entry sets previewMode: 'iframe'. You do not need to instantiate it directly in your own sketch files. 
<!-- This is handled automatically by the dashboard — shown here for reference only -->
<LazyIframePreview
  path="/shader/learn"
  icon="✨"
  label="Shader Learn"
/>

​
Integration with useIsPreview

When a sketch loads inside the LazyIframePreview iframe, useIsPreview() returns true within that sketch’s component tree. This causes StatsPanel, LilGui, and ResourcesList to skip their initialization entirely, keeping the preview card clean and free of overlapping UI panels.
You do not normally need to use LazyIframePreview directly. Add "previewMode": "iframe" to your sketch entry in the SKETCHES registry and the dashboard will wrap it in a LazyIframePreview card automatically. See the Preview Modes guide for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us