129
AI ready

Cobweb Tear

£10 or the whole Vault, £79.20

A Halloween overlay that spins a real physics cobweb across the page: drag through it to stretch and snap the silk until it drops away and reveals what is underneath, with an option to have the web itself spell out a short phrase.

advanced
8 more details
canvasphysicsconstraint-solverpointer-effectstouch-dragkeyboard-navigationviewport-aware-tickerdialog-animation

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Cobweb Tear demo in new tab

Released

About this effect

A seasonal overlay with something to do in it. When the page opens, an orb-weaver web spins itself across the viewport in under a second: anchor lines shoot to the edges, radials fan out from the hub, then the capture spiral winds round. Give it a short phrase and that is woven into the middle, stroke by stroke, in the same silk. From there it is a live physics web, swaying in a faint breeze over a dimmed page, its threads catching the light as they move.

Read the full effect overview

Drag through it and the silk catches on the pointer. Pull slowly and you watch the strands stretch and the web distort toward your hand before a thread finally snaps, recoils and dangles. Flick fast and you slice a clean line straight through. Pieces cut loose from the anchors drift down and fade, and the scrim lightens as the web thins.

Once enough of it is torn, it fires a cleared event: whatever is left lets go and the page behind it comes up clean. A close button and Escape dismiss it at any point, and the content underneath is ordinary DOM the whole time.

Cobweb Tear - GSAP animation effect preview

What's included

11 items
  • A real radial orb web generated per open: an irregular frame tied to the edges by anchor threads, 8 to 24 radials and a capture spiral, slightly uneven like the real thing
  • Woven text: pass a short phrase such as "OPEN LATE", with an optional smaller accent line in dyed silk, and it is laid into the centre of the web in a single-stroke silk hand, made of the same physics strands and tethered to the web, so the words sway, stretch, snap and fall like silk; they draw themselves in after the spin-in, and appear already woven under reduced motion
  • Or let the web spell them: in gather mode the spiral and radials near each letter are pulled onto it and the silk along each stroke is dyed, so the words emerge from the web itself as the capture spiral winds out, with no separate lettering laid over it
  • Verlet physics on a fixed 120 Hz step, so the web behaves the same on a 30 fps phone and a 144 Hz monitor, with a displacement clamp that keeps it from ever blowing up
  • Two kinds of tear from one gesture: slow drags hook strands and stretch them until they snap; fast strokes slice everything they cross, frame-rate independent
  • Damage stays local: intact silk holds its spun shape while torn spans go slack and droop, so a tear reads as a hole rather than the whole web sliding off
  • Pieces that lose every path to an anchor are found with a connectivity pass and fall away, fading as they go
  • Tracks how much of the web is gone and fires progress, cleared and dismissed events, with a configurable clear threshold
  • Spin-in sequence on open: anchors, then radials, then the spiral drawn round, then any words laid stroke by stroke, before physics takes over
  • One factory, createCobwebTear(root, options), returning open, clear, dismiss, revert and on, with no page-specific selectors: works as a fixed full-page overlay or inside one positioned element
  • Keyboard, touch and reduced motion handled: Enter or Space tears a burst, Escape dismisses, a finger drag tears like a mouse, and reduced motion shows a still web that clears with a tap

Perfect for

5 use cases
  • Halloween sales and seasonal offers that want one interaction people actually play with before they read the deal
  • Launch or reveal pages where a visitor clears something away to get at the announcement
  • Campaign microsites and landing pages that need a memorable first few seconds
  • Promo banners and gift cards inside a section, using the contained mode on a single card
  • Haunted-house, horror film and event pages that want atmosphere with a purpose

How it works

4 sections

The web is generated fresh each time it opens. A hub is placed near the centre, an irregular frame polygon is laid round it and tied off to the edges of the box with anchor threads, then radials are cast from the hub and intersected with the frame. Hub rings and a single capture spiral are wound outward across the radials. Every thread is subdivided into short segments so it can bend, and each span between two junctions is remembered as a unit, which is what tearing is measured in.

The simulation is position-based verlet integration with distance constraints, solved several times per step on a fixed 120 Hz clock with an accumulator, so frame rate changes only how many steps run, never how the web behaves. Intact silk is held very lightly toward the position it was spun in; without that, one cut lets the whole web slide toward its remaining anchors like a dropped net. When a span breaks it is released from that hold, picks up extra gravity and visibly droops.

The pointer has two modes chosen by speed. Below the flick threshold it hooks the nearest strands and drags them, so you see the web stretch toward your hand; each segment's strain is checked after solving, and anything past its kind's limit snaps with a small recoil. Above the threshold, each pointer event's path is intersected with every live segment and the crossings are cut immediately, which is why a flick tears its whole line regardless of frame rate. After any break a flood fill from the anchors finds what is still attached; everything else falls and fades.

Words are laid from a built-in single-stroke glyph set: each letter is a few polylines on a small grid, subdivided into the same points and constraints as the web, tied to the nearest silk by short tethers, and given build windows after the spiral so they draw on stroke by stroke. Silk behind the letters is dimmed by its distance to the nearest stroke, so the words read without cutting a hole in the web.\n\nRendering is a 2D canvas at device pixel ratio. Each segment is drawn as its share of a smooth curve through the thread, shaded by its angle to a soft, drifting light so a band of glints moves over the web, and batched by type and brightness into a few dozen paths per frame. Capture threads are spun with a slight catenary sag and sparse dew beads, structural threads under tension, and a faint, blurred older web sits behind for depth. GSAP drives the spin-in, the scrim, the card settle and the ticker, which removes itself once the web has gone.

Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Cobweb Tear opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the mount point and your content:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect needs from your markup: only an element with data-cobweb-tear. The script creates the overlay inside it: a .cobweb-tear wrapper holding a scrim, the canvas, an optional hint and the close button, plus a visually hidden status line for screen readers. With data-fixed="true" the overlay is position: fixed over the viewport, so the mount point can sit anywhere in <body>. Without it the overlay fills the mount element itself, which is given position: relative if it is static.

Two optional hooks are handled by the data-attribute wrapper, not the core:

  • [data-cobweb-reveal] gets the class is-revealed when the web clears or is dismissed, and a short glow-and-settle tween on the --cobweb-glow custom property (0 to 1, settling at 0.3). Use that variable in your own box-shadow, or ignore it.
  • [data-cobweb-replay] buttons are shown after the web clears or closes, and reopen it on click. Mark them hidden in your HTML.

With more than one web on a page, give each mount point an id and set the hooks' values to it: data-cobweb-replay="promo-web".

What is only the demo's styling: everything prefixed ct- (the full-bleed photograph and the replay pill), the two images in assets/img/, the demo's lighter data-scrim and the Mona Sans font. Delete it all and the effect still works.

CSS the effect depends on:

Code snippet omitted: it ships with the download.

The rest of the .cobweb-tear block in style.css is the look of the close button, the hint pill and the canvas cursor and focus ring; restyle it freely. Position, inset and z-index are set inline by the script, so a reskin cannot break them.

Two layout notes for the fixed mode: an ancestor with transform, filter or contain: paint turns position: fixed into "fixed to that ancestor", so mount it directly in <body>. And while the web is up the canvas sets touch-action: none so a finger drag tears instead of scrolling; it is restored when the web goes.

Options

Attribute Option Values Default Description
data-fixed fixed true, false false Cover the viewport (true) or just the mount element
data-clear-at clearAt 0.05 to 0.95 0.45 Share of the web (by thread length) that must be torn or fallen before it clears
data-radials radials 8 to 24 14 Number of spokes
data-strand-color strandColor Any CSS colour #efe9dd Silk colour. Brightness is applied with alpha, so give it fully opaque
data-scrim scrim Any CSS background rgba(9, 9, 11, 0.76) The dimming layer. It lightens to 45% of its strength as the web thins
data-auto-open autoOpen true, false true Open on load
data-text text Text none Words woven into the web in silk. \n breaks the line, in the attribute and in JavaScript. Uppercase A to Z, 0 to 9 and % £ . ! -; lowercase is set in capitals and other characters become spaces. Two short lines of up to about 12 characters read best
data-text-label textLabel Text text How screen readers hear the words, for example Open late for OPEN\nLATE. It goes into the web's accessible name
data-accent-text accentText Text none A second, smaller line woven below text (about 58% of its letter height) in dyed silk, laid in last. Same characters as text. Works on its own too, at full size
data-accent-color accentColor Any CSS colour #ff7a1a Colour of the accent line's silk. It takes the same light and shading as the pale silk, so pick a mid-to-light colour that reads over your scrim
data-text-style textStyle thread, gather thread How the words sit in the web. thread: woven over it as their own silk line, laid in after the spin, with the web dimmed around them. gather: the web's own strands are drawn onto the letters and dyed, and the words arrive with the capture spiral as it winds out, so the web itself spells them
data-text-color textColor Any CSS colour strand colour Colour of the main words' silk. Most useful with gather, where the dyed strands are what make the words stand out from the pale web
data-text-backing textBacking 0 to 1 0.55 Strength of the soft shadow and feathered blur behind the words, which keep the page under the scrim (a big headline, say) from fighting them. 0 turns both off; lower it on a light scrim
data-spider spider true, false false A small orb-weaver at the hub. With text it walks each stroke as it is laid and then settles up a radial; it climbs away when the web clears. Off by default, and nothing creature-like is drawn without it
data-hint hint Text none Small cue at the bottom of the overlay, faded out once tearing starts
data-seed seed Integer random Fix the web's shape. Every open is different without it
zIndex Number 60 Overlay stacking order
returnFocus Element the CTA in [data-cobweb-reveal] Where keyboard focus goes when the web clears from inside it
onCleared Function none Called once the clear threshold is reached
label, closeLabel Text English Accessible names for the web and the close button

Accessibility

  • Keyboard: the web is focusable (role="button"). Enter or Space tears a burst through it, and each press clears more; it takes four or five. Escape dismisses it from anywhere on the page in fixed mode, or from inside the overlay in contained mode. The close button is a real <button> with an accessible name and a visible focus ring.
  • Focus: when the web clears or closes while it has focus, focus moves to the CTA in [data-cobweb-reveal] (or returnFocus), not back to the top of the page.
  • Screen readers: with text or accentText, the web's accessible name includes the words (textLabel replaces the spoken main text; an all-caps accent is read in title case), for example "Cobweb with the words "Open late, Happy Halloween" woven into it…". A status line announces "Cobweb cleared". The content underneath is never removed or hidden from assistive technology.
  • Reduced motion: the web appears already built, with any text already woven, and holds still, with no breeze, spin-in or physics. A click, tap, Enter or Space clears it with a short fade. Changing the preference while the web is up re-lays it in the new mode.
  • Touch: a finger drag tears it the same way a mouse does.
  • No JavaScript: nothing is drawn and the content is simply visible. If the GSAP CDN fails to load, the same applies.

Performance

One canvas and one GSAP ticker callback, and an untouched web costs nothing: about 1.5 seconds after the last pointer or keyboard input the breeze eases out, and once the web is still the ticker removes itself. Moving the pointer over it, pressing a key, resizing, clearing or dismissing wakes it again. The canvas backing store is capped at 1.5x device pixel ratio. A contained web also sleeps while it is scrolled out of view. A 1200×675 web with two lines of text is roughly 1,200 points and 1,500 segments, drawn as a few dozen batched paths per frame. The soft depth web behind it is drawn once per open, and the shadow behind the words is a plain CSS gradient layer.

Dependencies

Required:

  • GSAP 3.12+ (core only). The demo is built against GSAP 3.15.0.

Browser features: Canvas 2D, Pointer Events, ResizeObserver and IntersectionObserver, all in every current browser.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.