tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

tomhicks

import * as React from "react"
import {captureScroll, getSpoingyTransform} from "spoingyHelpers"
import {Animated} from "react-native"

const headerHeight = 300

export default () => {

  // use an instance variable if using component classes
  const scrollY = React.useRef(new Animated.Value(0)).current

tomhicks

import {Animated} from "react-native"

export function getSpoingyTransform(
  scrollY: Animated.Value,
  headerHeight: number,
) {
  return [
    {
      translateY: scrollY.interpolate({
        inputRange: [-headerHeight, 0, 1],