HASH Refractive Filter Components
npm install @hashintel/refractive``sh`
npm install @hashintel/refractive
refractive is a higher-order component (HOC) that can wrap any React component to apply refractive glass effects.refraction
The prop allows you to customize the appearance of the effect.
The HOC uses SVG filters to create the refractive effect, which is applied via the backdrop-filter CSS property.
> Caution: refractive will override style.backdropFilter and style.borderRadius of the wrapped component.
`tsx
import { refractive } from "@hashintel/refractive";
refraction={{
radius: 12,
blur: 4,
bezelWidth: 10,
}}
>
`
`tsx
import { refractive } from "@hashintel/refractive";
const RefractiveButton = refractive(Button);
refraction={{
radius: 8,
blur: 2,
bezelWidth: 8,
}}
>
Click Me
``