Vibary.ai
Go Pro
← All WebGL effects

Thread Kink

The deflection is a tent rather than a bell, because a string under constant tension has nowhere to put the load and meets itself in a corner.

interactivefuturisticpremiumatmospheric1 draw call · full-screen shader · moderate · 1 context · interaction · looping
queued1 draw call · 1 context
Variant

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.

378 lines · react + three
"use client";

import * as React from "react";
import * as THREE from "three";

/**
 * Thread Kink — a pulled string kinks, it does not bulge.
 *

About this effect

An interactive backdrop for a panel, a hero or a section that wants the pointer to have consequences. Nearly every version of this pulls its threads toward the cursor with a Gaussian, and the result reads as a gradient with lines painted on it, because a soft round bulge is the shape of a bell curve and not the shape of a string. A line under tension displaced at one point has nowhere to put the load — the tension is constant along its length, so the deflection is linear on both sides of the contact and the strand meets itself in a kink. That is what a plucked string looks like and what the eye already knows, so the profile here is a tent, and everything else falls out of having got that one function right: threads nearer the pointer are gripped harder, so the field gathers into a V instead of blistering, and the gathered strands take the accent so the kink reads as the place the hand is. The release is an exponential approach rather than a spring, because a string let go arrives at its rest line and does not overshoot it. Line width is divided through by the per-pixel derivative, so a strand weighs the same wherever it is and at whatever size the frame is given. It paints every pixel, so it reads the inherited text colour to decide which way round the page is and then commits — light thread on a deep ground, or ink on a pale one.

Landing page heroFeature panel backdropSign-in backgroundSection divider with a pointer

Related effects