Torn Paper
Paper surface tearing apart with fibrous edges revealing warm volumetric light underneath, then reforming.
What is Torn Paper?
Torn Paper tears a paper surface open along an fbm-noise-driven seam, exposes fibrous edges and warm volumetric light underneath, then lets the sheet reform and starts again. The tear edge is not a straight line: noise displaces it per pixel, so the rip reads as fibre pulling apart rather than a mask sliding open. Two parameters, tear speed and glow intensity, control the pace and how much light spills through. It is one of the few effects here that requests an alpha-enabled WebGL context, so you can layer it over your own background colour or image instead of using it as an opaque fill, and it pauses when scrolled out of view via IntersectionObserver. A good fit for reveal transitions, section dividers and storytelling pages.
Torn Paper is a free WebGL web effect in the TappyPrism library. Paper surface tearing apart with fibrous edges revealing warm volumetric light underneath, then reforming. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (torn-paper.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Tear Speed, Glow Intensity — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Tear Speed | TEAR_SPEED | 0.3 – 3 | 1 |
| Glow Intensity | GLOW_INTENSITY | 0.3 – 2 | 1 |
How to add Torn Paper to your page
- Download the standalone file torn-paper.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/torn-paper.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Torn Paper"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'TEAR_SPEED', value: 1 }, '*');
Frequently asked questions
What is Torn Paper?
Torn Paper tears a paper surface open along an fbm-noise-driven seam, exposes fibrous edges and warm volumetric light underneath, then lets the sheet reform and starts again. The tear edge is not a straight line: noise displaces it per pixel, so the rip reads as fibre pulling apart rather than a mask sliding open. Two parameters, tear speed and glow intensity, control the pace and how much light spills through. It is one of the few effects here that requests an alpha-enabled WebGL context, so you can layer it over your own background colour or image instead of using it as an opaque fill, and it pauses when scrolled out of view via IntersectionObserver. A good fit for reveal transitions, section dividers and storytelling pages. Torn Paper is a free WebGL web effect in the TappyPrism library. Paper surface tearing apart with fibrous edges revealing warm volumetric light underneath, then reforming. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (torn-paper.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Tear Speed, Glow Intensity — adjustable in the browser or at runtime.
How do I add Torn Paper to my website?
Download the standalone file at https://prism.tappypotato.com/fx/torn-paper.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/torn-paper.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Torn Paper"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'TEAR_SPEED', value: 1 }, '*').