Open-source interaction plugin · v0.1.0

MatterFlux

A cinematic matter-to-energy transition for important UI actions.

Darken the interface, collapse particles into a purple singularity near the action point, and resolve with a success burst or failure fade.

Download Plugin ZIP View on GitHub

The dedicated GitHub repository will be published soon.

What it does

A complete visual lifecycle for final actions.

MatterFlux creates cinematic action transitions for downloads, deployment completions, checkout confirmations, dashboard actions, and developer-tool workflows. It stays opt-in so routine navigation remains fast and quiet.

Downloads

Give installers and release files a clear moment of completion.

Deployments

Resolve a developer-tool deployment with focused success or failure feedback.

Checkout confirmations

Reserve the effect for the final confirmation in a purchase flow.

Dashboard actions

Mark high-value or irreversible actions in operator interfaces.

Developer workflows

Add cinematic feedback to the final step of a controlled workflow.

Product launches

Create a memorable final interaction for release and package pages.

Live demo

See both outcomes in the browser.

Interactive test chamber

Resolve the same action in two ways.

The success path concentrates into a bright shockwave. The failure path loses energy, restores the interface, and reports the issue without navigating away.

Last signal

Ready for a controlled test.

Integration examples

Use the same API across your stack.

The release includes framework-free, React, and Next.js entry points plus TypeScript declarations. Import the stylesheet once and mount the React provider at the application root.

Vanilla JavaScriptindex.html

<link rel="stylesheet" href="./matterflux.css" />
<script src="./matterflux.iife.js"></script>

<button id="download">Download</button>

<script>
  const flux = MatterFlux.create();
  download.addEventListener("click", (event) =>
    flux.run({ event, label: "Preparing download" })
  );
</script>

ReactDownloadButton.tsx

import { useMatterFlux } from
  "@indusautomationlabs/matterflux/react";

export function DownloadButton() {
  const { runMatterFlux } = useMatterFlux();
  return (
    <button onClick={(event) => runMatterFlux({
      event,
      label: "Downloading",
      mode: "success"
    })}>
      Download
    </button>
  );
}

Next.jsCompleteAction.tsx

"use client";

import { useMatterFlux } from
  "@indusautomationlabs/matterflux/react";

export function CompleteAction() {
  const { runMatterFlux } = useMatterFlux();
  return (
    <button onClick={(event) => runMatterFlux({
      event,
      label: "Completing action",
      intensity: "medium"
    })}>
      Complete
    </button>
  );
}

Performance modes

Cinematic without an extreme default.

MatterFlux defaults to medium, lowers particle counts on mobile, caps rendering around 60 FPS, and pauses drawing in hidden tabs. Older GPUs should use low or medium mode.

Low

50 desktop / 25 mobile

Best for older, integrated, or constrained GPUs.

Medium

90 desktop / 45 mobile

The balanced default for most product interfaces.

High

140 desktop / 70 mobile

A denser field for capable devices and short transitions.

Accessibility

Reduced motion is built in.

When reduced motion is preferred, MatterFlux skips the particle storm and rotating rings. It uses a quick dark overlay with a compact glowing orb, announces status changes, preserves focus, and cleans up immediately after resolution.

Open-source status

Experimental, reusable, and MIT licensed.

MatterFlux is an experimental open-source interaction plugin by Indus Automation Labs. Version 0.1.0 is available as a site-hosted ZIP; its dedicated GitHub repository and optional npm release are planned next.

Download v0.1.0 ZIP GitHub placeholder