Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Single-pass shader effect on any `<img>`/`<video>`/`<canvas>` source — driven by the shared `EFFECT_REGISTRY` so 27+ effects are available with no per-effect graph node. Pick the effect by name; the matching shader compiles at bind, and the effect's uniforms become wireable input ports automatically. Includes the post-effect classics (vignette, filmGrain, rgbShift, chromaticAberration, scanlines, glitch, swirl, ripple, halftone, …) and two new ones (`chromaticAberration`, `verticalSlice`) added for fluid-carousel and lens-aberration looks.
Type effectPassCategory effectsContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
opacity | float | Final-blit opacity 0..1. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
effect | enum | "vignette" | Pick the shader effect from the registry. Each effect's uniforms appear as wireable input ports automatically — change the effect, the inspector's input handle list updates. options sepia, grayscale, invert, brightness, contrast, saturation, hueShift, duotone, vignette, spotlight, glitch, rgbShift, pixelate, wave, ripple, swirl, blur, radialBlur, motionBlur, scanlines, chromaticAberration, verticalSlice, filmGrain, neonGlow, chromakey, halftone, posterize, sharpen, emboss, edgeDetect |
selector | elementSelector | "" | CSS selector for the host. The output canvas mounts here as a position:absolute child filling the host. |
sourceSelector | elementSelector | "" | CSS selector for an `<img>`, `<video>`, or `<canvas>` providing the texture. Videos + canvases re-upload every frame; images upload once on load. |
Use cases
- Frosted-glass / depth-of-field — `effect: vignette` on the slide backdrop, intensity wired to `slideActivations[i]`.
- Film-grain overlay — `effect: filmGrain` on a hero panel, intensity ramps with scroll progress.
- RGB-shift on hover — `effect: rgbShift` on a tile, amount wired from `pointer.distance` (close = stronger split).
- Lens chromatic aberration — `effect: chromaticAberration` for a radial-fringe camera-lens feel; power=2 = quadratic falloff (sharp at centre, lens-like at edges).
- Steviaplease vertical-slice tear — `effect: verticalSlice` on a tile, sliceCount=24 + amount tied to drag velocity for the torn-strip look.
- Scanlines / CRT — `effect: scanlines` over a hero video for retro grading.
Related nodes
Envelope
Use effectPass 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/