Aura Blob

1"use client";
2
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import { PropsVisualiser } from "@/registry/ui";
11import { AuraBlob } from "@/registry/ui";
12
13export function AuraBlobDefaultExample() {
14  return (
15    <PropsVisualiser
16      title="Aura Blob"
17      schema={[
18        {
19          key: "color",
20          type: "string",
21          defaultValue: "oklch(0.62 0.22 285 / 0.5)",
22        },
23        {
24          key: "secondaryColor",
25          type: "string",
26          defaultValue: "oklch(0.68 0.18 200 / 0.38)",
27        },
28        {
29          key: "intensity",
30          type: "number",
31          defaultValue: 0.9,
32          min: 0,
33          max: 1,
34          step: 0.1,
35        },
36        {
37          key: "blur",
38          type: "string",
39          defaultValue: "72px",
40        },
41        {
42          key: "stiffness",
43          type: "number",
44          defaultValue: 110,
45          min: 0,
46          max: 1000,
47          step: 1,
48        },
49        {
50          key: "damping",
51          type: "number",
52          defaultValue: 20,
53          min: 0,
54          max: 100,
55          step: 1,
56        },
57        {
58          key: "primarySize",
59          type: "string",
60          defaultValue: "min(88vw, 760px)",
61        },
62        {
63          key: "secondarySize",
64          type: "string",
65          defaultValue: "min(72vw, 560px)",
66        },
67        {
68          key: "secondaryLag",
69          type: "number",
70          defaultValue: 0.7,
71          min: 0,
72          max: 1,
73          step: 0.1,
74        },
75        {
76          key: "returnToCenter",
77          type: "boolean",
78          defaultValue: true,
79        },
80      ]}
81      render={(props: {
82        color: string;
83        secondaryColor: string;
84        intensity: number;
85        blur: string;
86        stiffness: number;
87        damping: number;
88        primarySize: string;
89        secondarySize: string;
90        secondaryLag: number;
91        returnToCenter: boolean;
92      }) => (
93        <AuraBlob
94          {...props}
95          className="min-h-[280px] rounded-xl border border-border/60 bg-muted/20"
96        >
97          <div className="flex min-h-[280px] flex-col justify-end p-6 md:p-8">
98            <Card className="border-border/80 bg-background/85 shadow-sm backdrop-blur-sm">
99              <CardHeader>
100                <CardTitle>Aura blob</CardTitle>
101                <CardDescription>
102                  Aura blob is a component that creates a glowing blob effect
103                  behind the content. It can be used to create a subtle glow
104                  effect behind the content.
105                </CardDescription>
106              </CardHeader>
107              <CardContent className="text-sm text-muted-foreground">
108                Copy <code className="text-foreground">AuraBlob</code> from{" "}
109                <code className="text-foreground">@/registry/ui/aura-blob</code>{" "}
110                into any shadcn layout or hero.
111              </CardContent>
112            </Card>
113          </div>
114        </AuraBlob>
115      )}
116    />
117  );
118}