openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2import useMouseMove from "@/hooks/use-mouse-move";
3import type { ReactNode } from "react";
4
5export default function Background({ children }: { children: ReactNode }) {
6 // --x and --y will be updated based on mouse position
7 useMouseMove();
8 return (
9 <>
10 <div className="-z-50 fixed top-0 left-0">
11 <div className="sticky top-0 left-0 h-screen w-screen overflow-hidden">
12 <div className="absolute inset-0 z-[-1] bg-muted-foreground/15" />
13 <div className="-translate-x-1/2 -translate-y-1/2 absolute top-(--y) left-(--x) z-[-1] h-56 w-56 rounded-full bg-gradient-radial from-0% from-muted-foreground/40 to-90% to-transparent blur-md" />
14 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
15 <defs>
16 <pattern
17 id="dotted-pattern"
18 width="16"
19 height="16"
20 patternUnits="userSpaceOnUse"
21 >
22 <circle cx="2" cy="2" r="1" fill="black" />
23 </pattern>
24 <mask id="dots-mask">
25 <rect width="100%" height="100%" fill="white" />
26 <rect width="100%" height="100%" fill="url(#dotted-pattern)" />
27 </mask>
28 </defs>
29 <rect
30 width="100%"
31 height="100%"
32 fill="hsl(var(--background))"
33 mask="url(#dots-mask)"
34 />
35 </svg>
36 </div>
37 </div>
38
39 {children}
40 </>
41 );
42}