Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Fullscreen WebGL mesh with per-vertex displacement driven by up to two mouse attractors. Generates a tessellated 2D silhouette (`round` / `spike` / `blob`) — or accepts a custom `[x0,y0,...]` vertex array for arbitrary shapes (hearts, SVG-imported, text-derived). Falloff curve is selectable (gaussian / linear / smoothstep / inverse-square). F375 channels-driven authoring: every input (mouseX/Y, coef, jump, dist, opacity, colour, …) is a *channel* — author it as a literal value (`{ value: ... }`) for static settings or as a wireable port (`{ port: true, default?: ... }`) to feed it from upstream. Channels not declared in `params.channels` use the per-node default and surface no port handle, so simple cases need no wiring at all.
Type meshAttractorCategory effectsContext sharedDynamic ports yesCompound no
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | Host Element |
geometrySource | meshGeometrySource | - | Pick a built-in generator (round / spike / blob), import an SVG path, render a glyph outline, paste a CSS polygon, or draw a polygon directly. |
centreX | float | -1 | -1 = auto (host centre). |
centreY | float | -1 | -1 = auto. |
radius | float | -1 | -1 = auto (~40% of min dimension). |
falloffEase | easingCurve | - | Easing curve mapping cursor distance → falloff weight. Any ease registered on FM (linear / easeOutCubic / sine.inOut / cubic-bezier(...) / etc.) — baked to a 64-entry LUT and sampled in the vertex shader. |
channels | meshAttractorChannels | {} | F375 — per-channel authoring. Toggle each channel between literal value (no port), wireable port, or wireable port with inspector default. Float channels also support multiply / offset / curve scaling on the wired path (cooked = curve(raw × multiply + offset)). |
Use cases
- Interactive hero — declare `mouseX`/`mouseY` as `{ port: true }`, leave the rest as literal channels for static colour / jump / dist.
- Two-pointer / multi-touch attractor — promote `mouseX2`/`mouseY2`/`coef2` to ports and wire from a second `pointer` or touch listener.
- Pointer + scroll attractor — `coef` channel as port, `coef2` channel as port; wire pointer to `coef`, scroll velocity to `coef2`.
- Per-section colour drift — `colour: { port: true }`, wire `slideRouter.slideActivations` → `floatArrayPick` → `paletteLut.color` → `colour`.
- Static palette per blob — `colour: { value: "#f5b023" }`, no upstream colour source needed (the literal-only channel materialises no port).
- Custom silhouette — set `customVertices` to an SVG-imported polygon or a text-derived outline.
Related nodes
Envelope
Use meshAttractor as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-effects/