Hanging Cloth Banner Hero with Wind Physics on Canvas
Overview
A fabric banner hero for React and Next.js. It unrolls from a brass rod, whips at the hem and keeps moving in the wind, and you can push through it or grab it and pull. A cloth simulation on a 2D canvas, with no WebGL, that runs with hardware acceleration off.
Your heading is printed into a sheet of heavy cotton: real serif type, baked into a texture with a weave, so it bends and catches the light with the folds. The cloth is a grid of points joined by springs that resist stretching hard and resist squashing only a little, and a small texture mapper in plain JavaScript paints it each frame. The h1 stays in the page for screen readers and search engines.
Details
- Category
- Hero
- Interaction
- On Load + Drag + Mouse Move + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 118 / Hero
Zipper Reveal Hero with a Draggable Pull, on Canvas
On Load · Drag · On Scroll · On Click
No. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
No. 115 / Cards
Peel-Off Sticker Card with a Draggable Curl, on Canvas
On Load · Drag · Mouse Move · On Click
(02)FAQ
Hanging Cloth Banner Hero with Wind Physics on Canvas — FAQ
01What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. It doesn't use Three.js or WebGL. Pass your display font as the CSS variable --banner-display, in regular and italic, and the printed heading uses it.
02Does the text stay readable?
Yes. The drape and wind are kept shallow enough that the type reads at rest and in a normal breeze. The heading is sized automatically to fill the banner, so a short heading prints larger than a long one, and it breaks onto more lines on a phone.
03How do I change the colours and the wind?
Pass cloth, clothDeep, ink and trim for the fabric, and wall and wallDeep for the wall behind. Use full 6-digit hex. The wind prop scales the breeze, with 1 as the default.
04What about phones, keyboards and reduced motion?
On a phone a vertical swipe scrolls the page and a sideways drag grabs the cloth. A button sends a gust through for keyboard users, and focusing it sends a small one. With reduced motion the banner hangs still with no running loop, and the printed text and h1 are all there.