Background Components
Free animated React backgrounds and hero sections: dot fields, flow fields, ink, caustics and rain on glass, built with Tailwind CSS, canvas and WebGL.
Animated backgrounds and hero sections that react to the pointer. Each one ships with its headline and layout, so you can drop it in as a landing page hero or take just the effect. They are React components built with Tailwind CSS, using canvas or WebGL where the effect needs it.
- BG-01Dot FieldNewA halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.
- BG-02Background PathsUpdatedA ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
- BG-03Shape HeroUpdatedA landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
- BG-04WindUpdatedStreamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
- BG-05Topo BackgroundNewA living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas.
- BG-06Drape BackgroundNewA pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.
- BG-07Halftone BackgroundNewAny image, or a lit sphere, printed as a halftone dot screen, with a loupe that looks closer under the cursor, built with React and canvas.
- BG-08Ink BackgroundNewA hero written in ink on water. Stir it and the letters bleed, click to drop ink, and the headline gathers itself again. Built with WebGL.
- BG-09Caustics BackgroundNewA hero on the floor of a pool. Light ripples across it, clicks drop rings that bend the light, and the headline's shadow wobbles below.
- BG-10Rain Glass BackgroundNewA hero seen through a rainy window. Drops gather and run, each a tiny lens on the view, and dragging wipes the fog off the glass.
