Animated pixel-by-pixel reveal loader for React and Next.js. Custom grids, colors and timing, with an onBuilt callback. Full version: https://payhip.com/Jothidigital
"use client";
import { useEffect, useState } from "react";
import { PixelLoader } from "@/components/ui/pixel-loader";
function useIsDark() {
const [isDark, setIsDark] = useState(true);
useEffect(() => {
const root = document.documentElement;
const update = () => setIsDark(root.classList.contains("dark"));
update();
const observer = new MutationObserver(update);
observer.observe(root, { attributes: true, attributeFilter: ["class"] });
return () => observer.disconnect();
}, []);
return isDark;
}
export default function PixelLoaderDemo() {
const isDark = useIsDark();
return (
<div
style={{
minHeight: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<PixelLoader pixelColor={isDark ? "#f4f1e8" : "#000000"} />
</div>
);
}