Houdini White Noise Button 😎

houdini-white-noise-button.markdown

Houdini White Noise Button 😎

A Pen by vineeth on CodePen.

License.

index.html

<div class="container">
  <button>Tune</button>
</div>

script.babel

CSS.registerProperty({
  name: '--noise',
  syntax: '<number>',
  inherits: false,
  initialValue: 0,
})

CSS.registerProperty({
  name: '--noise-cell-size',
  syntax: '<number>',
  inherits: false,
  initialValue: 2,
})

CSS.registerProperty({
  name: '--noise-hue-lower',
  syntax: '<number>',
  inherits: false,
  initialValue: 20,
})

CSS.registerProperty({
  name: '--noise-hue-upper',
  syntax: '<number>',
  inherits: false,
  initialValue: 80,
})

CSS.registerProperty({
  name: '--noise-saturation-lower',
  syntax: '<number>',
  inherits: false,
  initialValue: 80,
})
CSS.registerProperty({
  name: '--noise-saturation-upper',
  syntax: '<number>',
  inherits: false,
  initialValue: 80,
})

CSS.registerProperty({
  name: '--noise-lightness-lower',
  syntax: '<number>',
  inherits: false,
  initialValue: 20,
})

CSS.registerProperty({
  name: '--noise-lightness-upper',
  syntax: '<number>',
  inherits: false,
  initialValue: 80,
})

const worklet = `
const getRandom = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min
}

if (typeof registerPaint !== 'undefined') {
  class Noise {
    static get inputProperties() {
      return [
        '--noise',
        '--noise-cell-size',
        '--noise-hue-lower',
        '--noise-hue-upper',
        '--noise-saturation-lower',
        '--noise-saturation-upper',
        '--noise-lightness-lower',
        '--noise-lightness-upper',
      ]
    }

    paint(ctx, size, properties) {
      const CELL_SIZE = parseInt(properties.get('--noise-cell-size'));
      const HUE_LOWER = parseInt(properties.get('--noise-hue-lower'));
      const HUE_UPPER = parseInt(properties.get('--noise-hue-upper'));
      const SATURATION_LOWER = parseInt(properties.get('--noise-saturation-lower'));
      const SATURATION_UPPER = parseInt(properties.get('--noise-saturation-upper'));
      const LIGHTNESS_LOWER = parseInt(properties.get('--noise-lightness-lower'));
      const LIGHTNESS_UPPER = parseInt(properties.get('--noise-lightness-upper'));
      for (var p = 0; p < size.height * size.width; p++) {
        const x = p % size.width
        const y = Math.floor(p / size.width)
        if (x % CELL_SIZE === 0 && y % CELL_SIZE === 0) {
          ctx.fillStyle = 'hsl(' + getRandom(HUE_LOWER, HUE_UPPER) + ', ' + getRandom(SATURATION_LOWER, SATURATION_UPPER) + '%, ' + getRandom(LIGHTNESS_LOWER, LIGHTNESS_UPPER) + '%)'
          ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE)
        }
      }
    }
  }

  registerPaint('noise', Noise)
}`

const workletBlob = URL.createObjectURL(
  new Blob([worklet], { type: 'application/javascript' })
)

window.CSS.paintWorklet.addModule(workletBlob)

style.css

@property --noise-trip {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}
@supports (background: paint(something)) {
  button {
/*
      Optionally set property values.
      This can be done at root or local scope
    */
    --noise: var(--noise-trip); /* Animated noise with property */
    --noise-cell-size: 1;
    --noise-hue-lower: 0;
    --noise-hue-upper: 0;
    --noise-saturation-lower: 0;
    --noise-saturation-upper: 0;
    --noise-lightness-lower: 30;
    --noise-lightness-upper: 70;
    background: paint(noise);
  }
  button:hover {
    animation: noise 1s infinite linear;
  }
}
body {
  font-family: sans-serif;
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  text-align: center;
  padding: 0;
  position: relative;
  margin: 0;
  background-color: #0d0d0d;
}
button {
  --lightness: 50;
  --spread: 10;
  border: 0;
  font-size: 2rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: bold;
  font-family: sans-serif;
  cursor: pointer;
  color: #fff;
  outline: transparent;
  box-shadow: 0 0px calc(var(--spread) * 1px) 0 hsl(0, 0%, calc(var(--lightness) * 1%));
  transition: box-shadow 0.1s, transform 0.1s;
}
button:hover {
  --lightness: 100;
}
button:active {
  --spread: 0;
  transform: scale(0.99);
}
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes noise {
  0%, 100% {
    --noise-trip: 0;
  }
  50% {
    --noise-trip: 100;
  }
}