Gem Smoke
A smoky gemstone treatment for animated logos, transparent marks, and generated forms.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/gem-smokeUsage
Give the parent element an explicit size. Supply a project-owned mark URL or an
HTMLImageElement; the shader can also render its generated form without one.
import { GemSmoke } from "@/components/effects/gem-smoke"
export function GemSmokeExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<GemSmoke image="/brand/your-mark.png" />
</div>
)
}The installable example uses a vivid-layer-hosted mark and needs network access after installation. The core component embeds no asset and works with a consumer-owned local image or without an image.
API reference
The wrapper adds playback and runtime safeguards while preserving the
complete Paper GemSmoke API. See the
Paper Gem Smoke reference for the
full prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | HTMLImageElement | undefined | Optionally supplies the source shape. Without one, Paper renders the selected generated shape. |
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Accessibility
The shader is decorative by default: it is hidden from assistive technology and does not receive pointer events. Pair a meaningful logo with accessible text elsewhere, and do not rely on color or motion alone.
playback="auto" honors reduced motion by rendering a stable frame.
Performance
Paper processes a supplied source shape before rendering. Reuse stable image URLs, keep source assets appropriately sized, and avoid mounting many live instances at once. The default pixel budget is approximately 1080p, and automatic playback pauses offscreen work.
Loading and failure behavior
When an image is supplied, the component keeps its sized container visually empty during server rendering, mark preprocessing, and when WebGL2 is unavailable. The first visible image-based frame is fully processed; a failed mark or shader initialization leaves the container empty.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. The example uses vivid-layer's own mark. vivid-layer supplies the adapter, playback and loading policies, documentation, and Registry packaging.