[
  {
    "path": ".github/workflows/horizontal-scroll.yml",
    "content": "name: Deploy Horizontal Scroll\n\non: [push]\n\ndefaults:\n  run:\n    shell: bash\n    working-directory: horizontal-scroll\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    name: Deploying to surge\n\n    strategy:\n      matrix:\n        node-version: [20.x]\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v2\n        with:\n          fetch-depth: 2\n\n      - name: Set up Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v1\n        with:\n          node-version: ${{ matrix.node-version }}\n\n      - name: Install dependencies\n        run: yarn install\n\n      - name: Build\n        run: yarn build\n\n      - name: Install Surge\n        run: npm install --global surge\n\n      - name: Surge deploy\n        run: surge ./dist react-scroll-parallax-horizontal-scroll.surge.sh --token ${{ secrets.SURGE_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/mountains.yml",
    "content": "name: Deploy Mountains\n\non: [push]\n\ndefaults:\n  run:\n    shell: bash\n    working-directory: mountains\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    name: Deploying to surge\n\n    strategy:\n      matrix:\n        node-version: [20.x]\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v2\n        with:\n          fetch-depth: 2\n\n      - name: Set up Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v1\n        with:\n          node-version: ${{ matrix.node-version }}\n\n      - name: Install dependencies\n        run: yarn install\n\n      - name: Build\n        run: yarn build\n\n      - name: Install Surge\n        run: npm install --global surge\n\n      - name: Surge deploy\n        run: surge ./dist react-scroll-parallax-mountains.surge.sh --token ${{ secrets.SURGE_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/space-worms.yml",
    "content": "name: Deploy Spaceworms\n\non: [push]\n\ndefaults:\n  run:\n    shell: bash\n    working-directory: space-worms\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    name: Deploying to surge\n\n    strategy:\n      matrix:\n        node-version: [20.x]\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v2\n        with:\n          fetch-depth: 2\n\n      - name: Set up Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v1\n        with:\n          node-version: ${{ matrix.node-version }}\n\n      - name: Install dependencies\n        run: yarn install\n\n      - name: Build\n        run: yarn build\n\n      - name: Install Surge\n        run: npm install --global surge\n\n      - name: Surge deploy\n        run: surge ./dist react-scroll-parallax-space-worms.surge.sh --token ${{ secrets.SURGE_TOKEN }}\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\nnpm-debug.log\n.parcel-cache\n.DS_Store\ndist\nyarn-error.log"
  },
  {
    "path": "README.md",
    "content": "# Parallax Examples\n\nA collection of examples in React using [`react-scroll-parallax`](https://github.com/jscottsmith/react-scroll-parallax).\n\n- [Documentation](https://react-scroll-parallax.damnthat.tv)\n- [GitHub](https://github.com/jscottsmith/react-scroll-parallax)\n- [NPM Package](https://www.npmjs.com/package/react-scroll-parallax)\n\n## Examples\n\n- [Example Site](https://react-scroll-parallax-examples.vercel.app/)\n- [Horizontal Scroll](https://react-scroll-parallax-horizontal-scroll.surge.sh/)\n- [Mountains](https://react-scroll-parallax-mountains.surge.sh/)\n- [Parallax Testing](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-test/)\n<!-- - TODO: work on perf [Spaceworms](https://react-scroll-parallax-space-worms.surge.sh/) -->\n"
  },
  {
    "path": "horizontal-scroll/README.md",
    "content": "# Parallax Example Site\n\nThe original example site using `react-scroll-parallax` upgraded to version 3.\n\n🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/)\n\n- Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax)\n- Now with better [documentation](https://react-scroll-parallax.damnthat.tv)\n- Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax)\n\n## Dev\n\nPacked with [parcel](https://parceljs.org/). Use `yarn start` to run locally.\n"
  },
  {
    "path": "horizontal-scroll/components/App/App.js",
    "content": "import React, { Component } from \"react\";\nimport { ParallaxProvider } from \"react-scroll-parallax\";\nimport { ParallaxExample } from \"../\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <ParallaxProvider scrollAxis=\"horizontal\">\n        <ParallaxExample />\n      </ParallaxProvider>\n    );\n  }\n}\n"
  },
  {
    "path": "horizontal-scroll/components/ParallaxExample/ParallaExample.module.scss",
    "content": "@import \"../../styles/colors\";\n\n.root {\n  position: relative;\n  background-color: black;\n  width: 300vw;\n}\n\n.artist {\n  position: fixed;\n  right: 10px;\n  bottom: 10px;\n  text-align: right;\n  color: rgb(190, 102, 87);\n  font-family: monospace;\n  z-index: 10;\n}\n\n.layer {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  background-size: auto 100%;\n  background-repeat: repeat-x;\n  height: 100vh;\n}\n"
  },
  {
    "path": "horizontal-scroll/components/ParallaxExample/ParallaxExample.js",
    "content": "import React, { useRef } from \"react\";\nimport { useParallax } from \"react-scroll-parallax\";\nimport imageBg from \"../../image/parallax-demon-woods-bg.png\";\nimport imageClose from \"../../image/parallax-demon-woods-close-trees.png\";\nimport imageMid from \"../../image/parallax-demon-woods-mid-trees.png\";\nimport imageFar from \"../../image/parallax-demon-woods-far-trees.png\";\n\nimport * as styles from \"./ParallaExample.module.scss\";\n\nexport default function ParallaxExample() {\n  const target = useRef(null);\n\n  const mid = useParallax({\n    speed: 50,\n    targetElement: target.current,\n  });\n  const close = useParallax({\n    speed: 100,\n    targetElement: target.current,\n  });\n\n  const midExtend = 50 * 5 * -1;\n  const closeExtend = 100 * 5 * -1;\n\n  return (\n    <div>\n      <a\n        target=\"_blank\"\n        href=\"https://aethrall.itch.io/\"\n        className={styles.artist}\n      >\n        Art by Aethrall\n      </a>\n      <div className={styles.root} ref={target}>\n        <div\n          style={{ backgroundImage: `url(${imageBg})`, left: 0, right: 0 }}\n          className={styles.layer}\n        />\n        <div\n          style={{\n            backgroundImage: `url(${imageFar})`,\n            left: 0,\n            right: 0,\n          }}\n          className={styles.layer}\n        />\n        <div\n          style={{\n            backgroundImage: `url(${imageMid})`,\n            left: midExtend,\n            right: midExtend,\n          }}\n          className={styles.layer}\n          ref={mid.ref}\n        />\n        <div\n          style={{\n            backgroundImage: `url(${imageClose})`,\n            left: closeExtend,\n            right: closeExtend,\n          }}\n          className={styles.layer}\n          ref={close.ref}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "horizontal-scroll/components/index.js",
    "content": "import ParallaxExample from \"./ParallaxExample/ParallaxExample\";\nimport App from \"./App/App\";\n\nexport { ParallaxExample, App };\n"
  },
  {
    "path": "horizontal-scroll/index.css",
    "content": ".star {\n  position: fixed;\n  top: 1em;\n  right: 1em;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n}\n"
  },
  {
    "path": "horizontal-scroll/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>React Scroll Parallax</title>\n\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta name=\"author\" content=\"J Scott Smith\" />\n    <meta\n      name=\"description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n\n    <!-- <meta property=\"og:image\" content=\"https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png\"> -->\n    <meta\n      property=\"og:description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n    <meta property=\"og:title\" content=\"React Scroll Parallax\" />\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:300,500,700i\"\n      rel=\"stylesheet\"\n    />\n    <link rel=\"stylesheet\" href=\"./index.css\" />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <div class=\"star\">\n      <a\n        class=\"github-button\"\n        href=\"https://github.com/jscottsmith/react-scroll-parallax\"\n        data-icon=\"octicon-star\"\n        aria-label=\"Star jscottsmith/react-scroll-parallax on GitHub\"\n        >Star</a\n      >\n    </div>\n    <script type=\"module\" src=\"/index.js\"></script>\n    <script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "horizontal-scroll/index.js",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./components/App/App\";\n\nconst root = document.getElementById(\"root\");\n\nReactDOM.render(<App />, root);\n"
  },
  {
    "path": "horizontal-scroll/package.json",
    "content": "{\n  \"name\": \"horizontal-scroll\",\n  \"version\": \"1.0.0\",\n  \"author\": \"J Scott Smith\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"yarn parcel index.html\",\n    \"build\": \"yarn parcel build index.html\"\n  },\n  \"devDependencies\": {\n    \"@parcel/transformer-inline-string\": \"^2.16.4\",\n    \"@parcel/transformer-sass\": \"^2.16.4\",\n    \"gh-pages\": \"^3.2.3\",\n    \"parcel\": \"^2.16.4\"\n  },\n  \"dependencies\": {\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-scroll-parallax\": \"4.0.0-beta.1\"\n  }\n}\n"
  },
  {
    "path": "horizontal-scroll/styles/colors.scss",
    "content": "$plum: #3d3547;\n$purple: #a179af;\n$tan: #edeaea;"
  },
  {
    "path": "mountains/README.md",
    "content": "# Parallax Example: Mountains\n"
  },
  {
    "path": "mountains/components/App/App.js",
    "content": "import React from \"react\";\nimport { ParallaxProvider } from \"react-scroll-parallax\";\nimport { ParallaxProvider, ParallaxBanner } from \"react-scroll-parallax\";\n\nimport bg1 from \"../../image/bg-1.jpg\";\nimport bg2 from \"../../image/bg-2.png\";\nimport bg3 from \"../../image/bg-3.png\";\nimport bg4 from \"../../image/bg-4.png\";\nimport bg5 from \"../../image/bg-5.png\";\n\nimport \"../../index.css\";\n\nexport default function App() {\n  return (\n    <main>\n      <ParallaxProvider>\n        <header>\n          <ParallaxBanner\n            className=\"banner\"\n            layers={[\n              {\n                image: bg1,\n                translateY: [0, 50],\n                shouldAlwaysCompleteAnimation: true,\n                expanded: false,\n              },\n              {\n                image: bg2,\n                translateY: [5, 45],\n\n                shouldAlwaysCompleteAnimation: true,\n                expanded: false,\n              },\n              {\n                image: bg3,\n                translateY: [10, 30],\n\n                shouldAlwaysCompleteAnimation: true,\n                expanded: false,\n              },\n              {\n                image: bg4,\n                translateY: [15, 25],\n\n                shouldAlwaysCompleteAnimation: true,\n                expanded: false,\n              },\n              {\n                image: bg5,\n                translateY: [20, 20],\n\n                shouldAlwaysCompleteAnimation: true,\n                expanded: false,\n              },\n            ]}\n          />\n        </header>\n      </ParallaxProvider>\n    </main>\n  );\n}\n"
  },
  {
    "path": "mountains/components/index.js",
    "content": "import ParallaxExample from \"./ParallaxExample/ParallaxExample\";\nimport App from \"./App/App\";\n\nexport { ParallaxExample, App };\n"
  },
  {
    "path": "mountains/index.css",
    "content": ".star {\n  position: fixed;\n  top: 1em;\n  right: 1em;\n  z-index: 999;\n}\n\nhtml,\nbody {\n  padding: 0;\n  margin: 0;\n  background: #40255b;\n}\n\nmain {\n  height: 300vh;\n}\n\np {\n  font-family: helvetica, sans-serif;\n  color: #eee;\n}\n\n.banner {\n  height: 100vh;\n  background: #bbe8f6;\n}\n"
  },
  {
    "path": "mountains/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Mountains | React Scroll Parallax</title>\n\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta name=\"author\" content=\"J Scott Smith\" />\n    <meta\n      name=\"description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n\n    <!-- <meta property=\"og:image\" content=\"https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png\"> -->\n    <meta\n      property=\"og:description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n    <meta property=\"og:title\" content=\"React Scroll Parallax\" />\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css\"\n    />\n    <link rel=\"stylesheet\" href=\"./index.css\" />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <div class=\"star\">\n      <a\n        class=\"github-button\"\n        href=\"https://github.com/jscottsmith/react-scroll-parallax\"\n        data-icon=\"octicon-star\"\n        aria-label=\"Star jscottsmith/react-scroll-parallax on GitHub\"\n        >Star</a\n      >\n    </div>\n    <script type=\"module\" src=\"/index.js\"></script>\n    <script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "mountains/index.js",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./components/App/App\";\n\nconst root = document.getElementById(\"root\");\n\nReactDOM.render(<App />, root);\n"
  },
  {
    "path": "mountains/package.json",
    "content": "{\n  \"name\": \"mountains\",\n  \"version\": \"1.0.0\",\n  \"author\": \"J Scott Smith\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"yarn parcel index.html\",\n    \"build\": \"yarn parcel build index.html\"\n  },\n  \"devDependencies\": {\n    \"@parcel/transformer-inline-string\": \"^2.16.4\",\n    \"@parcel/transformer-sass\": \"^2.16.4\",\n    \"gh-pages\": \"^3.2.3\",\n    \"parcel\": \"^2.16.4\"\n  },\n  \"dependencies\": {\n    \"classnames\": \"^2.3.1\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-scroll-parallax\": \"4.0.0-beta.1\"\n  }\n}\n"
  },
  {
    "path": "original/.nvmrc",
    "content": "20\n"
  },
  {
    "path": "original/.parcelrc",
    "content": "{\n  \"extends\": \"@parcel/config-default\",\n  \"optimizers\": {\n    \"*.svg\": []\n  }\n}\n"
  },
  {
    "path": "original/README.md",
    "content": "# Parallax Example Site\n\nThe original example site using `react-scroll-parallax` upgraded to version 3.\n\n🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/)\n\n- Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax)\n- Now with better [documentation](https://react-scroll-parallax.damnthat.tv)\n- Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax)\n\n## Dev\n\nPacked with [parcel](https://parceljs.org/). Use `yarn start` to run locally.\n"
  },
  {
    "path": "original/components/App/App.js",
    "content": "import React, { Component } from \"react\";\nimport { ParallaxProvider } from \"react-scroll-parallax\";\nimport { ParallaxExample } from \"../\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <ParallaxProvider>\n        <ParallaxExample />\n      </ParallaxProvider>\n    );\n  }\n}\n"
  },
  {
    "path": "original/components/Intro/Intro.js",
    "content": "import React from \"react\";\nimport { Parallax } from \"react-scroll-parallax\";\nimport * as style from \"./Intro.module.scss\";\nimport { Svg } from \"../\";\nimport ring from \"bundle-text:./ring-of-dots.svg\";\nimport hemispheres from \"bundle-text:./hemispheres.svg\";\n\nconst Intro = () => (\n  <div className={style.root}>\n    <div className={style.container}>\n      <Parallax translateY={[100, -100]} className={style.ring}>\n        <Svg svg={ring} />\n      </Parallax>\n      <Parallax translateY={[50, -50]} className={style.circle}>\n        <div className={style.parallaxInner}>\n          <div className={style.circleInner} />\n        </div>\n      </Parallax>\n      <Svg className={style.hemispheres} svg={hemispheres} />\n    </div>\n    <p className={style.scroll}>Scroll</p>\n  </div>\n);\n\nexport default Intro;\n"
  },
  {
    "path": "original/components/Intro/Intro.module.scss",
    "content": "@import \"../../styles/colors\";\n\n.root {\n  display: flex;\n  flex-flow: row wrap;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n}\n\n.scroll {\n  position: absolute;\n  bottom: 5em;\n  left: 50%;\n  transform: translateX(-50%);\n  color: $plum;\n  font-weight: 500;\n}\n\n.container {\n  position: relative;\n  width: 25em;\n}\n\n.ring {\n  position: relative;\n  z-index: 2;\n}\n\n.circle {\n  position: absolute;\n  top: 15%;\n  left: 15%;\n  width: 70%;\n  height: 70%;\n  z-index: 1;\n\n  .parallaxInner {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 3px solid $plum;\n    border-radius: 50%;\n  }\n}\n\n.circleInner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 3px solid $plum;\n  border-radius: 50%;\n}\n\n.hemispheres {\n  position: absolute;\n  top: 25%;\n  left: 25%;\n  width: 50%;\n}\n"
  },
  {
    "path": "original/components/IntroCopy/IntroCopy.js",
    "content": "import React from \"react\";\nimport * as style from \"./IntroCopy.module.scss\";\nimport { Parallax } from \"react-scroll-parallax\";\n\nconst copy = \"Parallax\".split(\"\");\n\nconst IntroCopy = () => (\n  <div className={style.root}>\n    <div className={style.barTop} />\n    <span className={`${style.copy} h1`}>\n      {copy.map((letter, i) => (\n        <Parallax\n          key={`copy-${i}`}\n          translateX={[0, 100 * (i - 3)]}\n          className={style.letter}\n        >\n          {letter}\n        </Parallax>\n      ))}\n    </span>\n    <div className={style.barBottom} />\n  </div>\n);\n\nexport default IntroCopy;\n"
  },
  {
    "path": "original/components/IntroCopy/IntroCopy.module.scss",
    "content": "@import \"../../styles/colors\";\n\n.root {\n  display: flex;\n  flex-flow: column wrap;\n  align-items: space-around;\n  justify-content: center;\n  align-items: center;\n  height: 50vh;\n}\n\n.copy {\n  margin: 0.2em 0;\n  text-align: center;\n}\n\n.barTop {\n  margin-left: 0.8em;\n  width: 20em;\n  height: 1.5em;\n  border-top: 0.45em solid $purple;\n  border-bottom: 0.45em solid $purple;\n  transform: skew(-10deg);\n}\n\n.barBottom {\n  width: 20em;\n  height: 1.5em;\n  border-top: 0.45em solid $purple;\n  border-bottom: 0.45em solid $purple;\n  transform: skew(-10deg);\n  margin-left: 0;\n  margin-right: 0.8em;\n}\n\n.letter {\n  display: inline-block;\n}\n"
  },
  {
    "path": "original/components/Marquee/Marquee.js",
    "content": "import React from \"react\";\nimport * as style from \"./Marquee.module.scss\";\nimport { Svg } from \"../\";\nimport { Parallax } from \"react-scroll-parallax\";\nimport boxBg from \"bundle-text:./box-bg.svg\";\nimport boxOutline from \"bundle-text:./box-outline.svg\";\nimport divider from \"bundle-text:../shared/divider.svg\";\n\nconst Marquee = () => (\n  <div className={style.root}>\n    <Svg svg={divider} className={style.divider} />\n    <div className={style.container}>\n      <Svg svg={boxBg} className={style.boxBg} />\n      <Parallax\n        className={style.text}\n        translateY={[-70, 70]}\n        translateX={[30, -30]}\n      >\n        <span className=\"h1\">Horizontal</span>\n      </Parallax>\n      <Parallax className={style.boxOutline} translateY={[-35, 35]}>\n        <Svg svg={boxOutline} />\n      </Parallax>\n    </div>\n  </div>\n);\n\nexport default Marquee;\n"
  },
  {
    "path": "original/components/Marquee/Marquee.module.scss",
    "content": "//\n// Marquee\n// ---------------------------\n\n@import \"../../styles/colors\";\n\n.root {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 50vh;\n  margin-bottom: 50vh;\n}\n\n.divider {\n  display: block;\n  width: 100%;\n  margin-top: 25vh;\n  margin-bottom: 25vh;\n}\n\n.container {\n  position: relative;\n  width: 40em;\n}\n\n.boxOutline {\n  position: absolute;\n  top: 20%;\n  right: 7%;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n\n.boxBg {\n  width: 100%;\n}\n\n.text {\n  position: absolute;\n  top: 28%;\n  left: 0;\n  width: 100%;\n  text-align: center;\n}\n"
  },
  {
    "path": "original/components/Overlap/Overlap.js",
    "content": "import React from \"react\";\nimport * as style from \"./Overlap.module.scss\";\nimport { Svg } from \"..\";\nimport { Parallax } from \"react-scroll-parallax\";\nimport circle from \"bundle-text:./circle.svg\";\nimport circleRings from \"bundle-text:./circle-rings.svg\";\n\nconst Overlap = () => (\n  <div className={style.root}>\n    <div className={style.container}>\n      <Parallax translateY={[-50, 50]} translateX={[-40, 20]}>\n        <Svg svg={circle} />\n      </Parallax>\n      <Parallax\n        translateY={[-50, 50]}\n        translateX={[40, -20]}\n        className={style.circleRings}\n      >\n        <Svg svg={circleRings} />\n      </Parallax>\n    </div>\n  </div>\n);\n\nexport default Overlap;\n"
  },
  {
    "path": "original/components/Overlap/Overlap.module.scss",
    "content": "@import \"../../styles/colors\";\n\n.root {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  align-items: space-around;\n  justify-content: center;\n  align-items: center;\n  padding-top: 25vh;\n  z-index: 1;\n}\n\n.container {\n  position: relative;\n  width: 30em;\n}\n\n.circleRings {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n"
  },
  {
    "path": "original/components/ParallaxExample/ParallaExample.module.scss",
    "content": "@import \"../../styles/colors\";\n\n.root {\n  background-color: $tan;\n}\n\n:global {\n  body {\n    margin: 0;\n    font-family: \"Roboto Mono\", san-serif;\n    color: $tan;\n    font-size: 12px;\n    font-weight: 300;\n  }\n\n  h1,\n  .h1 {\n    text-transform: uppercase;\n    font-size: 4em;\n    font-weight: 700;\n    font-style: italic;\n    letter-spacing: 0.3em;\n    color: $plum;\n  }\n\n  code {\n    display: inline-block;\n    margin: 0 0.4em 0 0;\n    font-family: \"Roboto Mono\", san-serif;\n    background-color: lighten($plum, 10%);\n    padding: 0.2em 0.4em;\n    border-radius: 3px;\n  }\n\n  p {\n    margin: 2em 0;\n    font-size: 1.2em;\n    line-height: 1.6;\n    color: darken($tan, 15%);\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a {\n    color: $tan;\n    text-decoration: none;\n    font-weight: bold;\n    &:hover {\n      color: $purple;\n    }\n  }\n\n  hr {\n    width: 100%;\n    height: 3em;\n    background-color: #fff;\n    border: none;\n  }\n\n  .btn {\n    display: inline-block;\n    border: 2px solid $purple;\n    padding: 0.6em 1em;\n    color: $purple;\n    font-weight: 500;\n    margin-right: 1em;\n\n    &:hover {\n      background-color: $purple;\n      color: $tan;\n    }\n  }\n\n  .visually-hidden {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 0;\n    width: 0;\n    overflow: hidden;\n  }\n}\n"
  },
  {
    "path": "original/components/ParallaxExample/ParallaxExample.js",
    "content": "import React, { Component } from \"react\";\nimport {\n  Intro,\n  IntroCopy,\n  Marquee,\n  TriangleGrid,\n  Overlap,\n  Svg,\n  ShapeField,\n} from \"../\";\n\nimport * as style from \"./ParallaExample.module.scss\";\n\nimport noisePattern from \"bundle-text:../shared/noise-pattern.svg\";\nimport dotPattern from \"bundle-text:../shared/dot-pattern.svg\";\n\nexport default class ParallaxExample extends Component {\n  render() {\n    return (\n      <div className={style.root}>\n        <Intro />\n        <IntroCopy />\n        <ShapeField />\n        <Marquee />\n        <Overlap />\n        <TriangleGrid />\n\n        {/** Shared SVG patterns */}\n        <div className=\"visually-hidden\">\n          <Svg svg={noisePattern} />\n          <Svg svg={dotPattern} />\n        </div>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "original/components/ShapeField/ShapeField.js",
    "content": "import React, { Component } from \"react\";\nimport { Parallax } from \"react-scroll-parallax\";\nimport { Svg } from \"../\";\n\nimport * as style from \"./ShapeField.module.scss\";\n\nimport cluster01HemiLeft from \"bundle-text:./cluster-01-hemi-left.svg\";\nimport cluster01HemiRight from \"bundle-text:./cluster-01-hemi-right.svg\";\nimport cluster01Rect from \"bundle-text:./cluster-01-rect.svg\";\n\nimport cluster02Hemi from \"bundle-text:./cluster-02-hemi.svg\";\nimport cluster02TriangleBig from \"bundle-text:./cluster-02-triangle-big.svg\";\nimport cluster02TriangleSmall from \"bundle-text:./cluster-02-triangle-small.svg\";\n\nimport cluster03TriangleTop from \"bundle-text:./cluster-03-triangle-top.svg\";\nimport cluster03TriangleBottom from \"bundle-text:./cluster-03-triangle-bottom.svg\";\nimport cluster03TriangleBig from \"bundle-text:./cluster-03-triangle-big.svg\";\n\nimport cluster04Triangle from \"bundle-text:./cluster-04-triangle.svg\";\nimport cluster04Square from \"bundle-text:./cluster-04-square.svg\";\nimport cluster04HemiRight from \"bundle-text:./cluster-04-hemi-right.svg\";\n\nexport default class ShapeField extends Component {\n  render() {\n    return (\n      <div className={style.root}>\n        <div className={style.shapeCluster01}>\n          <Parallax translateY={[100, -100]} className={style.hemiLeft}>\n            <Svg svg={cluster01HemiLeft} />\n          </Parallax>\n          <Svg svg={cluster01Rect} />\n          <Parallax translateY={[-100, 100]} className={style.hemiRight}>\n            <Svg svg={cluster01HemiRight} />\n          </Parallax>\n        </div>\n\n        <div className={style.shapeCluster02}>\n          <Svg svg={cluster02Hemi} className={style.hemi} />\n          <Parallax translateY={[-30, 30]} className={style.triangleBig}>\n            <Svg svg={cluster02TriangleBig} />\n          </Parallax>\n          <Parallax translateY={[30, -30]} className={style.triangleSmall}>\n            <Svg svg={cluster02TriangleSmall} />\n          </Parallax>\n        </div>\n\n        <div className={style.shapeCluster03}>\n          <Parallax translateY={[60, -20]} className={style.triangleTop}>\n            <Svg svg={cluster03TriangleTop} />\n          </Parallax>\n\n          <Svg svg={cluster03TriangleBottom} className={style.triangleTop} />\n          <Parallax translateY={[-60, 60]} className={style.triangleBig}>\n            <Svg svg={cluster03TriangleBig} />\n          </Parallax>\n        </div>\n\n        <div className={style.shapeCluster04}>\n          <Svg svg={cluster04Square} className={style.square} />\n          <Parallax translateY={[-60, 60]} className={style.triangle}>\n            <Svg svg={cluster04Triangle} />\n          </Parallax>\n          <Parallax translateY={[-30, 30]} className={style.hemiRight}>\n            <Svg svg={cluster04HemiRight} />\n          </Parallax>\n        </div>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "original/components/ShapeField/ShapeField.module.scss",
    "content": "@import \"../../styles/colors\";\n\n.root {\n  position: relative;\n  margin-top: 25vh;\n  height: 75vh;\n}\n\n.shapeCluster01 {\n  position: absolute;\n  top: 0%;\n  left: 40%;\n  width: 8em;\n\n  .hemiLeft {\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 50%;\n  }\n\n  .hemiRight {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 50%;\n  }\n}\n\n.shapeCluster02 {\n  position: absolute;\n  left: 5%;\n  top: 25%;\n  width: 18em;\n  height: 30em;\n\n  .triangleBig {\n    position: absolute;\n    left: 0;\n    top: 20%;\n    width: 60%;\n  }\n\n  .triangleSmall {\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 60%;\n  }\n\n  .hemi {\n    position: absolute;\n    right: 0;\n    bottom: 30%;\n    width: 40%;\n  }\n}\n\n.shapeCluster03 {\n  position: absolute;\n  top: 90%;\n  left: 45%;\n  width: 17em;\n  height: 10em;\n\n  .triangleTop {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n  }\n  .triangleBottom {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n  }\n  .triangleBig {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 80%;\n  }\n}\n\n.shapeCluster04 {\n  position: absolute;\n  top: 25%;\n  right: 5%;\n  width: 16em;\n\n  .triangle {\n    position: absolute;\n    width: 66.666%;\n    top: 0;\n    left: 0;\n  }\n  .square {\n    position: absolute;\n    width: 66.666%;\n    right: 0;\n    top: 0;\n  }\n  .hemiRight {\n    position: absolute;\n    width: 33.333%;\n    right: 0;\n    top: 0;\n  }\n}\n"
  },
  {
    "path": "original/components/Svg/Svg.js",
    "content": "import React from \"react\";\n\nimport * as style from \"./Svg.module.scss\";\n\nexport default function Svg(props) {\n  const Element = props.el;\n  const className =\n    `svg-container ${style.root}` +\n    (props.className ? ` ${props.className}` : \"\");\n\n  return (\n    <Element\n      style={props.style}\n      className={className}\n      dangerouslySetInnerHTML={{ __html: props.svg }}\n    />\n  );\n}\n\nSvg.defaultProps = {\n  el: \"span\",\n};\n"
  },
  {
    "path": "original/components/Svg/Svg.module.scss",
    "content": ".root {\n  display: block;\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n}\n"
  },
  {
    "path": "original/components/TriangleGrid/TriangleGrid.js",
    "content": "import React from \"react\";\nimport * as style from \"./TriangleGrid.module.scss\";\nimport { Svg } from \"..\";\nimport { Parallax } from \"react-scroll-parallax\";\nimport gridPurple from \"bundle-text:./grid-purple.svg\";\nimport gridWhite from \"bundle-text:./grid-white.svg\";\nimport angleTop from \"bundle-text:../shared/angle-dark-top.svg\";\n\nconst TriangleGrid = () => (\n  <main className={style.root}>\n    <Svg svg={angleTop} className={style.angleTop} />\n    <article className={style.copy}>\n      <h1 className={style.headline}>React Scroll Parallax</h1>\n      <p>\n        React hooks and components to create parallax scroll effects for\n        banners, images or any other DOM elements.\n      </p>\n      <p>\n        Utilizes{\" \"}\n        <a href=\"https://parallax-controller.damnthat.tv/\">\n          Parallax Controller\n        </a>{\" \"}\n        to add vertical or horizontal scrolling based effects to elements.{\" \"}\n      </p>\n      <p>\n        <a href=\"https://parallax-controller.damnthat.tv/docs/performance\">\n          Optimized\n        </a>{\" \"}\n        to reduce jank on scroll and works with SSR and SSG rendered React apps.\n      </p>\n      <p>\n        <code>yarn add react-scroll-parallax</code>\n        <code>npm i react-scroll-parallax</code>\n      </p>\n      <p>\n        <a className=\"btn\" href=\"https://react-scroll-parallax.damnthat.tv/\">\n          Documentation\n        </a>\n        <a\n          className=\"btn\"\n          href=\"https://github.com/jscottsmith/react-scroll-parallax\"\n        >\n          GitHub\n        </a>\n        <a\n          className=\"btn\"\n          href=\"https://www.npmjs.com/package/react-scroll-parallax\"\n        >\n          View on NPM\n        </a>\n      </p>\n    </article>\n    <div className={style.container}>\n      <Parallax translateY={[-25, 25]}>\n        <Svg svg={gridPurple} className={style.trianglesPurple} />\n      </Parallax>\n      <Parallax translateX={[-13, 13]} translateY={[-50, 50]}>\n        <Svg svg={gridWhite} />\n      </Parallax>\n    </div>\n  </main>\n);\n\nexport default TriangleGrid;\n"
  },
  {
    "path": "original/components/TriangleGrid/TriangleGrid.module.scss",
    "content": "@import \"../../styles/colors\";\n\n.root {\n  position: relative;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 25vh 2em;\n  background-color: $plum;\n}\n\n.container {\n  position: relative;\n  width: 25em;\n  margin-right: 10vw;\n  flex-shrink: 0;\n}\n\n.angleTop {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n}\n\n.headline {\n  font-size: 2em;\n  color: $purple;\n}\n\n.copy {\n  margin: 0 auto;\n  flex-grow: 1;\n  text-align: left;\n  max-width: 500px;\n\n  code {\n    padding: 0.4em 1em;\n    font-size: 0.8em;\n    color: white;\n  }\n}\n\n.trianglesPurple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n"
  },
  {
    "path": "original/components/index.js",
    "content": "import Intro from \"./Intro/Intro\";\nimport IntroCopy from \"./IntroCopy/IntroCopy\";\nimport Marquee from \"./Marquee/Marquee\";\nimport ParallaxExample from \"./ParallaxExample/ParallaxExample\";\nimport Svg from \"./Svg/Svg\";\nimport ShapeField from \"./ShapeField/ShapeField\";\nimport Overlap from \"./Overlap/Overlap\";\nimport TriangleGrid from \"./TriangleGrid/TriangleGrid\";\nimport App from \"./App/App\";\n\nexport {\n  Intro,\n  IntroCopy,\n  Marquee,\n  ParallaxExample,\n  Svg,\n  ShapeField,\n  Overlap,\n  TriangleGrid,\n  App,\n};\n"
  },
  {
    "path": "original/index.css",
    "content": ".star {\n  position: fixed;\n  top: 1em;\n  right: 1em;\n}\n"
  },
  {
    "path": "original/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>React Scroll Parallax</title>\n\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta name=\"author\" content=\"J Scott Smith\" />\n    <meta\n      name=\"description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n\n    <!-- <meta property=\"og:image\" content=\"https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png\"> -->\n    <meta\n      property=\"og:description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n    <meta property=\"og:title\" content=\"React Scroll Parallax\" />\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:300,500,700i\"\n      rel=\"stylesheet\"\n    />\n    <link rel=\"stylesheet\" href=\"./index.css\" />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <div class=\"star\">\n      <a\n        class=\"github-button\"\n        href=\"https://github.com/jscottsmith/react-scroll-parallax\"\n        data-icon=\"octicon-star\"\n        aria-label=\"Star jscottsmith/react-scroll-parallax on GitHub\"\n        >Star</a\n      >\n    </div>\n    <script type=\"module\" src=\"/index.js\"></script>\n    <script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "original/index.js",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./components/App/App\";\n\nconst root = document.getElementById(\"root\");\n\nReactDOM.render(<App />, root);\n"
  },
  {
    "path": "original/package.json",
    "content": "{\n  \"name\": \"parallax-example\",\n  \"version\": \"1.0.0\",\n  \"author\": \"J Scott Smith\",\n  \"license\": \"MIT\",\n  \"engines\": {\n    \"node\": \"20.x\"\n  },\n  \"scripts\": {\n    \"start\": \"yarn parcel index.html\",\n    \"build\": \"yarn parcel build index.html\",\n    \"deploy\": \"gh-pages -d dist\"\n  },\n  \"devDependencies\": {\n    \"@parcel/transformer-inline-string\": \"^2.12.0\",\n    \"@parcel/transformer-sass\": \"^2.12.0\",\n    \"gh-pages\": \"^3.2.3\",\n    \"parcel\": \"^2.12.0\",\n    \"postcss\": \"^8.2.1\",\n    \"postcss-modules\": \"^6.0.0\"\n  },\n  \"dependencies\": {\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-scroll-parallax\": \"4.0.0-beta.1\"\n  },\n  \"targets\": {\n    \"default\": {\n      \"context\": \"browser\",\n      \"outputFormat\": \"global\",\n      \"includeNodeModules\": true\n    }\n  }\n}\n"
  },
  {
    "path": "original/styles/colors.scss",
    "content": "$plum: #3d3547;\n$purple: #a179af;\n$tan: #edeaea;"
  },
  {
    "path": "original/svgo.config.js",
    "content": "/**\n * Parcel's @parcel/optimizer-svg runs SVGO on *.svg in production.\n * Pattern-library SVGs only expose ids (e.g. url(#noise-pattern)); SVGO treats\n * unreferenced defs as removable, which strips the whole pattern.\n *\n * @type {import('svgo').Config}\n */\nmodule.exports = {\n  plugins: [\n    {\n      name: \"preset-default\",\n      params: {\n        overrides: {\n          // Keep <defs>/<pattern> used only from external CSS / other SVGs.\n          removeUselessDefs: false,\n        },\n      },\n    },\n  ],\n};\n"
  },
  {
    "path": "original/vercel.json",
    "content": "{\n  \"buildCommand\": \"yarn build\",\n  \"outputDirectory\": \"dist\",\n  \"installCommand\": \"yarn install --frozen-lockfile\",\n  \"build\": {\n    \"env\": {\n      \"PARCEL_AUTOINSTALL\": \"0\"\n    }\n  }\n}\n"
  },
  {
    "path": "space-worms/README.md",
    "content": "# Parallax Example Site\n\nThe original example site using `react-scroll-parallax` upgraded to version 3.\n\n🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/)\n\n- Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax)\n- Now with better [documentation](https://react-scroll-parallax.damnthat.tv)\n- Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax)\n\n## Dev\n\nPacked with [parcel](https://parceljs.org/). Use `yarn start` to run locally.\n"
  },
  {
    "path": "space-worms/components/App/App.js",
    "content": "import React, { Component } from \"react\";\nimport { ParallaxProvider } from \"react-scroll-parallax\";\nimport { ParallaxExample } from \"../\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <ParallaxProvider>\n        <main\n          style={{\n            overflow: \"hidden\",\n            background: \"#1f1f1f\",\n          }}\n        >\n          <ParallaxExample />\n          <ParallaxExample />\n          <ParallaxExample />\n          <ParallaxExample />\n        </main>\n      </ParallaxProvider>\n    );\n  }\n}\n"
  },
  {
    "path": "space-worms/components/ParallaxExample/ParallaExample.module.scss",
    "content": ".root {\n  position: relative;\n  height: 200vh;\n}\n\n.artist {\n  position: fixed;\n  right: 10px;\n  bottom: 10px;\n  text-align: right;\n  color: rgb(77, 103, 114);\n  font-family: monospace;\n  z-index: 100;\n\n  a {\n    color: rgb(67, 99, 187);\n  }\n}\n\n.layer {\n  position: absolute;\n  width: 120vw;\n  height: auto;\n}\n\n.layer1 {\n  top: 25%;\n  left: -40%;\n  z-index: 0;\n}\n.layer2 {\n  top: -40%;\n  left: 0%;\n  z-index: 1;\n}\n.layer3 {\n  top: -30%;\n  left: 15%;\n  z-index: 2;\n}\n.layer4 {\n  top: -5%;\n  left: -25%;\n  z-index: 3;\n}\n.layer5 {\n  top: -30%;\n  left: -30%;\n  z-index: 4;\n}\n.layer6 {\n  top: 20%;\n  left: 20%;\n  z-index: 5;\n}\n"
  },
  {
    "path": "space-worms/components/ParallaxExample/ParallaxExample.js",
    "content": "import React, { useRef } from \"react\";\nimport { useParallax } from \"react-scroll-parallax\";\nimport cx from \"classnames\";\nimport { Spaceworms } from \"../Spaceworms\";\n\nimport worm1 from \"../../image/worm-1.png\";\nimport worm2 from \"../../image/worm-2.png\";\nimport worm3 from \"../../image/worm-3.png\";\nimport worm4 from \"../../image/worm-4.png\";\nimport worm5 from \"../../image/worm-5.png\";\nimport worm6 from \"../../image/worm-6.png\";\n\nimport * as styles from \"./ParallaExample.module.scss\";\n\nexport default function ParallaxExample() {\n  const target = useRef();\n\n  const parallax1 = useParallax({\n    speed: -40,\n    rotate: [-30, 30],\n  });\n  const parallax2 = useParallax({\n    speed: -20,\n    rotate: [-30, 50],\n  });\n  const parallax3 = useParallax({\n    speed: 10,\n    rotate: [-60, 0],\n  });\n  const parallax4 = useParallax({\n    speed: 20,\n    rotate: [-30, 50],\n  });\n  const parallax5 = useParallax({\n    speed: 40,\n    rotate: [-30, 30],\n  });\n  const parallax6 = useParallax({\n    speed: 60,\n    rotate: [-30, 50],\n  });\n\n  return (\n    <div>\n      <p className={styles.artist}>\n        Art adapted from{\" \"}\n        <a\n          href=\"https://www.figma.com/community/file/1066061995156177203\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n        >\n          Spaceworms\n        </a>{\" \"}\n        by{\" \"}\n        <a\n          href=\"http://www.fonsmans.com\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n        >\n          Fons Mans\n        </a>\n      </p>\n      <div className={styles.root} ref={target}>\n        <div\n          style={{\n            display: \"flex\",\n            flexFlow: \"column\",\n            justifyContent: \"space-around\",\n            position: \"absolute\",\n            textAlign: \"center\",\n            inset: 0,\n          }}\n        >\n          <Spaceworms zIndex=\"1\" />\n          <Spaceworms zIndex=\"2\" />\n          <Spaceworms zIndex=\"4\" />\n          <Spaceworms zIndex=\"3\" />\n          <Spaceworms zIndex=\"5\" />\n        </div>\n        <img\n          src={worm1}\n          className={cx(styles.layer, styles.layer1)}\n          ref={parallax1.ref}\n          onLoad={() => parallax1.controller.update()}\n          draggable={false}\n        />\n        <img\n          src={worm2}\n          className={cx(styles.layer, styles.layer2)}\n          ref={parallax2.ref}\n          onLoad={() => parallax2.controller.update()}\n          draggable={false}\n        />\n        <img\n          src={worm3}\n          className={cx(styles.layer, styles.layer3)}\n          ref={parallax3.ref}\n          onLoad={() => parallax3.controller.update()}\n          draggable={false}\n        />\n        <img\n          src={worm4}\n          className={cx(styles.layer, styles.layer4)}\n          ref={parallax4.ref}\n          onLoad={() => parallax4.controller.update()}\n          draggable={false}\n        />\n        <img\n          src={worm5}\n          className={cx(styles.layer, styles.layer5)}\n          ref={parallax5.ref}\n          onLoad={() => parallax5.controller.update()}\n          draggable={false}\n        />\n        <img\n          src={worm6}\n          className={cx(styles.layer, styles.layer6)}\n          ref={parallax6.ref}\n          onLoad={() => parallax6.controller.update()}\n          draggable={false}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "space-worms/components/Spaceworms/index.jsx",
    "content": "import React from \"react\";\nimport { useParallax } from \"react-scroll-parallax\";\nimport * as styles from \"./index.module.scss\";\n\nexport const Spaceworms = (props) => {\n  const text = useParallax({\n    translateX: [10, -50],\n  });\n  return (\n    <div\n      className={styles.text}\n      style={{\n        zIndex: props.zIndex,\n      }}\n    >\n      <div ref={text.ref}>SPACEWORMS</div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "space-worms/components/Spaceworms/index.module.scss",
    "content": ".text {\n  position: relative;\n  color: white;\n  font-weight: 900;\n  font-family: \"futura-pt\", futura, sans-serif;\n  font-size: 25vw;\n  line-height: 0.7;\n  white-space: nowrap;\n}\n"
  },
  {
    "path": "space-worms/components/index.js",
    "content": "import ParallaxExample from \"./ParallaxExample/ParallaxExample\";\nimport App from \"./App/App\";\n\nexport { ParallaxExample, App };\n"
  },
  {
    "path": "space-worms/index.css",
    "content": ".star {\n  position: fixed;\n  top: 1em;\n  right: 1em;\n  z-index: 999;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n}\n"
  },
  {
    "path": "space-worms/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Spaceworms | React Scroll Parallax</title>\n\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta name=\"author\" content=\"J Scott Smith\" />\n    <meta\n      name=\"description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n\n    <!-- <meta property=\"og:image\" content=\"https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png\"> -->\n    <meta\n      property=\"og:description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n    <meta property=\"og:title\" content=\"React Scroll Parallax\" />\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css\"\n    />\n\n    <link rel=\"stylesheet\" href=\"https://use.typekit.net/bwo5nqc.css\" />\n    <link rel=\"stylesheet\" href=\"./index.css\" />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <div class=\"star\">\n      <a\n        class=\"github-button\"\n        href=\"https://github.com/jscottsmith/react-scroll-parallax\"\n        data-icon=\"octicon-star\"\n        aria-label=\"Star jscottsmith/react-scroll-parallax on GitHub\"\n        >Star</a\n      >\n    </div>\n    <script type=\"module\" src=\"/index.js\"></script>\n    <script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "space-worms/index.js",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./components/App/App\";\n\nconst root = document.getElementById(\"root\");\n\nReactDOM.render(<App />, root);\n"
  },
  {
    "path": "space-worms/package.json",
    "content": "{\n  \"name\": \"space-worms\",\n  \"version\": \"1.0.0\",\n  \"author\": \"J Scott Smith\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"yarn parcel index.html\",\n    \"build\": \"yarn parcel build index.html\"\n  },\n  \"devDependencies\": {\n    \"@parcel/transformer-inline-string\": \"^2.16.4\",\n    \"@parcel/transformer-sass\": \"^2.16.4\",\n    \"gh-pages\": \"^3.2.3\",\n    \"parcel\": \"^2.16.4\"\n  },\n  \"dependencies\": {\n    \"classnames\": \"^2.3.1\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-scroll-parallax\": \"4.0.0-beta.1\"\n  }\n}\n"
  },
  {
    "path": "test-offsets/README.md",
    "content": "# Parallax Example Site\n\nThe original example site using `react-scroll-parallax` upgraded to version 3.\n\n🔗 [View Site](https://jscottsmith.github.io/react-scroll-parallax-examples/examples/parallax-example/dist/)\n\n- Made with [react-scroll-parallax v3](https://github.com/jscottsmith/react-scroll-parallax)\n- Now with better [documentation](https://react-scroll-parallax.damnthat.tv)\n- Check it out [on NPM](https://www.npmjs.com/package/react-scroll-parallax)\n\n## Dev\n\nPacked with [parcel](https://parceljs.org/). Use `yarn start` to run locally.\n"
  },
  {
    "path": "test-offsets/components/App/App.js",
    "content": "import React, { Component } from \"react\";\nimport { ParallaxProvider } from \"react-scroll-parallax\";\nimport { ParallaxTest } from \"../\";\n\nexport class App extends Component {\n  render() {\n    return (\n      <ParallaxProvider>\n        <ParallaxTest />\n      </ParallaxProvider>\n    );\n  }\n}\n"
  },
  {
    "path": "test-offsets/components/ParallaxTest/ParallaxTest.js",
    "content": "import React from \"react\";\nimport { Parallax } from \"react-scroll-parallax\";\nimport * as style from \"./ParallaxTest.module.scss\";\n\nconst INC_AMOUNT = 10;\nconst START_NUM_ELEMENTS = 10;\n\nexport class ParallaxTest extends React.Component {\n  state = {\n    elements: new Array(START_NUM_ELEMENTS).fill(null).map((x, i) => i),\n    offsetY: INC_AMOUNT,\n    slowerScrollRate: false,\n    unitPercent: false,\n    disabled: false,\n  };\n\n  handleAdd = () => {\n    const elements = [...this.state.elements, this.state.elements.length];\n    this.setState({\n      elements,\n    });\n  };\n\n  handleRemove = () => {\n    const elements = this.state.elements.slice(\n      0,\n      this.state.elements.length - 1\n    );\n    this.setState({\n      elements,\n    });\n  };\n\n  increaseOffsetY = () => {\n    const offsetY = this.state.offsetY + INC_AMOUNT;\n    this.setState({\n      offsetY,\n    });\n  };\n\n  decreaseOffsetY = () => {\n    const offsetY =\n      this.state.offsetY - INC_AMOUNT < 0 ? 0 : this.state.offsetY - INC_AMOUNT;\n    this.setState({\n      offsetY,\n    });\n  };\n\n  toggleSpeed = () => {\n    const slowerScrollRate = !this.state.slowerScrollRate;\n    this.setState({\n      slowerScrollRate,\n    });\n  };\n\n  toggleValue = () => {\n    const unitPercent = !this.state.unitPercent;\n    this.setState({\n      unitPercent,\n    });\n  };\n\n  toggleDisabled = () => {\n    const disabled = !this.state.disabled;\n    this.setState({\n      disabled,\n    });\n  };\n\n  mapToParallax() {\n    const offsetY = this.state.offsetY;\n    const slowerScrollRate = this.state.slowerScrollRate;\n\n    return this.state.elements.map((number, i) => {\n      const unit = this.state.unitPercent ? \"%\" : \"px\";\n\n      const a = offsetY * -1 * i + unit;\n      const b = offsetY * i + unit;\n\n      const translateY = slowerScrollRate ? [a, b] : [b, a];\n\n      return (\n        <span className={`${style.item} parallax-outer`}>\n          <Parallax\n            key={i}\n            disabled={this.state.disabled}\n            translateY={translateY}\n            className=\"parallax-inner\"\n          >\n            {number}\n          </Parallax>\n        </span>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <div className={style.parallaxTest}>\n        <h1 className={style.h1}>{this.mapToParallax()}</h1>\n        <div className={style.buttons}>\n          <div className={style.currentState}>\n            <h4>\n              Parallax Elements:\n              <span className={style.value}>{this.state.elements.length}</span>\n            </h4>\n            <button onClick={this.handleAdd}>Add</button>\n            <button onClick={this.handleRemove}>Remove</button>\n          </div>\n          <div className={style.currentState}>\n            <h4>\n              Y Offsets:\n              <span className={style.value}>\n                {this.state.offsetY}\n                {this.state.unitPercent ? \"%\" : \"px\"}\n              </span>\n            </h4>\n            <button onClick={this.increaseOffsetY}>Increase</button>\n            <button onClick={this.decreaseOffsetY}>Decrease</button>\n          </div>\n          <div className={style.currentState}>\n            <h4>\n              translatY:\n              <span className={style.value}>\n                {this.state.slowerScrollRate\n                  ? `[-${this.state.offsetY}${\n                      this.state.unitPercent ? \"%\" : \"px\"\n                    }, ${this.state.offsetY}${\n                      this.state.unitPercent ? \"%\" : \"px\"\n                    }]`\n                  : `[${this.state.offsetY}${\n                      this.state.unitPercent ? \"%\" : \"px\"\n                    }, -${this.state.offsetY}${\n                      this.state.unitPercent ? \"%\" : \"px\"\n                    }]`}\n                {/* {this.state.slowerScrollRate ? \"Slower\" : \"Faster\"} */}\n              </span>\n            </h4>\n            <button onClick={this.toggleSpeed}>\n              {this.state.slowerScrollRate ? \"Faster\" : \"Slower\"}\n            </button>\n          </div>\n          <div className={style.currentState}>\n            <h4>\n              Unit:\n              <span className={style.value}>\n                {this.state.unitPercent ? \"Percent\" : \"Pixels\"}\n              </span>\n            </h4>\n            <button onClick={this.toggleValue}>\n              {this.state.unitPercent ? \"Pixels\" : \"Percent\"}\n            </button>\n          </div>\n          <div className={style.currentState}>\n            <h4>\n              Disabled:\n              <span className={style.value}>\n                {this.state.disabled ? \"True\" : \"False\"}\n              </span>\n            </h4>\n            <button onClick={this.toggleDisabled}>\n              {this.state.disabled ? \"Enable\" : \"Disable\"}\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "test-offsets/components/ParallaxTest/ParallaxTest.module.scss",
    "content": ".parallaxTest {\n  margin: 100vh 0;\n  display: flex;\n  flex-flow: row wrap;\n  align-items: center;\n}\n\n.h1 {\n  width: 100%;\n  font-size: 9vw;\n  text-align: center;\n}\n\n.item {\n  display: inline-block;\n}\n\n.buttons {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding: 1em;\n}\n\n.currentState {\n  margin-bottom: 1em;\n\n  .value {\n    margin: 0 0.5em;\n    color: lightgreen;\n  }\n\n  button {\n    background-color: lightblue;\n    border-radius: 3px;\n    border: none;\n    cursor: pointer;\n    font-family: \"Roboto Mono\", monospace;\n    font-size: 12px;\n    font-weight: bold;\n    margin: 0.2em;\n    max-width: 10em;\n    padding: 0.2em 1em;\n\n    &:hover {\n      color: #222;\n      background-color: lightgreen;\n    }\n  }\n}\n\n:global {\n  body {\n    background-color: #222;\n    background-image: linear-gradient(\n        0deg,\n        transparent 24%,\n        #333 25%,\n        #333 26%,\n        transparent 27%,\n        transparent 74%,\n        #333 75%,\n        #333 76%,\n        transparent 77%,\n        transparent\n      ),\n      linear-gradient(\n        90deg,\n        transparent 24%,\n        #333 25%,\n        #333 26%,\n        transparent 27%,\n        transparent 74%,\n        #333 75%,\n        #333 76%,\n        transparent 77%,\n        transparent\n      );\n\n    background-size: 50px 50px;\n    color: #342a45;\n    font-size: 12px;\n    font-family: \"Roboto Mono\", monsopace;\n    font-style: normal;\n    color: #eee;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .parallax-outer {\n    position: relative;\n  }\n\n  .parallax-inner {\n    position: relative;\n    // background-color: rgba(255, 0, 0, 0.3);\n  }\n\n  // .is-in-view .parallax-inner {\n  //     background-color: rgba(0, 255, 0, 0.3);\n  // }\n\n  .parallax-outer::after,\n  .parallax-inner::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid lightgreen;\n  }\n\n  .parallax-outer::after {\n    border: 2px solid orangered;\n    z-index: -1;\n  }\n}\n"
  },
  {
    "path": "test-offsets/components/index.js",
    "content": "export { ParallaxTest } from \"./ParallaxTest/ParallaxTest.js\";\nexport { App } from \"./App/App.js\";\n"
  },
  {
    "path": "test-offsets/index.css",
    "content": ".star {\n  position: fixed;\n  top: 1em;\n  right: 1em;\n}\n"
  },
  {
    "path": "test-offsets/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>React Scroll Parallax</title>\n\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <meta name=\"author\" content=\"J Scott Smith\" />\n    <meta\n      name=\"description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n    <meta\n      property=\"og:description\"\n      content=\"React components to create parallax scroll effects for banners, images or any other DOM elements.\"\n    />\n    <meta property=\"og:title\" content=\"React Scroll Parallax\" />\n\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:300,500,700i\"\n      rel=\"stylesheet\"\n    />\n    <link rel=\"stylesheet\" href=\"./index.css\" />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <div class=\"star\">\n      <a\n        class=\"github-button\"\n        href=\"https://github.com/jscottsmith/react-scroll-parallax\"\n        data-icon=\"octicon-star\"\n        aria-label=\"Star jscottsmith/react-scroll-parallax on GitHub\"\n        >Star</a\n      >\n    </div>\n    <script type=\"module\" src=\"/index.js\"></script>\n    <script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "test-offsets/index.js",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { App } from \"./components\";\n\nconst root = document.getElementById(\"root\");\n\nReactDOM.render(<App />, root);\n"
  },
  {
    "path": "test-offsets/package.json",
    "content": "{\n  \"name\": \"parallax-example\",\n  \"version\": \"1.0.0\",\n  \"author\": \"J Scott Smith\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"yarn parcel index.html\",\n    \"build\": \"yarn parcel build index.html\",\n    \"deploy\": \"gh-pages -d dist\"\n  },\n  \"devDependencies\": {\n    \"@parcel/transformer-inline-string\": \"^2.2.1\",\n    \"@parcel/transformer-sass\": \"^2.2.1\",\n    \"gh-pages\": \"^3.2.3\",\n    \"parcel\": \"^2.2.1\"\n  },\n  \"dependencies\": {\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-scroll-parallax\": \"4.0.0-beta.1\"\n  }\n}\n"
  }
]