Synth Ribbon
Flowing metallic ribbons twisting through 3D space with chrome reflections in hot pink and cyan.
What is Synth Ribbon?
Synth Ribbon is a free Canvas 2D web effect in the TappyPrism library. Flowing metallic ribbons twisting through 3D space with chrome reflections in hot pink and cyan. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (synth-ribbon.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Ribbon Count, Twist Speed — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Ribbon Count | RIBBON_COUNT | 0.5 – 2 | 1 |
| Twist Speed | TWIST_SPEED | 0.1 – 2 | 1 |
How to add Synth Ribbon to your page
- Download the standalone file synth-ribbon.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/synth-ribbon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Synth Ribbon"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'RIBBON_COUNT', value: 1 }, '*');
Frequently asked questions
What is Synth Ribbon?
Synth Ribbon is a free Canvas 2D web effect in the TappyPrism library. Flowing metallic ribbons twisting through 3D space with chrome reflections in hot pink and cyan. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (synth-ribbon.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Ribbon Count, Twist Speed — adjustable in the browser or at runtime.
How do I add Synth Ribbon to my website?
Download the standalone file at https://prism.tappypotato.com/fx/synth-ribbon.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/synth-ribbon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Synth Ribbon"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'RIBBON_COUNT', value: 1 }, '*').