Wind Type

Component

About

A display word dragged by wind: strokes through its middle bend into fine glowing needles that gust, flutter and settle, and follow your pointer.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import { WindType } from "@/components/ui/wind-type";

/** Wind Type filling the preview. Move the pointer across the word to send a gust. */
export default function WindTypeDemo() {
  return (
    <main className="relative h-screen min-h-[340px] w-full overflow-hidden" style={{ backgroundColor: "#e6f0f8" }}>
      <WindType style={{ width: "100%", height: "100%" }} />
    </main>
  );
}