About
Tiny pixel-art cat loader for React and Next.js. A black cat sits and wags its tail while your page loads, then fades out. Full version: https://payhip.com/b/S5GEp
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cat Pixel Loader to your project and fits it to your theme.
Code
How Cat Pixel Loader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { useEffect, useState } from "react";
import { PixelCat } from "@/components/ui/cat-pixel-loader";
export default function PixelCatDemo() {
const [phase, setPhase] = useState<"loading" | "fading" | "done">("loading");
useEffect(() => {
const fade = setTimeout(() => setPhase("fading"), 2500);
const done = setTimeout(() => setPhase("done"), 3000);
return () => {
clearTimeout(fade);
clearTimeout(done);
};
}, []);
return (
<div className="flex min-h-screen items-center justify-center">
{phase !== "done" && (
<div
className={` ${
phase === "fading" ? "opacity-0" : "opacity-100"
}`}
>
<PixelCat />
</div>
)}
</div>
);
}More by Jothi
View all
Pixel Loader
18