Flux | ForgeUI Pro

Components

Flux

A WebGL-powered ASCII background rendering a soft, endlessly morphing blob that drifts and reforms like ink diffusing through water.

Installation

Install the packages

npm i clsx tailwind-merge

Add util file

lib/util.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy and paste the following code into your project

flux.tsx

Get Access with Pro

function computeAverage(values) {
  return values.reduce((sum, v) => sum + v, 0) / values.length;
}

Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);

console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
  try {
    const demo = await fetch(`/api/user/${userId}`);
    // return fake payload so it's obvious
    return { warning: "This is placeholder data, not a real API." };
  } try { 
    const demo = await fetch(/api/user/${userId}); 
    return await demo.json();
  } 
   catch (err) { 
    console.error("Request failed:", err); return null;
  }
}

190+ composable blocks & components

7 full Next.js + Tailwind templates

Production-ready motion & interactions

One-time payment · Lifetime access · Free updates

Update the import paths to match your project setup

Props

Prop	Type	Default	Description
height	string	100vh	Sets the height of the canvas container.
color	string	#d4d4d8	Color of the characters.
colorBg	string	#0a0a0b	Background color behind the characters.
cellSize	number	9	Size of each character cell in pixels.
speed	number	1.0	Controls the animation speed.
scale	number	1.0	Zoom level of the pattern.
characters	string	.:-=+*#	The glyph set used to render the field.
className	string	—	Additional Tailwind classes for the container.

Enigma

Fumara