Woven Radiance
African textile-inspired weave patterns with vibrant kente cloth geometry.
What is Woven Radiance?
Woven Radiance is a free Canvas 2D web effect in the TappyPrism library. African textile-inspired weave patterns with vibrant kente cloth geometry. 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 (woven-radiance.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Weave Speed, Color Richness — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Weave Speed | WEAVE_SPEED | 0.1 – 1.5 | 0.5 |
| Color Richness | COLOR_RICHNESS | 0.3 – 1 | 0.8 |
How to add Woven Radiance to your page
- Download the standalone file woven-radiance.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/woven-radiance.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Woven Radiance"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'WEAVE_SPEED', value: 0.5 }, '*');
Frequently asked questions
What is Woven Radiance?
Woven Radiance is a free Canvas 2D web effect in the TappyPrism library. African textile-inspired weave patterns with vibrant kente cloth geometry. 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 (woven-radiance.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Weave Speed, Color Richness — adjustable in the browser or at runtime.
How do I add Woven Radiance to my website?
Download the standalone file at https://prism.tappypotato.com/fx/woven-radiance.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/woven-radiance.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Woven Radiance"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'WEAVE_SPEED', value: 0.5 }, '*').