∞ forever components

Cursor & Pointer

Glass Pebble

A clear, heavy glass pebble you drag across a quiet paper scene; the wordmark and shapes underneath bend through an SVG displacement lens in every browser.

svgmedium complexitymoderate motiondragmobile-readyaccessible

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Hero wordmarks and calm landing scenes where one tactile object should invite play.

When not to

Pages with fine text under the pebble that must stay readable, or busy photographic backgrounds.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Matte paper register (clay, sand, sage, slate, dusty blue on #1C1B18 / #F4F1EA). Edit --gp-* tokens and the #gp-art scene; displacement scale sets the bend, k in paint() the lens.

Safe to edit

  • --gp-* tokens
  • #gp-art scene
  • displacement and lens scale

Keep intact

  • IIFE + prefix, reduced-motion, visibilitychange, theme hook, demo-v1

Known limitations

  • Demo state resets on remount

glassrefractionsvg-filterdragfirst-touch

More Cursor & Pointer components

  • Magnetic DotGlowing pink dot springs to the pointer; a laggy outer ring squashes along its travel, joined by a fading tendril. Self-demos via Lissajous path until…
  • Gooey Trail22 pink blobs chain-follow the pointer via spring physics and merge into liquid goo through an SVG feColorMatrix filter; auto-demos a Lissajous path until…
  • Spotlight MaskRadial spotlight follows the pointer, punching through a dark veil to reveal a pink dot grid and glowing word. Auto-demos via Lissajous path until first…
  • Elastic RingGlowing pink ring trails the pointer with damped-spring physics, stretching along velocity and squashing across it. Auto-demos on a Lissajous path until…
  • Trail CometHot-pink comet spring-follows the cursor, dragging a tapering additive trail that lengthens with speed and flings spark particles. Lissajous demo stops at…
  • Ripple FieldGrid of dots ripples outward in expanding pink rings as the pointer moves; dots displace radially along each wavefront. Lissajous auto-demo until first…