Clockwork Mind
Interlocking precision gears with metallic rendering and mathematically correct meshing.
What is Clockwork Mind?
Clockwork Mind is a free Canvas 2D web effect in the TappyPrism library. Interlocking precision gears with metallic rendering and mathematically correct meshing. 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 (clockwork-mind.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Rotation Speed, Gear Detail — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Rotation Speed | ROTATION_SPEED | 0.1 – 2 | 0.5 |
| Gear Detail | GEAR_DETAIL | 0.3 – 2 | 1 |
How to add Clockwork Mind to your page
- Download the standalone file clockwork-mind.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/clockwork-mind.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Clockwork Mind"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'ROTATION_SPEED', value: 0.5 }, '*');
Frequently asked questions
What is Clockwork Mind?
Clockwork Mind is a free Canvas 2D web effect in the TappyPrism library. Interlocking precision gears with metallic rendering and mathematically correct meshing. 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 (clockwork-mind.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Rotation Speed, Gear Detail — adjustable in the browser or at runtime.
How do I add Clockwork Mind to my website?
Download the standalone file at https://prism.tappypotato.com/fx/clockwork-mind.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/clockwork-mind.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Clockwork Mind"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'ROTATION_SPEED', value: 0.5 }, '*').