Silk Sheen
Brightness taken from thread direction rather than position, so the highlight moves because the cloth turned.
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";
/**
* Silk Sheen — the highlight is perpendicular to the thread.
*About this effect
A backdrop for the one surface a product wants to feel expensive — a pricing panel, a paywall, an upgrade sheet. What makes silk read as silk is that it is directional: light scatters in a band across the fibre and barely at all along it, so the cloth is bright wherever its threads lie across your line of sight. Fold it and the highlight moves because the direction moved, not because someone shaded it. So the field this shader carries is a direction, not a brightness. The direction is the gradient of a slow scalar function turned ninety degrees — a curl, which has no sources and no sinks, and that is the reason the weave flows rather than throbs: a field that could pool would pulse in place. Brightness after that is a single line of arithmetic, how squarely the thread lies to the light, and every band and soft fold in the picture is that one line answering the direction field. Nothing paints a stripe.
Related effects
- Aurora CurtainRays that arrive where a sampled sheet folds end-on, so no line of code decides where a ray belongs.
- Fog BankSlabs composited back to front, each dimming what is behind it, so the bank has an inside rather than a surface.
- Molten MirrorA four-number room sampled through a bent view direction, so every highlight is a reflection rather than a painted one.