Foggy Window Wipe

Heroes 19

About

For Foggy Window Wipe: Description A photo behind a fogged, wet window that you wipe clean with your cursor. Click and drag to clear the glass, scroll to change the wipe size. Every stroke leaves soft streaks and beads of water along its edges, drops gather and run down through

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

Code

How Foggy Window Wipe is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FoggedGlass } from "@/components/ui/foggy-window-wipe";

export default function FoggedGlassDemo() {
  return (
    <FoggedGlass>
      <p className="m-0 text-[12px] text-white/60 [text-shadow:0_1px_3px_rgba(0,0,0,0.5)]">
        by{" "}
        <a
          href="https://aakashmehra.com/ref/foggedglass"
          target="_blank"
          rel="noopener noreferrer"
          className="text-white/85 underline-offset-4 hover:underline"
        >
          aakashmehra.com
        </a>
      </p>
    </FoggedGlass>
  );
}