TappyPrism

tappy@lab ~ % prism --howto

How to Use

No npm. No build step. No dependencies.

1

Pick

Browse the collection and find a shader you love. Each one is a single, self-contained HTML file.

2

Copy

View the source and copy it. That's the whole thing. No packages, no imports, no bundler config.

3

Remix with AI

Paste the source into Claude Code, Cursor, Codex, or any AI coding tool. Ask it to change colors, adjust timing, or adapt the effect for your project.

Iframe background

Point an iframe at the HTML file, stretch it behind your content, and you have a live background.

<iframe src="/fx/event-horizon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="shader"></iframe>

Live parameters

After the iframe loads, send { type: 'param', name, value } with postMessage. Names and ranges sit on each shader page.

iframe.contentWindow.postMessage({ type: 'param', name: 'ROTATION_SPEED', value: 0.6 }, '*');

Performance notes

Shaders pause when off-screen, cap device pixel ratio at 2, and skip extra motion when the visitor asks for reduced motion. This site does not autoplay the gallery on phones.

Frequently asked questions

Are the TappyPrism shaders free to use?

Yes. Every effect is MIT licensed, which means it is free for personal and commercial projects. You do not need permission and there is nothing to pay; keep the MIT license notice with the source if you redistribute it.

Do the shaders need any dependencies?

No. Each effect is one self-contained HTML file. There is no npm package to install, no framework to load and no build step — copy the file into your project and it runs.

How do I embed a shader as a page background?

Point an iframe at the standalone file and stretch it behind your content: <iframe src="/fx/event-horizon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="shader"></iframe>. You can also open the file and copy its source straight into your own page.

Can I change the colors and speed of an effect?

Yes. Every shader page has sliders for its live parameters, and at runtime you can send iframe.contentWindow.postMessage({ type: 'param', name: 'ROTATION_SPEED', value: 0.6 }, '*'). Parameter names and ranges are listed on each shader page.

Do the effects slow down a website?

Shaders pause when they scroll off-screen, cap device pixel ratio at 2 and skip extra motion when the visitor has asked for reduced motion. WebGL effects run on the GPU and cost very little CPU, so they are suitable for full-screen backgrounds.

How many effects are in the library?

There are 87 effects — 60 WebGL and 27 Canvas 2D — all MIT licensed and filterable by technique and tag in the gallery.

Can I use AI coding tools to remix the source?

Yes. Because each effect is a single readable file, you can paste the source into Claude Code, Cursor, Codex or any AI coding tool and ask it to change colors, adjust timing, or adapt the effect for your project.

Related guides