Lattice Net
Edges recomputed from distance every frame with nothing created or destroyed, so the mesh thickens where nodes gather.
The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
"use client";
import * as React from "react";
import * as THREE from "three";
/**
* Lattice Net — the count never changes, only the distances do.
*About this effect
For a panel that is about connection — infrastructure, regions, a service map, a team. A network background usually gives itself away by fading links in and out: something decides a connection should appear, ramps its opacity up, and later ramps it down, and the result reads as a slideshow of networks rather than one network moving, because a link that fades has no visible reason for existing at the moment it does. Here nothing is created or destroyed. A fixed set of nodes drifts, and an edge exists between two of them when they are closer than a threshold, recomputed every frame from nothing but position. The lattice thickens where nodes happen to gather and thins where they spread, and the reason any particular line is on screen is on screen: those two nodes are near each other. Brightness comes from that same distance, so a link is faintest exactly when it is about to stop being a link and never vanishes in a jump. The pass is O(n²) and the file says so rather than hiding it — 150 nodes at the widest setting is eleven thousand comparisons a frame and nothing to a modern CPU, while ten times that would need a spatial grid.
Related effects
- Star ParallaxSize, brightness and colour all read off one depth, so the field reads as distance rather than as assorted dots.
- Swell SurfacePoints moved in circles rather than up and down, so crests peak and troughs flatten without either being shaped.
- Contour BandsLine width divided by the height gradient per pixel, so the lines crowd on steep ground without ever changing thickness.