Molten Distortion Plugin

A lightweight image distortion effect that simulates viscous molten flow in the browser.

Quick Start

1. Include files:

<link rel="stylesheet" href="style.css">
<img class="lava-effect" src="your-image.jpg" alt="">
<script src="src/molten-distortion.js"></script>

2. Optional: set values directly on the image with data attributes:

<img
  class="lava-effect"
  src="your-image.jpg"
  data-molten-swirl-strength="6"
  data-molten-swirl-speed="0.45"
  data-molten-push-strength="3.5"
  data-molten-warp-px="26"
  data-molten-viscosity="0.00045"
  data-molten-emitter-count="3"
>

The plugin auto-attaches to all .lava-effect images.

JavaScript API

The global object is window.MoltenDistortion.

• MoltenDistortion.defaults: default settings object
• MoltenDistortion.fromDataset(img): parse data-molten-* options from an image
• MoltenDistortion.attach(target, options?): attach/re-attach to one image
• MoltenDistortion.attachAll(selector?, options?): attach to many images
• MoltenDistortion.destroy(target): destroy one instance

target can be an HTMLImageElement or a CSS selector string.

Supported data attributes

• data-molten-sim-pixels
• data-molten-warp-px
• data-molten-viscosity
• data-molten-iterations
• data-molten-damping
• data-molten-gravity
• data-molten-emitter-count
• data-molten-emitter-radius-factor
• data-molten-swirl-strength
• data-molten-swirl-speed
• data-molten-push-strength
• data-molten-time-scale

Notes

• Use local images or same-origin images to avoid canvas CORS restrictions.
• Lower swirlSpeed for slower circle rotation.
• Raise swirlStrength for stronger twisting.