Smoke Ring — live WebGL hero effect

Paper Shaders · @paper-design/shaders-react@0.0.77 · Apache-2.0

Smoke Ring — an animated WebGL hero background from Paper Shaders (Apache-2.0, open source). Rendered and measured live: 61fps on a 1440×900 canvas. Exact config shipped as tokens · npm i @paper-design/shaders-react.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/effects/smoke-ring.

Library

Paper Shaders · @paper-design/shaders-react@0.0.77 · Apache-2.0

https://github.com/paper-design/shaders

Install

npm i @paper-design/shaders-react

Usage — the measured config

import { SmokeRing } from '@paper-design/shaders-react';

<SmokeRing speed={0.7} style={{width: '100%', height: '100vh'}} />

Measured live

61fps · canvas 1440x900 · dark scheme

Agent-ready

MCP: get_recipe("Paper Shaders", "Hero Effect") — the full config, params, fps and license/NOTICE in one call.