Components
Loading preview...
An animated 3D dotted wave background built with Three.js that flows like water. Theme-aware and lightweight, perfect for adding subtle motion depth to your UI.
npx shadcn@latest add https://21st.dev/r/sshahaider/dotted-surfaceimport { DottedSurface } from "@/components/ui/dotted-surface";
import { cn } from '@/lib/utils';
export default function DemoOne() {
return (
<DottedSurface className="size-full">
<div className="absolute inset-0 flex items-center justify-center">
<div
aria-hidden="true"
className={cn(
'pointer-events-none absolute -top-10 left-1/2 size-full -translate-x-1/2 rounded-full',
'bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]',
'blur-[30px]',
)}
/>
<h1 className="font-mono text-4xl font-semibold">Dotted Surface</h1>
</div>
</DottedSurface>
);
}