JSPM

fluid-bg

0.1.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 93
  • Score
    100M100P100Q82121F
  • License MIT

Drop a live Fluid generative-art background into any page — a <fluid-bg> web component, a React wrapper, and a CDN one-liner. Wraps the hosted Fluid studio (fluid.krackeddevs.com).

Package Exports

  • fluid-bg
  • fluid-bg/core
  • fluid-bg/react

Readme

fluid-bg

Drop a live Fluid generative background into any page.

A <fluid-bg> web component, a React wrapper, and a CDN one-liner — one tag, zero setup, GPU-rendered.

npm  License: MIT  Studio

CDN — the one-liner

<script src="https://cdn.jsdelivr.net/npm/fluid-bg"></script>

<fluid-bg fixed></fluid-bg>     <!-- full-viewport background, behind everything -->

That's it. Put your content anywhere with position: relative; z-index: 1 and it sits on top.

Using fixed? Keep the page background transparent

A fixed background sits behind the page at z-index: -1. If your <body> or <html> has an opaque background colour, it paints right over the background and you'll see nothing — usually a black or white screen that looks like fluid-bg is broken. It isn't; the page is simply in front of it. Keep the page background transparent:

html, body { background: transparent; }

(fluid-bg will console.warn with this exact fix if it detects an opaque page background behind a fixed instance.) Alternatively, raise z above your page background.

npm

npm install fluid-bg
import "fluid-bg";            // registers the <fluid-bg> element
<fluid-bg hash="#p=0.4,1.9,8,0.03,1,10,0,4,60,0,0,1.7778,0,0,2"></fluid-bg>

Design any look in the studio, hit Copy share link, and paste the hash into hash. Or browse the gallery and grab one. The embed flag is set for you, so a plain share link works.

React

npm install fluid-bg react
import { FluidBg } from "fluid-bg/react";

export default function App() {
  return (
    <>
      <FluidBg fixed hash="#p=0.5,1.5,5.5,0.03,1,10,0,0,18,0,0,1.7778" />
      <main>your content on top</main>
    </>
  );
}

Imperative (vanilla JS)

import { fluidBackground } from "fluid-bg/core";

const bg = fluidBackground(document.querySelector("#hero"), {
  hash: "#p=0.4,1.6,5,0.03,1,10,0,5,40,0,0,1.7778,0,0,3",
});
// later: bg.destroy();

Options

Attribute / prop Type Default What it does
hash string a calm built-in look A Fluid share hash (#p=…). Embed flag is applied automatically.
fixed boolean false Pin as a fixed, full-viewport background (z-index:-1, pointer-events:none). Otherwise fills the parent element.
z number -1 z-index when fixed.
base string https://fluid.krackeddevs.com Point at your own self-hosted Fluid instance.

Filling a parent (not fixed)? Give the parent a size — the background fills it edge to edge:

<section style="position:relative;height:60vh">
  <fluid-bg></fluid-bg>
  <h1 style="position:relative;z-index:1">Hello</h1>
</section>

How it works (and the one caveat)

fluid-bg renders an <iframe> pointing at the hosted Fluid studio in canvas-only embed mode. The upside: it ships no shader code, weighs almost nothing, and always renders the studio's latest engines. The caveat: the background loads from fluid.krackeddevs.com, so it needs a network connection and that host being up. If you need a fully self-contained, offline background, self-host Fluid (npx wrangler deploy) and pass your own origin via base.

The iframe is aria-hidden, tabindex="-1", and pointer-events:none — it's decorative and never steals focus or clicks.

License

MIT — free forever, personal or commercial.