React-acrylic: Frost glass effect / acrylic material react component

About

Acrylic is a type of material that creates a partially transparent texture, like this.

or like this

This project is a react component for creating acrylic material, Inspired by Fluent design's Acrylic material.

Development

At first, it looks simple just like that, but it is complicated.
For creating acrylic, we need 4 layers.

1. Background

The first layer is background, which is screenshots of the page without an element that acrylic effect we will implement.
So when we screenshotting this we must hide that element first then take a snapshot then showing again.

This uses html2canvas.
So screenshotted page (without acrylic element) will become a canvas.

2. Blur

And then we must blur that background that we screenshotted.
This uses stackblur.

3. Color overlay

This just element that has background color and opacity.

4. Noise texture

This is generated noise texture. I generated it with http://www.noisetexturegenerator.com/. The purpose of this is to make the acrylic a bit harsh, like a frosted glass.

After acrylic

When we scroll through the page. the background should be translated, so it always matches the content.

And when we resize the window. we must repeat again from layer1-4.

Final product

you can visit here https://github.com/damaera/react-acrylic

Live Demo

https://6xp9vyjj23.codesandbox.io/

Usage


import React, { Component } from 'react'
Import Acrylic from 'react-acrylic'

class YourComponent extends Component {
  render() {
    <Acrylic
      colorOverlay='#eee'
      opacity='0.4'

      position='fixed'
      top='100px'
      left='100px'
      width='300px'
      height='200px'

      blur={40}
      borderRadius='2px'
      borderRadius='2px'
    >
      <span>Hello Acrylic</span>
    </Acrylic>
  }
}

Props

Props	Default value
`position`	`'fixed'`,
`left`	`0`,
`top`	`0`,
`width`	`0`,
`height`	`0`,
`colorOverlay`	`'#fff'`
`opacity`	`0.5`
`borderRadius`	`0`
`boxShadow`	`null`
`blur`	`30`

Future

In the future we can have simpler alternatives with same result with this.
like CSS backdrop-filter. so we can skip layers 1, 2, scroll event and resize event with just this.