ffdead

Stefan Gustavson webgl noise functions

https://github.com/stegu/webgl-noise

Worley (cellular noise) exported as npm module: https://github.com/Erkaman/glsl-worley

Simplex flow noise 2022

https://github.com/stegu/psrdnoise/

ffdead

const Image = () => {
  const ref = useRef()
	
  // add webgl component to global canvas while mounted
  useCanvas(<WebGlImage image={ref} />)

  return <img ref={ref} src={...} />
}

ffdead

export const wrapRootElement = ({ element }) => (
  <>
    {element}
    <GlobalCanvas/>
  </>
)

ffdead

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import classNames from 'classnames/bind'

import s from './WistiaEmbed.module.scss'
const cn = classNames.bind(s)

const WistiaEmbed = ({ id, play = false, style, options }) => {
  // const el = useRef()

ffdead

footer {
  // only include 1x size image for 'non-retina' screens
  @include if-max-resolution(1.49) {
    background-image: url('img/footer-anchor@1x.png');
  }
  // only include 2x size image for 'retina' screens
  @include if-min-resolution(1.5) {
    background-image: url('img/footer-anchor@2x.png');
    background-size: 10.5625rem 1.5625rem;
  }

ffdead

/* @author 14islands.com
 * SASS mixins for future proof resolution media query
 */

@mixin if-min-resolution($dppx) {
  @include if-resolution(min, $dppx) {
    @content;
  }
}

ffdead

/**
 * Causes the browser to reflow all elements on the page.
 * Fix for the iOS5 bug where fixed positioned elements are 
 * unavailable after programmatically calling window.scrollTo() 
 *
 * @autor david@14islands.com
 */

reflowFixedPositions: function () {
  document.documentElement.style.paddingRight = '1px';