Boreal | ForgeUI Pro

Components

Boreal

A WebGL-powered aurora background featuring fbm-driven light curtains, a vertical color gradient, and a faint scattered starfield.

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

boreal.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.
colorLow	string	#2dd4bf	Color near the base of the aurora.
colorHigh	string	#8b5cf6	Color toward the top of the aurora.
colorBg	string	#030014	Night-sky background color.
speed	number	0.5	Controls the animation speed.
intensity	number	1.2	Brightness of the aurora curtains.
className	string	—	Additional Tailwind classes for the container.

Bloom

Caustica