Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Subdivided WebGL plane that samples a bound `<img>` or `<video>` texture and accepts the same per-attractor vertex displacement as `meshAttractor`. Adds a wireable global `offset` port for velocity-driven shifts (drag-carousel stretch, scroll-velocity skew). Tint port allows `paletteLut.color` to recolour the tile while the texture provides the silhouette.
Type texturedMeshTileCategory effectsContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
mouseX | float | Primary attractor X in viewport pixels. |
mouseY | float | Primary attractor Y in viewport pixels. |
coef | float | Primary attractor gain. 0 = no displacement (default), negative pulls vertices toward the cursor. |
mouseX2 | float | Secondary attractor X. Active only when `coef2` is non-zero. |
mouseY2 | float | Secondary attractor Y. |
coef2 | float | Secondary attractor gain. 0 (default) disables the second attractor. |
jump | float | Maximum displacement per attractor in px. |
dist | float | Falloff sigma / radius in px. |
offsetX | float | Global pixel offset added to every vertex AFTER the attractor displacement. Wire from `dragVelocity.dx` for drag-carousel-style stretch. |
offsetY | float | Global pixel offset Y. Wire from `dragVelocity.dy`. |
tintMix | float | 0 = pure texture (default). 1 = pure tint (texture supplies alpha only). Lets a `paletteLut.color` recolour the tile while the texture provides the silhouette. |
tint | color | Tint colour (multiplied with `tintMix`). Wire from `paletteLut.color` for per-section colour drift. |
opacity | float | Output alpha [0..1]. Multiplied with the texture's own alpha and `tint.a`. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the host element. The canvas mounts inside as a position:absolute child filling the host bounds. |
textureSelector | elementSelector | "" | CSS selector for an `<img>` or `<video>` element supplying the texture. The element is queried at bind time; videos re-upload the current frame every render. |
subdivisions | int | 32 | Plane grid resolution. 32 = good default. Higher = smoother displacement at higher GPU cost. 1 = no subdivision (a single quad — vertex displacement does nothing). min 1; max 256 |
centreX | float | -1 | -1 = auto (host centre). |
centreY | float | -1 | -1 = auto. |
width | float | -1 | -1 = auto (host width). |
height | float | -1 | -1 = auto (host height). |
falloffEase | easingCurve | "easeOutCubic" | Easing curve mapping cursor distance → falloff weight. Same vocabulary as `meshAttractor.falloffEase`. |
Use cases
- Drag-driven carousel tile — wire `dragVelocity.dx/.dy` into `offsetX/offsetY` for fluid-carousel-style velocity stretch.
- Per-tile mouse attractor on a textured plane — same `mouseX/mouseY/coef` semantics as `meshAttractor`.
- Theme drift — wire `paletteLut.color` into `tint` and increase `tintMix` to recolour the tile while the texture provides the alpha / silhouette.
- Video tile with cursor distortion — bind a `<video autoplay loop muted>` via `textureSelector`; hover-driven attractor warps the playing video.
Related nodes
Envelope
Use texturedMeshTile 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/