@remotion/effects: Add turbulentDisplace() for animated distortion

[JonnyBurger]

Adds turbulentDisplace() to @remotion/effects for animated, noise-driven distortion. Includes turbulent, bulge, twist and directional modes, fractional complexity, looping evolution, and edge pinning with optional clamped sampling. Color and alpha are warped together.

Includes Studio controls, documentation, a melting-text demo, and rendered preview assets. The demo uses the live effect in supported browsers and a rendered video fallback elsewhere, with safe server-side rendering. Shares the existing Fractal Noise shader kernel without changing its generated shader. Adapted from EffectCraft, with its MIT license retained.

Validation

• bun run build
• bun run stylecheck
• Production docs static generation and generated JavaScript validation; Browser Studio, Convert, and Vibe Code assets built successfully
• 542 effect tests and 777 Studio tests
• Temporary Chrome pixel checks for all nine modes, pinned boundaries, locked sampling, transparent edges, deterministic seeds, fractional complexity and looping
• Parameter validation, cache-key coverage, unchanged Fractal Noise shader, and Studio keyframe editability
• Rendered still and animated previews

The standalone docs typecheck retains existing errors outside the new code; the added files and registrations have no errors.

Preview

Watch the rendered text demo

Interactive docs preview

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
bugs	Ready	Preview	Oct 17, 2026 12:30pm UTC
remotion	Ready	Preview	Oct 17, 2026 12:30pm UTC

[pullfrog]

ℹ️ Minor suggestions only.

Reviewed changes

• New turbulentDisplace() WebGL2 effect (packages/effects/src/turbulent-displace/index.ts, shader.ts, top-level re-export) — nine displacement modes, fractional complexity, looping evolution, edge pinning with optional clamped sampling, schema, validation, and cache key.
• Shared noise kernel extraction (packages/effects/src/value-noise-shader.ts) — the value-noise functions were lifted out of fractal-noise/shader.ts and re-interpolated by both shaders; the Fractal Noise shader is semantically unchanged (only an extra blank line).
• Package registration — bundle.ts entrypoint, package.json exports/typesVersions, and the EFFECT_CATALOG entry.
• Docs — new docs/effects/turbulent-displace.mdx, sidebar, articles.ts, Root.tsx stills/composition, demo registry, and rendered preview assets.
• Verification — module-level review of the GLSL sampling math (confirmed the readPixel/pixel Y-flips cancel and the general path matches texture(uSource, vUv)), plus reference checks on sibling effects and the registration surface.

  ^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using deepseek-v4.1-flash ｜ 𝕏}