@beastjs/metal-fx

Animated WebGL "liquid metal" ring for Octane and Beast. Wrap a button and it gets a real-time metal border.

Install

bun add @beastjs/metal-fx

Octane libraries ship source: octane is a peer dependency, and your app's Octane compiler (e.g. beastOctane() from beast-tsrx/vite) compiles this package alongside your code. There is no build step.

Usage

import { MetalFx } from "@beastjs/metal-fx";

MetalFx(preset="gold")
  button.upgrade Upgrade to Pro

With more props:

MetalFx(
  ~ preset="silver"
  ~ theme="dark"
  ~ strength={0.7}
  ~ scale={2}
  ~ )
  button.upgrade Upgrade to Pro

Props

| Prop | Type | Default | Notes | | --------------------- | ----------------------------------- | ------------- | ------------------------------------------------------------------------- | | preset | 'chromatic' \| 'silver' \| 'gold' | 'chromatic' | The renderer is shared, so the most recently applied preset wins page-wide | | theme | 'auto' \| 'dark' \| 'light' | 'auto' | auto follows prefers-color-scheme live | | strength | number (0..1) | 1 | Effect opacity | | paused | boolean | false | Freezes this instance on its last frame | | borderRadius | number | child's radius | CSS px | | normalizeHostStyles | boolean | true | Strips the child's background, border, outline and box-shadow | | scale | number | 1 | Ring thickness and pattern size multiplier (e.g. under zoom: 2) |

Any other div attribute (class, style, ref, aria-*, ...) is forwarded to the wrapper.

How it works

One offscreen WebGL canvas renders a plasma shader at ~15fps. Each MetalFx copies a slice of it onto its own 2D canvas and punches out the centre, leaving a ring. Offscreen instances cost nothing, and the loop idles when every instance is paused or hidden.

License

MIT. Beast & Octane port of metal-fx by Jakub Antalik.