Ink Calligraphy
Abstract gestural ink strokes with organic diffusion on textured paper and luminous gold leaf highlights.
What is Ink Calligraphy?
Ink Calligraphy is a free Canvas 2D web effect in the TappyPrism library. Abstract gestural ink strokes with organic diffusion on textured paper and luminous gold leaf highlights. 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 (ink-calligraphy.html) with zero dependencies — no npm package, no framework, no build step. It exposes 4 live parameters — Stroke Speed, Ink Density, Gold Leaf, Dark Mode — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Stroke Speed | STROKE_SPEED | 0.3 – 2 | 1 |
| Ink Density | INK_DENSITY | 0.3 – 2 | 1 |
| Gold Leaf | GOLD_AMOUNT | 0 – 2 | 1 |
| Dark Mode | PALETTE | 0 – 1 | 0 |
How to add Ink Calligraphy to your page
- Download the standalone file ink-calligraphy.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/ink-calligraphy.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Ink Calligraphy"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'STROKE_SPEED', value: 1 }, '*');
Frequently asked questions
What is Ink Calligraphy?
Ink Calligraphy is a free Canvas 2D web effect in the TappyPrism library. Abstract gestural ink strokes with organic diffusion on textured paper and luminous gold leaf highlights. 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 (ink-calligraphy.html) with zero dependencies — no npm package, no framework, no build step. It exposes 4 live parameters — Stroke Speed, Ink Density, Gold Leaf, Dark Mode — adjustable in the browser or at runtime.
How do I add Ink Calligraphy to my website?
Download the standalone file at https://prism.tappypotato.com/fx/ink-calligraphy.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/ink-calligraphy.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Ink Calligraphy"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'STROKE_SPEED', value: 1 }, '*').