Halcyon | ForgeUI Pro

Components

Halcyon

A WebGL-powered halftone background featuring a pulsing dot grid driven by radial and diagonal waves for a calm, geometric ambiance.

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

halcyon.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.
colorDot	string	#22d3ee	Color of the dots.
colorBg	string	#060a14	Background color.
gridSize	number	24.0	Number of dots across the grid.
speed	number	0.6	Controls the animation speed.
waveStrength	number	1.0	Amplitude of the ripple wave.
className	string	—	Additional Tailwind classes for the container.

Fumara

Halftone