distorted-glass

1"use client"
2 
3import { cn } from "@/lib/utils"
4 
5export const DistortedGlass = ({ className }: { className?: string }) => {
6  return (
7    <>
8      <div
9        className={cn(
10          "relative hidden h-[50px] w-[360px] overflow-hidden rounded-b-2xl lg:w-[600px]  xl:block xl:w-full",
11          className
12        )}
13      >
14        <div className="pointer-events-none absolute bottom-0  z-10 size-full overflow-hidden rounded-b-2xl  border border-[#f5f5f51a]">
15          <div className="glass-effect size-full"></div>
16        </div>
17        <svg>
18          <title>Distorted Glass</title>
19          <defs>
20            <filter id="fractal-noise-glass">
21              <feTurbulence
22                type="fractalNoise"
23                baseFrequency="0.12 0.12"
24                numOctaves="1"
25                result="warp"
26              ></feTurbulence>
27              <feDisplacementMap
28                xChannelSelector="R"
29                yChannelSelector="G"
30                scale="30"
31                in="SourceGraphic"
32                in2="warp"
33              />
34            </filter>
35          </defs>
36        </svg>
37      </div>
38 
39      <style jsx>{`
40        .glass-effect {
41          background: rgba(0, 0, 0, 0.2);
42          background: repeating-radial-gradient(
43            circle at 50%50%,
44            rgb(255 255 255 / 0),
45            rgba(255, 255, 255, 0.2) 10px,
46            rgb(255 255 255) 31px
47          );
48          filter: url(#fractal-noise-glass);
49          background-size: 6px 6px;
50          backdrop-filter: blur(0px);
51        }
52      `}</style>
53    </>
54  )
55}