Tree

The TypeScript component uses Math.random() to give each leaf a different fall time, path, spin, and color. Those values are passed into CSS custom properties, so every leaf can use the same animation with slightly different settings.

@keyframes defines the fall. transform handles the drifting and rotation, while CSS animation timing controls how quickly each leaf moves and when it starts.

Pointer events measure how long the tree is held. While pressed,scale() squashes it vertically. On release, @keyframes shifts the horizontal and vertical scale back and forth to create the springy distortion. React state uses the hold time to change the strength of that bounce and how many leaves are released.