Wind Grass
Blades bowing as a gust crosses them and standing back up behind it.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Wind Grass
*
* Blades that bow as a gust crosses them and stand back up behind it.
*
* The technique: one first-order lag whose rate is set by the wind theAbout this effect
A living lower edge for an empty state, an onboarding screen or a footer that should feel outdoors. Everything rests on one first-order lag whose rate is set by the wind the blade is feeling: air load both bends a blade and stiffens how quickly it answers, so a blade under a gust tracks it almost exactly, and the moment the gust has gone there is no load left — only the blade's own springiness, which is slow. Nothing authors that asymmetry. Measured on the same equation, a blade reaches full bend 0.47 seconds after the gust arrives and takes 1.48 seconds to stand up again, and with the front mid-field the blades ahead of it are nearly upright while those behind it lean ten times as far. That wake is what gives the gust a direction; a sine wave phase-shifted per blade bends and unbends at the same speed and reads as a stadium wave. Two details support it: the blade is a constant-curvature arc so it bends along its length instead of pivoting, and one depth number per blade sets its height, width, brightness and how late it feels the front.