Torrent | ForgeUI Pro

Components

Torrent

A WebGL-powered ASCII background rendering a Matrix-style digital rain of katakana and digits cascading down glowing columns.

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

torrent.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	#22c55e	Color of the characters.
colorBg	string	#020604	Background color behind the characters.
cellSize	number	14	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	0123456789ﾊﾋﾎｱｳｴｵｶｷｹ	The glyph set used to render the field.
className	string	—	Additional Tailwind classes for the container.

Sweep

Twin