All tools

Refractive

Refractive glass effects for React components

Introduction

Refractive is a higher-order component (HOC) that wraps any React component to apply refractive glass effects. The HOC uses SVG filters to create the effect, applied via the backdrop-filter CSS property.

The package is published to npm at @hashintel/refractive.

Installation

npm install @hashintel/refractive

Or using Yarn:

yarn add @hashintel/refractive

Peer dependencies

  • react ^19.0.0
  • react-dom ^19.0.0

The package itself has zero runtime dependencies.

Usage

The refractive export can either be used as a namespace of refractive HTML elements (refractive.div, refractive.span, etc.) or as a function that wraps any React component.

The refraction prop customises the appearance of the effect.

Style overrides

refractive will override style.backdropFilter and style.borderRadius of the wrapped component.

Example: refractive div

import { refractive } from "@hashintel/refractive";

<refractive.div
  className="your-class-name"
  refraction={{
    radius: 12,
    blur: 4,
    bezelWidth: 10,
  }}
>
  Your content here
</refractive.div>;

Example: wrapping a custom component

import { refractive } from "@hashintel/refractive";
import { Button } from "./button";

const RefractiveButton = refractive(Button);

<RefractiveButton
  onClick={() => {}}
  refraction={{
    radius: 8,
    blur: 2,
    bezelWidth: 8,
  }}
>
  Click Me
</RefractiveButton>;

Source and license