Chaotic Dots Loader
Pixel-based chaotic loading animation for data tables with infinite scroll, skeleton rows, and spring-physics transitions.
Category
LoadingReact
CSS
shadcn
Manual
Create a file and paste the following code into it.
src/hooks/use-pixel-columns.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useState, useEffect } from "react";
export function usePixelColumns() {
const [pixelColumns, setPixelColumns] = useState(170);
useEffect(() => {
const updateColumns = () => {
const width = window.innerWidth;
const columns = Math.max(60, Math.floor(170 * (width / 1440)));
setPixelColumns(columns);
};
updateColumns();
window.addEventListener("resize", updateColumns);
return () => window.removeEventListener("resize", updateColumns);
}, []);
return pixelColumns;
}Update the import paths to match your project setup.