Tearable page cover

A full-page cover the visitor tears away by dragging, built with Three.js. The paper deforms as it’s pulled and comes apart along the tear, then falls away to reveal the page underneath.

Where it earns its place

An entrance effect is a liability if it’s just a delay with animation on it. This one works because tearing is a thing people already know how to do — the interaction explains itself, and the visitor performs it rather than waiting through it. Suited to a campaign or launch page rather than a storefront a customer visits weekly.

Built to behave

Three guards, because an effect like this has to fail safely:

• It checks for WebGL support and skips itself entirely when the device can’t render it.
• It respects prefers-reduced-motion and does not run for visitors who have asked for less motion.
• It can be set to show once, once per session, or always, so returning customers aren’t made to tear the same cover on every visit.

The cover image, focal point and labels are all section settings, so it’s configured from the theme editor rather than in code.

This is my own section rather than client work.