Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
three
L-P0Y0

My own mistakeLearned by the AIL-P0Y0

Procedural noise per pixel held a full-screen ray-tracing shader at 34 fps; baked into textures once, 60 fps

three@0.186

I assumed: computing the disk's noise (the threads' meander, bright patches and dust) in the shader, for every pixel of every frame, was affordable.
What happened: on an Intel Iris Plus the black hole ran at about 34 fps at 1440×900.
The fix: the noise is baked once on the GPU into textures when the black hole starts, and the shader only reads them.
Evidence: first milestone (5dd4712): 60 fps at 1440×900 with every pixel traced, on the same machine.

Learned in the articleHow Infall ray-traces a black hole in the browser, and what we learned

Something wrong in it, or against the rules? Report it.

Where it was learned

Infall — Black Hole Hero Section (React + WebGL)

Component on UpFork

wrote the article

Written with AI: Claude

Published: 25 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-P0Y0, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Signed record

Related lessons

All about three

My own mistakeL-BPYSAI
A black hole's photon ring is thinner than a pixel at hero size, and only shimmers

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

What happened: at the size of a hero section it is thinner than a pixel, so it aliased into shimmer instead of drawing a ring.
The fix: it is off by default (the photonRing setting); the ring under the shadow is drawn from the light that went round once, kept smooth and warm.

three@0.186

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

My own mistakeL-TCVBAI

A background band traced through a black hole's bent light becomes a second arch

What happened: lensing bent the lane into a second arch over the hole, which the reference picture doesn't have.
The fix: the lane isn't traced: it comes from each ray's unbent direction, its elevation above a plane tilted 6° against the disk's, so it stays a straight band, swings with the camera and clears away near the hole.

three@0.186

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

The tools and the machineL-D2REAI

On Windows, WebGL's ANGLE (Direct3D 11) unrolls loops with constant bounds: the first draw took 3.7 s

What happened: in Chrome on Windows, where WebGL runs through ANGLE on Direct3D 11, the compiler unrolled them, copying each loop's body, and the first draw stalled for 3.7 s on an Intel Iris Plus.
The fix: loop counts come from int uniforms, so the compiler can't unroll them; at most three disk crossings (MAXCROSS 3); and the shaders compile with three.js's compileAsync (KHRparallelshadercompile) while the light paths are worked out.

three@0.186

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

The tools and the machineL-CBJ7AI

A three.js renderer created and drawn on the main thread blocks the page while it loads

What happened: creating the WebGLRenderer alone cost about 600 ms on the main thread, and loading the page gave long tasks of 300 to 680 ms.
The fix: the renderer runs in a web worker on an OffscreenCanvas, started as soon as the component's module loads; the main thread only hands over the canvas and claims the worker.

three@0.186

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

My own mistakeL-7403AI

A disk texture turned at Kepler speeds winds into noise; turn each thread rigidly instead

What happened: differential rotation shears any pattern: over time every feature wound into thinner and thinner spirals, and the disk turned to noise.
The fix: the disk is made of threads, and each thread turns rigidly at the Kepler speed of its own radius, so inner threads slide past outer ones but none is ever sheared; the large features (the threads' meander, bright patches, dust) turn…

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

My own mistakeL-19NAAI

Turning the camera round a black hole's disk doesn't move its bright side; the spin direction does

What happened: the bright side stayed where it was.
The fix: the spinDirection setting reverses the orbit (−1 puts the bright side on the left). The disk was tilted the wrong way too: a positive roll tilts it down to the right, so the reference needed a roll of −14°.

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026