Shader Preset Preview
Thumbnail-sized preview card for a shader preset. Defaults to a static poster until hovered, at which point the live WebGL render kicks in.
Installation
import { ShaderPresetPreview } from "@gradeui/ui"Hover-to-live (default)
Cheap at rest — a poster or gradient placeholder — spins up a WebGL canvas when hovered, tears it down when you leave.
Hyperspace
Hyperspacespace
Always-live
Use sparingly — one live WebGL context per preview, and Safari caps concurrent contexts at ~8. For big grids, prefer live="hover".
Hyperspacespace
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | - | Shader preset id from the registry. |
| live | "never" | "hover" | "always" | "hover" | When to run the live render. "hover" is recommended for galleries. |
| postPreset | string | preset default | Override the preset's default post-FX. |
| palette | Partial<Palette> | - | Palette overrides for the preview. |
| aspect | "video" | "square" | "portrait" | "wide" | "video" | Thumbnail aspect ratio. |
| hideLabel | boolean | false | Hide the label strip under the preview. |
| onClick | () => void | - | Callback when the card is clicked. |
Sidecar
The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/shader-preset-preview.md and shipped inside the published @gradeui/ui tarball.
---
name: ShaderPresetPreview
import: "@gradeui/ui"
props:
- preset: string — shader preset id from the registry
- live?: "never" | "hover" | "always" (default "hover") — when to run the live WebGL render
- postPreset?: string — override the preset's default post-FX
- palette?: Partial<Palette> — palette overrides for the preview
- aspect?: "video" | "square" | "portrait" | "wide" (default "video")
- hideLabel?: boolean (default false) — hide the label strip under the preview
- onClick?: () => void
when_to_use: Thumbnail-sized preview card for a shader preset. Defaults to a cheap static placeholder until hovered, at which point the live WebGL render kicks in. Use directly when you want a single preset card; use ShaderPresetPicker for a filterable grid.
composes_with: [ThreeScene (internal), ShaderPresetPicker (wraps this)]
aliases: [shader preview, preset preview, shader card]
notes: Prefer `live="hover"` in galleries — Safari caps concurrent WebGL contexts at ~8. `live="always"` is fine for one or two cards; past that you'll run out of contexts. VALID `preset` ids come from the shader registry — at time of writing the only shipped preset is "space". Unknown ids render a placeholder card with the raw id as a label (no error). Do NOT pass invented ids like "neon-grid" — it will render as the literal string "neon-grid".
---
```jsx
// Hover-to-live (default)
<ShaderPresetPreview preset="space" />
// Always-live — use sparingly
<ShaderPresetPreview preset="space" live="always" />
```