Backlight

1import { useId, type ReactElement } from "react"
2 
3type BacklightProps = {
4  children?: ReactElement
5  className?: string
6  blur?: number
7}
8 
9export function Backlight({ blur = 20, children, className }: BacklightProps) {
10  const id = useId()
11 
12  return (
13    <div className={className}>
14      <svg width="0" height="0" aria-hidden="true">
15        <filter id={id} y="-50%" x="-50%" width="200%" height="200%">
16          <feGaussianBlur
17            in="SourceGraphic"
18            stdDeviation={blur}
19            result="blurred"
20          ></feGaussianBlur>
21          <feColorMatrix
22            type="saturate"
23            in="blurred"
24            values="4"
25          ></feColorMatrix>
26          <feComposite in="SourceGraphic" operator="over"></feComposite>
27        </filter>
28      </svg>
29 
30      <div style={{ filter: `url(#${id})` }}>{children}</div>
31    </div>
32  )
33}