Spotlight Grid

1"use client";
2
3import { SpotlightGrid } from "@/registry/ui";
4
5const defaultItems = [
6  {
7    title: "Realtime sync",
8    description: "Sub-100ms collaborative updates.",
9    meta: "WebSocket edge mesh",
10  },
11  {
12    title: "Secure by default",
13    description: "Role policies and audit logs built in.",
14    meta: "SOC 2 ready controls",
15  },
16  {
17    title: "Visual analytics",
18    description: "Funnels and cohort insights in one view.",
19    meta: "No SQL required",
20  },
21  {
22    title: "Workflow automations",
23    description: "Trigger actions from events instantly.",
24    meta: "40+ native integrations",
25  },
26  {
27    title: "AI copilots",
28    description: "Context-aware suggestions in every module.",
29    meta: "Trained on workspace data",
30  },
31  {
32    title: "Global edge delivery",
33    description: "Fast responses across all regions.",
34    meta: "99.99% uptime target",
35  },
36];
37
38export function SpotlightGridDefaultExample() {
39  return (
40    <div className="mx-auto w-full max-w-5xl">
41      <SpotlightGrid
42        items={defaultItems}
43        columns={3}
44        variant="default"
45        intensity={0.6}
46        radius={250}
47      />
48    </div>
49  );
50}

1"use client";
2
3import { SpotlightGrid } from "@/registry/ui";
4
5const defaultItems = [
6  {
7    title: "Realtime sync",
8    description: "Sub-100ms collaborative updates.",
9    meta: "WebSocket edge mesh",
10  },
11  {
12    title: "Secure by default",
13    description: "Role policies and audit logs built in.",
14    meta: "SOC 2 ready controls",
15  },
16  {
17    title: "Visual analytics",
18    description: "Funnels and cohort insights in one view.",
19    meta: "No SQL required",
20  },
21  {
22    title: "Workflow automations",
23    description: "Trigger actions from events instantly.",
24    meta: "40+ native integrations",
25  },
26  {
27    title: "AI copilots",
28    description: "Context-aware suggestions in every module.",
29    meta: "Trained on workspace data",
30  },
31  {
32    title: "Global edge delivery",
33    description: "Fast responses across all regions.",
34    meta: "99.99% uptime target",
35  },
36];
37
38export function SpotlightGridSubtleExample() {
39  return (
40    <div className="mx-auto w-full max-w-5xl">
41      <SpotlightGrid
42        items={defaultItems}
43        columns={3}
44        variant="subtle"
45        intensity={0.6}
46        radius={250}
47      />
48    </div>
49  );
50}

1"use client";
2
3import { SpotlightGrid } from "@/registry/ui";
4
5const glowItems = [
6  {
7    title: "Deploy pipeline",
8    description: "5 stages passing",
9    meta: "Avg 3m 42s",
10  },
11  {
12    title: "Error tracking",
13    description: "2 unresolved issues",
14    meta: "Last seen 4m ago",
15  },
16  {
17    title: "Incident SLA",
18    description: "99.95% this month",
19    meta: "Target 99.9%",
20  },
21  { title: "API latency", description: "P95 at 126ms", meta: "Global avg" },
22];
23
24export function SpotlightGridGlowExample() {
25  return (
26    <div className="mx-auto w-full max-w-4xl">
27      <SpotlightGrid
28        items={glowItems}
29        columns={2}
30        variant="glow"
31        intensity={0.75}
32        radius={210}
33      />
34    </div>
35  );
36}