Descend | ForgeUI Pro

Components

Descend

A WebGL-powered radiant light background featuring a soft radiant light spilling down from the top edge.

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

descend.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.
colorA	string	#e0e7ff	Primary light color.
colorB	string	#818cf8	Secondary light color.
colorBg	string	#04040a	Dark base background color.
speed	number	1	Animation speed.
intensity	number	1	Brightness of the light.
className	string	—	Additional Tailwind classes for the container.

Dawnia

Enigma