Wind Map

Backgrounds

About

A canvas background where thousands of particles ride a slowly shifting wind flow field, leaving speed-coloured trails that bend and spiral around the pointer like a weather chart.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wind Map to your project and fits it to your theme.

Code

How Wind Map is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import WindMap from "@/components/ui/wind-map";

export default function WindMapSandDemo() {
  return (
    <WindMap
      colors={["#f1eadc", "#d2c3a6", "#a77b4f", "#5b3a22"]}
      className="h-screen min-h-screen w-full"
    >
      <div className="pointer-events-none flex h-full flex-col justify-between p-6">
        <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-black/50">
          Gulf of Oman · 10 m wind · 06:00 GST
        </p>
        <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-black/40">
          Khareef building over Dhofar
        </p>
      </div>
    </WindMap>
  );
}