Pointer and touch

With pointer on, a view follows the pointer (a mouse, a pen or a finger) and pushes the dots, lines and strokes near it outward, easing in when the pointer arrives and out when it leaves. It works on every pattern, because the engine applies it after the pattern has drawn its frame.

import { SinuaOrb } from "@sinua/web/components";

export function Visual() {
  // The typed components take it like any other view option.
  return <SinuaOrb pattern="working" pointer style={{ width: 160, height: 160 }} />;
}

How it behaves

• Off by default. A visual that sits behind text or under a button shouldn't react to every cursor that crosses it.
• Reduced motion wins. With prefers-reduced-motion (or reducedMotion: "always"), the view draws its still pose and the pointer changes nothing. It's also ignored while the view is paused.
• Touch doesn't block scrolling. The view leaves touch-action alone, so a finger on the visual still scrolls the page; pressing and holding shows the scatter until the browser takes the gesture over.
• Radius and strength follow the size: a radius of 35% of the visual and a push of 12%, the same values the Studio uses.

iOS and Android

The native views don't have a pointer option yet. The effect is the same four engine keys on every platform, so until they do, pass them as overrides from your own gesture handler, in engine units (0 to the visual's size, 64 by default): pointerX, pointerY, pointerRadius and pointerStrength (0 turns it off).