A cursor-following spotlight effect that reveals a soft glowing circle wherever the user moves their mouse inside a button, card, or other container.
"use client";
import { ClippedCircle } from "@/components/ui/clipped-circle";
import { Button } from "@/components/ui/button";
interface ClippedCircleDemoProps {
circleSize?: number;
}
export default function ClippedCircleDemo({
circleSize = 400,
}: ClippedCircleDemoProps) {
const actions = [
{ label: "Docs", variant: "default" },
{ label: "Install", variant: "outline" },
{ label: "Components", variant: "ghost" },
] as const;
return (
<div className="mx-auto flex w-full max-w-xl flex-col gap-5 p-6">
<div className="grid grid-cols-3 gap-3">
{actions.map(({ label, variant }) => (
<Button
key={label}
variant={variant}
size="sm"
className="relative overflow-hidden"
>
{label}
<ClippedCircle circleSize={260} circleClassName="bg-white" />
</Button>
))}
</div>
<div className="relative min-h-75 overflow-hidden rounded-2xl border border-border/70 bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.16),transparent_38%),linear-gradient(135deg,hsl(var(--muted)),hsl(var(--background)))] p-8 shadow-sm">
<div className="flex h-full min-h-59 items-center justify-center rounded-xl border border-border/60 bg-white p-10 shadow-inner">
<img
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTg5LjQ0MyAxNzkuNDZDMTk1LjAxMiAxNzkuMDc1IDIwNS4yOSAxNzguNzg1IDIxMS4xNCAxNzguOTk0QzIzNy4xMTMgMTc5LjkyMSAyNzEuNzY1IDE3Ny45ODMgMjk1LjgwOSAxODcuNjM1QzMwNC40ODMgMTkxLjExNyAzMTYuMjQ2IDIwMS43NSAzMjIuNjMgMjA4LjIzN0MzMzYuNzMzIDIyMi41NjcgMzUzLjQwNCAyNDEuNzk0IDM1OC42MzUgMjYxLjMzN0MzNjIuMTEgMjc0LjMyIDM2MC4yOTcgMjkyLjA3MiAzNjAuMjA1IDMwNS42NkwzNjAuMTU0IDM1My40MTRMMzYwLjE4MyA1NzcuOTFDMzY3LjIxMiA1NzcuNzA4IDM3My45NTIgNTc3LjgzOSAzODAuOTc1IDU3Ny45NTdMMzgxLjY0MSAyNjMuNTYxQzM4MS43OTIgMjQ5LjI1NiAzODEuNzMgMjMzLjY4NiAzODMuNDU2IDIxOS41NDFDMzg0LjYyNiAyMDkuOTYyIDM4OC4zMTIgMjAxLjYxNiAzOTUuMTQ3IDE5NC44MDFDNDA3LjkzMyAxODIuMDUyIDQyMS4yNTEgMTgxLjQ3NSA0MzguMTUzIDE4MC43MzRDNDQ2LjYzIDE4MC4zMzIgNDU1LjExNSAxODAuMTI3IDQ2My42MDEgMTgwLjExN0w2MDEuMzM1IDE4MC4xMDVMNjM0Ljk4MiAxODAuMTQ3QzY0Mi42MzkgMTgwLjEzMiA2NjEuNzg1IDE3OS40OTkgNjY5LjAyMSAxODEuNzQ0QzY5OS4zODggMTkxLjE3IDczOS41NDEgMjM1LjE2OSA3NDYuNTkzIDI2NS44ODZDNzQ4LjQxNCAyNzMuODEgNzQ3LjUzIDMwNC41IDc0Ny41NDIgMzEzLjM1Qzc4MS42NTIgMzEyLjkyNiA4MTIuOTc0IDMxMC42MjYgODQwLjA3MyAzMzYuMDE0Qzg1My44MTUgMzQ4Ljg5MiA4NjcuNjY1IDM2OC4yNDcgODcyLjY4MiAzODYuNzUyQzg3My44OCAzOTEuMTggODc0LjYzNCA0MDEuNDM5IDg3NC43NyA0MDYuMTdDODc3LjE5IDQ4OC4yMiA4NzcuMDMgNTcwLjQ2NiA4NzYuOTc2IDY1Mi41MzVDODc2Ljk1OSA2NzkuMDM1IDg3Ni42OTggNzA1LjU0MSA4NzYuMTk5IDczMi4wMzVDODc1Ljk5OCA3NDguNzA3IDg3Ni4xNTIgNzY2LjI5MyA4NzQuMzQ5IDc4Mi43MjhDODcyLjMwOSA3OTQuMzI5IDg2NS43NTUgODA0LjY4NSA4NTUuOTc0IDgxMC45MzZDODQwLjk4NyA4MjAuNTE1IDgyNS42MzcgODIwLjI4MyA4MDguNjQ0IDgyMC43MUM3OTMuMjcxIDgyMC45ODkgNzc3Ljg5MiA4MjEuMDg0IDc2Mi41MTIgODIwLjk5NUM3MTUuMjM2IDgyMC4yNjUgNjk2LjEwMiA4MTcuMjc2IDY2MS42ODQgNzgxLjg5MkM2NTMuNDkzIDc3My40NjMgNjQ2LjA1IDc2NC4xMSA2NDMuNTcxIDc1Mi4zMzFDNjM4LjE2NyA3MjYuNjM4IDYzOC4zMTYgNjk3LjY3IDYzOC4zMjEgNjcxLjUzMkw2MzguMzUxIDYwNi4xMzZDNjM4LjMzOSA1NDUuNjY4IDYzNy40MDggNDgyLjU4NCA2MzguNTcxIDQyMi4zMDhDNjMxLjk3NSA0MjIuMjc5IDYyNS4zOCA0MjIuMzA1IDYxOC43OSA0MjIuMzg0TDYxOC44MzggNDI2LjMxMUM2MTkuNjE1IDQ5Ny41OTEgNjE4LjY0OCA1NzAuNDEzIDYxOC41OTUgNjQxLjgzNUw2MTguNDc2IDcwNi4zMTJDNjE4LjU3MSA3MjkuOTI5IDYxOC44MzIgNzU0LjA3NSA2MTYuNTI1IDc3Ny41NjhDNjE1LjE2NyA3ODYuMjYzIDYxNC40MTkgNzk2Ljg4NSA2MDcuNzU5IDgwMy4zNDRDNTg4LjYzMSA4MjEuODc5IDU2OC44MTUgODIwLjA0NiA1NDQuMDU5IDgyMC40MDhDNTMwLjY0OSA4MjAuNjUxIDUxNy4yNDQgODIwLjgxMSA1MDMuODM0IDgyMC44ODhMMzk4Ljk0MSA4MjAuOTEyTDM2NC4zNjMgODIwLjU4QzMxOS43MTQgODIwLjEyOSAzMTMuNDYzIDgxNC4yMTYgMjgwLjczMSA3ODMuNDE2QzI0OC45NjYgNzUzLjUyMyAyNTEuNDM2IDcyOC44NjggMjUxLjI0NSA2ODguNjMxQzIxMC4zMjIgNjg4Ljg5OCAxOTQuMTQ2IDY4OS44NDEgMTYyLjI4NCA2NjAuMDg1QzE0Ny4zMzUgNjQ2LjEyMyAxMzAuMzkxIDYyOS44NzggMTI2LjAzNyA2MDguNjk4QzEyNC44NjIgNjAyLjk4NiAxMjQuNTI0IDU4OS41NDEgMTI0LjMxNyA1ODMuNDMyQzEyMy4wODQgNTQyLjY2NyAxMjIuNDc3IDUwMS44NzkgMTIyLjQ5NiA0NjEuMDk0QzEyMi4xNzcgNDE2LjExOSAxMjIuMTc5IDM3MS4xNDMgMTIyLjQ5OCAzMjYuMTY4QzEyMi42MjcgMzAyLjE1NCAxMjIuOTgyIDI3OC4xNDEgMTIzLjU2NCAyNTQuMTM0QzEyNC4xMDcgMjMzLjU2NyAxMjEuNzMxIDIxMS4xMDUgMTM3LjEzNSAxOTUuNTA5QzE1Mi4wMDggMTgwLjQ1IDE2OS43MSAxODAuMDA3IDE4OS40NDMgMTc5LjQ2WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE5Mi4yMTMgMjA2LjA4NEMxOTMuMDE4IDIwNi4wMjYgMTkzLjgyMyAyMDUuOTgzIDE5NC42MjkgMjA1Ljk1NkMyMTMuOTk5IDIwNS4yNjcgMjY3LjMyNyAyMDQuOCAyODMuNTggMjExLjQ1QzI4OS43MTYgMjEzLjk2IDI5NS4yNDkgMjE5LjAwOCAzMDAuMDE3IDIyMy40ODRDMzEyLjEzMSAyMzQuODU5IDMyOC4yNDkgMjUxLjk0NSAzMzIuNjIzIDI2OC4wMTZDMzM1LjgwMyAyNzkuNjk2IDMzMy42NjEgMjkzLjUyMiAzMzMuNDg4IDMwNS41NjVDMzMzLjMxNSAzMTcuNTkzIDMzMy40NTQgMzI5LjY0MSAzMzMuNDU2IDM0MS42NzFMMzMzLjQ3NiA1MDYuMzU3QzMzMy40NzQgNTMzLjcxNyAzMzIuNTQ3IDU2MS4zNTYgMzMzLjUwMSA1ODguNjgxQzMzMy42NjUgNTkzLjM3MiAzMzMuOTkxIDU5OC4xNDEgMzM3Ljc3MyA2MDEuNDI3QzM0MC4yNzMgNjAzLjU5NyAzNDMuNDI3IDYwNC4xMjUgMzQ2LjYyIDYwNC41NEMzNTMuODQgNjA1LjQ3MiAzNjEuNDM3IDYwNC42MjMgMzY4LjcxIDYwNC42MDZDMzc2LjkwNiA2MDQuNTg4IDM4NS4yMjIgNjA1LjI3NiAzOTMuMzk4IDYwNC42MzVDMzk4Ljk5OSA2MDQuMTkgNDA0LjEzMyA2MDMuMTM1IDQwNi4zMzcgNTk3LjI3NUM0MDkuMzk1IDU4OS4xMzcgNDA3LjY5NCA1MzcuNzUgNDA3LjY5NiA1MjUuMzU0TDQwOC4zNDcgMjY1LjY4MkM0MDguNDcxIDI1Mi4zODEgNDA4LjQzNiAyMzkuMjM2IDQwOS41NiAyMjUuOTcyQzQxMC43MjYgMjEyLjIwMiA0MTguMDA0IDIwOC42MTMgNDMwLjc1NiAyMDcuODg2QzQ1NC43NiAyMDYuNTE5IDQ3OC42OTcgMjA2Ljg1NCA1MDIuNzI1IDIwNi44NDdMNTk2LjAwMyAyMDYuODQ5TDYzNS4wNzcgMjA2Ljg5NkM2NDEuODk4IDIwNi44ODMgNjU2LjAxNCAyMDYuNDk3IDY2Mi4zMTkgMjA3LjY5MkM2NzEuMDQzIDIxMC44MzMgNjc5LjUyNSAyMTYuNjcyIDY4Ni4yNDUgMjIzLjM2OEM2OTguOTYxIDIzNi4wMzMgNzE0LjI2OSAyNTIuMTgxIDcyMC4wMjIgMjY5LjQxNkM3MjEuMTQ5IDI3Mi43OTMgNzIwLjc0NiAyODMuMzkxIDcyMC43NzUgMjg3LjE4OEM3MjAuODcgMjk5LjA2NCA3MjAuNDkxIDMxMC44OTcgNzIwLjczNCAzMjIuNzY4QzcyMS4yOTEgMzQwLjUwOCA3MzAuNzQgMzQwLjA0NyA3NDQuNTc3IDM0MC4xMDRDNzcxLjI5NiAzNDAuMjEyIDgwMS41NTEgMzM1LjU4NCA4MjIuNDA0IDM1Ni4xNTRDODMyLjIzMiAzNjUuODQ2IDg0MS41OCAzNzguMDU3IDg0Ni4xNjQgMzkxLjMwN0M4NDcuODI1IDM5Ni4zODcgODQ4LjA5OCA0MDcuNzA3IDg0OC4yNTIgNDEzLjEzNkM4NTAuMDczIDQ5My40MzMgODUwLjcxOSA1NzMuNzUyIDg1MC4xOTggNjU0LjA3MUM4NTAuMjA5IDY4MC44OTEgODQ5Ljk1NCA3MDcuNzE3IDg0OS40MzggNzM0LjUzMkM4NDkuMjM3IDc0OC4wNTUgODQ5LjMwOCA3NjIuNTIxIDg0OC4yNzYgNzc1Ljk2NkM4NDYuNzYzIDc5NS43MjkgODIwLjI4NyA3OTMuNzE4IDgwNS45OTkgNzkzLjc3MUM4MDQuNzEyIDc5My44NDMgODAzLjQzMSA3OTMuOTA4IDgwMi4xNSA3OTMuOTYxQzc3Ny41ODkgNzk0LjkyMiA3MzYuODc4IDc5NS42MTYgNzEzLjE4NCA3ODguNDE2QzcwNy4wNjkgNzg2LjU1OSA2OTEuNTQxIDc3My42ODMgNjg2LjM3NSA3NjguNzU0QzY4MS4wMTMgNzYzLjY0OCA2NzEuNTM2IDc1NC40NzIgNjY5Ljc4NiA3NDYuOTRDNjY2LjI4MSA3MzEuODUxIDY2NS43MjMgNzE0LjY1NyA2NjUuMzkxIDY5OS4yODlDNjY1LjAxMSA2ODAuNTk1IDY2NC44OTkgNjYxLjkgNjY1LjA0MSA2NDMuMjA1TDY2NS4wNTMgNDg1LjEzNUM2NjUuMDUzIDQ2MC40MzUgNjY1LjE0OCA0MzUuNjU3IDY2NS4xODMgNDEwLjk1NkM2NjUuMjAxIDM5NS40NyA2NTUuMDc3IDM5NS41NjIgNjQyLjU2OCAzOTUuNTRDNjI4LjQxNyAzOTUuNTE1IDYxNC4wODEgMzk1LjUxNSA1OTkuODQxIDM5Ni4yNDFDNTk2LjI0NiAzOTguNjIgNTk1LjE4NSAzOTkuODg0IDU5Mi44MjQgNDAzLjQ2N0M1OTEuNzggNDE2LjI5NiA1OTIuMTI0IDQyOC41NTUgNTkyLjE0MiA0NDEuMzk5TDU5Mi4xNzIgNDk1Ljc1Mkw1OTEuNjkxIDY5NC4wODJDNTkxLjQ3OCA3MTYuODM5IDU5My4yMTYgNzYzLjcyNSA1ODguMDg1IDc4NC45NDZDNTc0LjM4NCA3OTYuMzUyIDU1Ny42NjUgNzkzLjQ2MyA1NDAuNzE0IDc5My42NzdDNTE3LjQ2NCA3OTQuMTE1IDQ5NC4yMDggNzk0LjMwNSA0NzAuOTU0IDc5NC4yNEM0MzkuMzE0IDc5NC4zNjUgNDA3LjY3MiA3OTQuMjcgMzc2LjAzMiA3OTMuOTU1QzM2NC45MDcgNzkzLjc3NyAzNDUuNjE5IDc5NS4zMjUgMzM1LjU2NCA3OTEuNzEzQzMyMS42ODcgNzg2LjcxOSAzMDkuNDQ3IDc3NC4yMTcgMjk5LjE4NiA3NjMuOTVDMjkzLjA5NSA3NTcuODUzIDI4Ni42NCA3NTEuMDY4IDI4My4wOTUgNzQzLjA5QzI3NS43MTggNzI2LjQ4OSAyNzguMDAyIDY4Mi41ODcgMjc4LjAxMSA2NjIuNTgyQzI1NS4xNjUgNjU5LjY3IDIyNi44MDUgNjY1LjY0MiAyMDUuMTM4IDY1OC4wOEMyMDAuNDcxIDY1Ni40NTUgMTg5Ljc1OSA2NDguODYzIDE4Ni4yMTUgNjQ1LjU2NkMxNzQuMzg1IDYzNC41NjkgMTUyLjg0NiA2MTcuMTU2IDE1MS45MzIgNjAwLjIyMkMxNTAuMTQ1IDU2Ny4wOCAxNDkuNjk5IDUzMy41MSAxNDkuNDk4IDUwMC40MzJDMTQ5LjEwNyA0NTcuMyAxNDguOTQgNDE0LjE2NiAxNDguOTk4IDM3MS4wMzFDMTQ5LjA3OSAzMzcuMzYzIDE0OS4zODMgMzAzLjY5NSAxNDkuOTA4IDI3MC4wMzFDMTUwLjI0IDI1NS4xNDUgMTUwLjIxNSAyMzguMDkzIDE1MS44MTQgMjIzLjM3M0MxNTMuNzYzIDIwNS40MzIgMTc4Ljc0MiAyMDYuNTI3IDE5Mi4yMTMgMjA2LjA4NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik00OTAuOTEgMjIxLjUyNUM1MjcuNzQyIDIyMS4yMyA1NjQuNTc0IDIyMS4zODcgNjAxLjQwNiAyMjEuOTk1QzYxNi45ODEgMjIyLjI3IDYzMi41OTIgMjIyLjUxOSA2NDguMTU1IDIyMy4yNTNDNjUzLjA5NiAyMjMuNDg2IDY1OS41MzEgMjIzLjc2OSA2NjMuNTExIDIyNi45NTNDNjY0Ljk4MiAyMzAuMzA4IDY2NS4yNzggMjM0LjIxNCA2NjUuNDU2IDIzNy44NDVDNjY2LjMyMiAyNTUuNTMzIDY2NS40NjggMjczLjQ4NiA2NjUuNTIxIDI5MS4yMDFDNjY1LjU1NyAzMDIuNjg5IDY2Ni45NTcgMzE1LjI5MSA2NjUuNTE1IDMyNi42MzVDNjY1LjE2NiAzMjkuMzc3IDY2NC41MDcgMzMyLjI4NiA2NjIuNTAyIDMzNC4zMTNDNjU5Ljk0IDMzNi45MDQgNjU2LjAwOCAzMzcuOTUzIDY1Mi41MDkgMzM4LjQ0NUM2NDMuODI1IDMzOS42NjYgNjM0LjExIDMzOC44MTggNjI1LjMwOSAzMzguNzgzQzYwNS43NDIgMzM4LjcwNSA1ODYuMTQ2IDMzOC4zNjMgNTY2LjU4NSAzMzguNTM3QzU1OS40MzIgMzM4LjYwMSA1NDMuOTc2IDMzOC42NjIgNTQwLjA2NyAzNDUuOTA0QzUzNi4wMDQgMzUzLjQzMyA1MzcuMzYzIDQxNS4wOTYgNTM3LjM0NSA0MjguMDQ0TDUzNi4yNzcgNjg3LjI5N0M1MzYuMjQ4IDY5Ny44ODQgNTM2LjI1MyA3MDguMTE1IDUzNS43MiA3MTguNzAyQzUzNC43NDcgNzM3Ljg3MSA1MTcuODA4IDczNi4yODcgNTAzLjEyMiA3MzYuNzAzQzQ5MS4zNzkgNzM3LjA5NCA0NzkuNjMxIDczNy4yNjYgNDY3Ljg4MiA3MzcuMjE5QzQzMS43ODggNzM3LjcxNyAzOTUuNjg5IDczNy43ODIgMzU5LjU5MyA3MzcuNDAzQzM0MS40NDYgNzM3LjIwMSAzMjMuMTQ0IDczNi44NTEgMzA1LjA1NSA3MzUuNDIyQzI5Ni43NDIgNzM0LjczOSAyOTUuMzEgNzMwLjk2NyAyOTQuODc2IDcyMy4zODFDMjkzLjMwNCA2OTUuOTk4IDI5NC45MDIgNjY4LjI1MiAyOTQuMTMyIDY0MC44NTZDMjkzLjU2OCA2MjAuODIxIDI5OS4yNDYgNjE5LjkzMiAzMTcuODQ2IDYyMC4yMDRDMzQ3LjM1MSA2MjAuNjMxIDM3Ni43MiA2MjEuODg5IDQwNi4xMzIgNjE5LjU5OUM0MTAuMjQxIDYxOS4yNzkgNDE4LjUxOSA2MTcuNjY2IDQyMC4zNDggNjEyLjM4MUM0MjIuNzU3IDU5My4wODEgNDIyLjAyNiA1NjMuMDI5IDQyMi4xNTYgNTQ0LjM3Nkw0MjMuMTcxIDI3NS44M0M0MjMuMjQ5IDI2Mi4wNjggNDIyLjg2IDI0Ny42MDUgNDI0LjI0NCAyMzMuOTEzQzQyNC41MDIgMjMxLjM1MSA0MjUuMjE4IDIyNy44OTIgNDI3LjE1MSAyMjYuMDAyQzQzMi41MzEgMjIwLjczOSA0ODEuNTQyIDIyMS42NiA0OTAuOTEgMjIxLjUyNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0yMDkuMDY4IDIyMS41MzFDMjIwLjczNCAyMjEuMzMzIDI2Ny43NTggMjE5LjYwNyAyNzMuOTk4IDIyNi4wOTFDMjc1LjgxOSAyMjcuOTgzIDI3Ni43MyAyMzAuODQ0IDI3Ny4wNTggMjMzLjM4OEMyNzcuNzQ2IDIzOC43MjQgMjc3LjU2OCAyNDQuMzk0IDI3Ny42OTYgMjQ5Ljc3M0MyNzcuOTQ4IDI1OS43NjcgMjc4LjExOSAyNjkuNzYzIDI3OC4yMDggMjc5Ljc2TDI3OC4yNzggNTYzLjQ5N0MyNzguMjQzIDYwOS41NTIgMjgxLjIyNSA2MDUuNTc4IDIzMy4zMjkgNjA0LjY0MUMyMjIuMDcyIDYwNC40MzQgMTc1LjkxNCA2MDYuNzcgMTY5LjIwNiA2MDEuNzQ3QzE2Ny4zNjcgNTk3LjcyIDE2Ny4wMjUgNTg4LjUxNSAxNjYuNzk0IDU4My45MzZDMTY1LjU0MSA1NTUuMzg0IDE2NC44NzggNTI2LjgxNCAxNjQuODA1IDQ5OC4yMzhDMTY0LjIyOCA0NDUuMTIyIDE2NC4yNjQgMzkxLjk5OSAxNjQuOTE0IDMzOC44ODNDMTY1LjA5IDMxNS4zMTggMTY1LjQ1NCAyOTEuNzU1IDE2Ni4wMDUgMjY4LjE5NUMxNjcuMjk0IDIyMi4yNTYgMTYyLjM1MyAyMjIuODYyIDIwOS4wNjggMjIxLjUzMVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik02ODkuOTgxIDM1NC44NTFDNjkzLjEyNSAzNTQuNTExIDcwNi41NyAzNTQuMzQyIDcwOS4yODEgMzU0LjY5NUM3MjAuMDcgMzU2LjEwMSA3ODYuNTc1IDM1My4xOTggNzkxLjQ2MiAzNTguNjE4Qzc5Ni4wMjkgMzcxLjc1NyA3OTQuMzQ1IDQyMS40MjUgNzk0LjM1MSA0MzcuMDMxTDc5NC4zMzkgNjUwLjg4NkM3OTQuMzMzIDY3NS41OTUgNzk0LjU2NCA3MDAuMzU3IDc5My42OTggNzI1LjA0OEM3OTMuNjE1IDcyNy4zNjcgNzkzLjQ0MyA3MzIuMTgzIDc5Mi4yMzkgNzM0LjA1N0M3OTAuOTEgNzM2LjEyNyA3ODcuMzE2IDczNi4yNTggNzg1LjAzMyA3MzYuNTE5Qzc2Ni40MTUgNzM3LjEwNiA3MDMuNDUxIDczOS40MjUgNjg5LjQzNiA3MzUuMjczQzY4Ni44MTQgNzM0LjQ5NiA2ODQuOTQ2IDczMy41MzUgNjgzLjY2NSA3MzEuMDE1QzY4MS43MDEgNzI3LjE3MSA2ODEuODMyIDcyMi4zNTUgNjgxLjcxMyA3MTguMTMyQzY4MS4wMDIgNjkyLjEwNyA2ODEuNTI5IDY2NS45NTEgNjgxLjUyOSA2MzkuOTA3TDY4MS41NjUgNDk3LjgxNkM2ODEuNTY1IDQ4MC4xNDEgNjc5Ljk3IDM2OC42MjMgNjgyLjU5MSAzNjEuMzkyQzY4My45MDIgMzU3Ljc3NSA2ODYuNjc4IDM1Ni40MDggNjg5Ljk4MSAzNTQuODUxWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+"
alt="Unlumen UI"
className="h-auto w-full max-w-52 object-contain"
/>
</div>
<ClippedCircle circleSize={circleSize} circleClassName="bg-white" />
</div>
</div>
);
}