Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
    <div class="header-animation-container">
      <div id="propjockeyDOMinionM"><div id="pjdMAR"><div id="pjdMC"><div id="pjdMZ"><div id="pjdMCR"><div id="pjdMGP">
        <div id="pjd1"><div id="pjd2"></div><div id="pjd3"></div><div id="pjd4"></div><div id="pjd5"></div><div id="pjd6"></div><div id="pjd7"></div></div><div id="pjd8"><div id="pjd9"></div><div id="pjda"></div><div id="pjdb"></div><div id="pjdc"></div><div id="pjdd"></div><div id="pjde"></div><div id="pjdf"></div><div id="pjdg"></div><div id="pjdh"></div><div id="pjdi"></div><div id="pjdj"></div><div id="pjdk"></div><div id="pjdl"></div><div id="pjdm"></div><div id="pjdn"></div><div id="pjdo"></div><div id="pjdp"></div><div id="pjdq"></div></div><div id="pjdr"><div id="pjds"></div><div id="pjdt"></div><div id="pjdu"></div><div id="pjdv"></div><div id="pjdw"></div><div id="pjdx"></div><div id="pjdy"></div><div id="pjdz"></div><div id="pjd10"></div><div id="pjd11"></div><div id="pjd12"></div><div id="pjd13"></div><div id="pjd14"></div><div id="pjd15"></div><div id="pjd16"></div><div id="pjd17"></div><div id="pjd18"></div><div id="pjd19"></div></div><div id="pjd1a"></div><div id="pjd1b"></div><div id="pjd1c"></div><div id="pjd1d"></div><div id="pjd1e"></div><div id="pjd1f"></div><div id="pjd1g"><div id="pjd1h"></div><div id="pjd1i"></div><div id="pjd1j"></div><div id="pjd1k"></div><div id="pjd1l"></div><div id="pjd1m"></div><div id="pjd1n"></div><div id="pjd1o"></div><div id="pjd1p"></div><div id="pjd1q"></div><div id="pjd1r"></div></div><div id="pjd1s"><div id="pjd1t"></div><div id="pjd1u"></div><div id="pjd1v"></div><div id="pjd1w"></div><div id="pjd1x"></div><div id="pjd1y"></div><div id="pjd1z"></div><div id="pjd20"></div><div id="pjd21"></div><div id="pjd22"></div><div id="pjd23"></div></div><div id="pjd24"><div id="pjd25"></div><div id="pjd26"></div><div id="pjd27"></div><div id="pjd28"></div><div id="pjd29"></div><div id="pjd2a"></div><div id="pjd2b"></div><div id="pjd2c"></div><div id="pjd2d"></div><div id="pjd2e"></div><div id="pjd2f"></div><div id="pjd2g"></div><div id="pjd2h"></div><div id="pjd2i"></div></div><div id="pjd2j"><div id="pjd2k"></div><div id="pjd2l"></div><div id="pjd2m"></div><div id="pjd2n"></div><div id="pjd2o"></div><div id="pjd2p"></div><div id="pjd2q"></div><div id="pjd2r"></div><div id="pjd2s"></div><div id="pjd2t"></div><div id="pjd2u"></div><div id="pjd2v"></div><div id="pjd2w"></div><div id="pjd2x"></div></div>
      </div></div></div></div></div></div>
    </div>


    <div class="demo-presentation" data-attr-spliced-ignore>
      <div class="presentation-focus">
        <div class="presentation-el" augmented-ui="tr-clip-x l-clip-y bl-clip tl-round br-round b-clip-x exe">
          <div class="presentation-text">augmented-ui</div>
        </div>
      </div>
      <div class="bg-controls-container">
        <div class="bg-controls" augmented-ui="tl-round tr-clip br-round bl-clip exe">
          <div class="diagnostics-info">
            ANIMATION DIAGNOSTICS<br>
            <span class="performance-detail">PERFORMANCE: </span>
          </div>
        </div>
        <span id="bgFPS" augmented-ui="tl-round tr-clip br-round bl-clip exe"></span>
        <span class="fps-label" augmented-ui="tr-clip bl-clip exe">FPS</span>
      </div>
      <div class="definitions-container">
        <div class="def" augmented-ui="tr-round tl-clip bl-round br-clip exe">
          <b>augs</b> <em>plural noun, abr.</em><br>
          1. Pieces of technology, often large, integrated into the squishy human body. <span title="and in our not too distant future">Common in the cyberpunk genera.</span><br>
          <br>
          2. clip-path partials integrated into an app's flexible ui elements with augmented-ui.
        </div>
      </div>
    </div>



    <script>
      (function () {
        const b = document.body
        const h = b.querySelector(".header-animation-container")
        const informCSS = () => {
          b.style.setProperty("--clientWidth", b.clientWidth)
          b.style.setProperty("--headerHeight", h.clientHeight + "px")
        }
        window.addEventListener("resize", informCSS)
        informCSS()
      })()
    </script>


    <script type="module">
      import PropJockey from "https://unpkg.com/[email protected]/src/propjockey.js"

      const noopSlide = x => x
      const classNameSetter = (obj, propName, newVal, prop) => {
        if (prop.__oldValue !== newVal) {
          prop.__oldValue && obj.classList.remove(...prop.__oldValue.split(" "))
          prop.__oldValue = newVal
          newVal && obj.classList.add(...newVal.split(" "))
        }
      }
      const objPropChangedSetter = (obj, propName, newVal, prop) => {
        if (prop.__oldValue !== newVal) {
          prop.__oldValue = newVal
          obj[propName] = newVal
        }
      }

      const step1End = 3000
      const step2End = 7000


      // chrome near plane clipping bug that causes the bad/broken render on a few frames of a couple elements close to the "camera"
      // https://bugs.chromium.org/p/chromium/issues/detail?id=224618
      const pjdAnimationPropContainer = document.getElementById("propjockeyDOMinionM")
      const loopTime = 25000
      const pjdAnimation3D = new PropJockey({
        // onAfterFrame: fpsCallback,
        repeat: true,
        maxFPS: 90,
        defaultEase: "ease.linear",
        defaultSetter: (obj, propName, newVal, prop) => obj.style.setProperty(propName, newVal.toPrecision(6) + prop.unit),
        props: {
          "--pjAnimVar1":  { unit: "deg", keyframes: [ { position: 0, value:   1 + 359 }, { position: loopTime, value:   1       } ] },
          "--pjAnimVar2":  { unit: "deg", keyframes: [ { position: 0, value: 181 + 359 }, { position: loopTime, value: 181       } ] },
          "--pjAnimVar3":  { unit: "deg", keyframes: [ { position: 0, value:  92       }, { position: loopTime, value:  92 + 359 } ] },
          "--pjAnimVar4":  { unit: "deg", keyframes: [ { position: 0, value: -94       }, { position: loopTime, value: -94 + 359 } ] },
          "--pjAnimVar5":  { unit: "deg", keyframes: [ { position: 0, value: 183 + 359 }, { position: loopTime, value: 183       } ] },
          "--pjAnimVar6":  { unit: "deg", keyframes: [ { position: 0, value:   2       }, { position: loopTime, value:   2 + 359 } ] },
          "--pjAnimVar7":  { unit: "deg", keyframes: [ { position: 0, value:   6       }, { position: loopTime, value:   6 + 359 } ] },
          "--pjAnimVar8":  { unit: "deg", keyframes: [ { position: 0, value: 185 + 359 }, { position: loopTime, value: 185       } ] },
          "--pjAnimVar9":  { unit: "deg", keyframes: [ { position: 0, value:   8       }, { position: loopTime, value:   8 + 359 } ] },
          "--pjAnimVar10": { unit: "deg", keyframes: [ { position: 0, value:  91 + 359 }, { position: loopTime, value:  91       } ] }
        }
      })
      pjdAnimation3D.play(pjdAnimationPropContainer)
    </script>

<div class="codepen-lore-note">
  Prior to the launch of augmented-ui v1.0.0 in 2019, early builds of the website's introductory animation also featured this 3D CSS animation behind it. The background animation was removed for performance reasons but still exists in the commit history. 💜<br>
  <br>
  Hopefully this codepen helps give life to the idea that couldn't make it to production ~
</div>
              
            
!

CSS

              
                @import "https://unpkg.com/[email protected]/augmented.css";

      .header-animation-container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        max-height: calc(var(--clientWidth) * 9px / 16);
        pointer-events: none;
        background: #000000;
        --tl: 30px;
        --tlWidth: 170px;
        --bl: 20px;
        --blWidth: 40%;
        --br: 20px;
        --brWidth: 40%;
        --d: 0px;
        --insetBg: #000000cc;
      }


      #propjockeyDOMinionM{display: block;width: 100%;height: 100%}
      #propjockeyDOMinionM,#propjockeyDOMinionM div{transform-style:preserve-3d;box-sizing:border-box}
      #pjdMAR,#pjdMC,#pjdMZ,#pjdMCR,#pjdMGP{position:absolute}
      #pjdMAR,#pjdMC,#pjdMZ{left:0;right:0}
      #pjdMAR,#pjdMZ{bottom:0}
      #pjdMAR{padding-bottom:calc(100%/(16/9))}
      #pjdMC{bottom:calc(-184px*var(--s));height:100%;perspective:1050px;perspective-origin:50% 50%;transform:scale(var(--s))}
      #pjdMZ {top:0;transform-origin:0 100% 0;transform:translateX(50%) translateY(-50%) rotateX(90deg)}
      #pjdMCR{width:0;height:0;top:100%;right:100%;transform-origin:0px 1050px 0px}
      #pjdMGP{transform:translateY(1050px) translateZ(-50px)}

      #propjockeyDOMinionM {
        --pjAnimVar1:   1deg; /* ccw; slightly above mid */
        --pjAnimVar2: 181deg; /* ccw; low */
        --pjAnimVar3:  92deg; /* cw; low */
        --pjAnimVar4: -94deg; /* cw; high */
        --pjAnimVar5: 183deg; /* ccw; high */
        --pjAnimVar6:   2deg; /* cw; mid low */
        --pjAnimVar7:   6deg; /* cw; high cyl */
        --pjAnimVar8: 185deg; /* ccw; low cyl */
        --pjAnimVar9:   8deg; /* cw; mid cyl bg */
        --pjAnimVar10: 91deg; /* ccw; mid cyl fg */
      }
      #pjd1a,#pjd1b,#pjd1c,#pjd1d,#pjd1e,#pjd1f,#pjd1g,#pjd1s,#pjd24,#pjd2j{will-change:transform}

      #pjd1{display:block;position:absolute;width:20px;height:20px;transform-style:preserve-3d;transform-origin:50% 50%;transform:translateZ(-220px);bottom:calc(310px + 50% - 20px/2);left:calc(0px + 50% - 20px/2)}
      #pjd2{backface-visibility:visible;left:0;transform:rotateX(-90deg) translateZ(10px)}
      #pjd2,#pjd3,#pjd4{position:absolute;bottom:10px;transform-origin:50% 100%;width:20px;height:600px}
      #pjd3{backface-visibility:visible;left:calc((20px - 20px)/-2);transform:rotateZ(90deg) rotateX(-90deg) translateZ(10px)}
      #pjd4{left:0;transform:rotateZ(180deg) rotateX(-90deg) translateZ(10px)}
      #pjd4,#pjd5,#pjd6{backface-visibility:visible}
      #pjd5{position:absolute;transform-origin:50% 100%;left:calc((20px - 20px)/-2);transform:rotateZ(270deg) rotateX(-90deg) translateZ(10px);bottom:10px;width:20px;height:600px}
      #pjd6{width:100%;height:100%;bottom:0;left:0;transform:translateZ(600px)}
      #pjd6,#pjd7,#pjd8{position:absolute;transform-origin:50% 50%}
      #pjd7{bottom:0;left:0;transform:rotateY(180deg);backface-visibility:visible;width:100%;height:100%}
      #pjd8{display:block;width:400px;height:400px;transform-style:preserve-3d;transform:translateZ(-200px);bottom:calc(310px + 50% - 400px/2);left:calc(0px + 50% - 400px/2)}
      #pjd9{transform:rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px);bottom:0;backface-visibility:visible}
      #pjd9,#pjda,#pjdb{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%)}
      #pjda{bottom:0;backface-visibility:visible;transform:rotateZ(22.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdb{transform:rotateZ(45deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdb,#pjdc,#pjdd{bottom:0;backface-visibility:visible}
      #pjdc{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);transform:rotateZ(67.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdd{transform:rotateZ(90deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdd,#pjde,#pjdf{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%)}
      #pjde{bottom:0;backface-visibility:visible;transform:rotateZ(112.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdf{transform:rotateZ(135deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdf,#pjdg,#pjdh{bottom:0;backface-visibility:visible}
      #pjdg{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);transform:rotateZ(157.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdh{transform:rotateZ(180deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdh,#pjdi,#pjdj{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%)}
      #pjdi{bottom:0;backface-visibility:visible;transform:rotateZ(202.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdj{transform:rotateZ(225deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdj,#pjdk,#pjdl{bottom:0;backface-visibility:visible}
      #pjdk{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);transform:rotateZ(247.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdl{transform:rotateZ(270deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdl,#pjdm,#pjdn{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%)}
      #pjdm{bottom:0;backface-visibility:visible;transform:rotateZ(292.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdn{transform:rotateZ(315deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdn,#pjdo,#pjdp{bottom:0;backface-visibility:visible}
      #pjdo{transform-origin:50% calc(100% - 400px/2);transform:rotateZ(337.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px);position:absolute;left:calc((100% - 78.036px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);width:78.036px;height:200px}
      #pjdp{width:100%;height:100%;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform:translateZ(200px);background:0 0;border-radius:400px;border:12px solid gold}
      #pjdp,#pjdq,#pjdr{position:absolute;transform-origin:50% 50%}
      #pjdq{bottom:0;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform:rotateY(180deg);backface-visibility:visible;background:0 0;width:100%;height:100%}
      #pjdr{display:block;width:400px;height:400px;transform-style:preserve-3d;transform:translateZ(160px);bottom:calc(310px + 50% - 400px/2);left:calc(0px + 50% - 400px/2)}
      #pjds,#pjdt{backface-visibility:visible}
      #pjds{transform-origin:50% calc(100% - 400px/2);transform:rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold}
      #pjdt{transform:rotateZ(22.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdt,#pjdu,#pjdv{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold}
      #pjdu{backface-visibility:visible;transform:rotateZ(45deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdv{transform:rotateZ(67.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdv,#pjdw,#pjdx{backface-visibility:visible}
      #pjdw{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold;transform:rotateZ(90deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdx{transform:rotateZ(112.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdx,#pjdy,#pjdz{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold}
      #pjdy{backface-visibility:visible;transform:rotateZ(135deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjdz{transform:rotateZ(157.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd10,#pjd11,#pjdz{backface-visibility:visible}
      #pjd10{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold;transform:rotateZ(180deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd11{transform:rotateZ(202.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd11,#pjd12,#pjd13{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold}
      #pjd12{backface-visibility:visible;transform:rotateZ(225deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd13{transform:rotateZ(247.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd13,#pjd14,#pjd15{backface-visibility:visible}
      #pjd14{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold;transform:rotateZ(270deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd15{transform:rotateZ(292.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd15,#pjd16,#pjd17{transform-origin:50% calc(100% - 400px/2);width:78.036px;height:200px;position:absolute;bottom:0;left:calc((100% - 78.036px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold}
      #pjd16{backface-visibility:visible;transform:rotateZ(315deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd17{transform:rotateZ(337.5deg) rotateX(-90deg) translateZ(196.15720000000002px) translateY(-200px)}
      #pjd17,#pjd18,#pjd19,#pjd1a{backface-visibility:visible}
      #pjd18{position:absolute;width:100%;height:100%;bottom:0;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform-origin:50% 50%;transform:translateZ(200px);background:#000;border-radius:400px}
      #pjd19,#pjd1a{background:0 0}
      #pjd19{position:absolute;bottom:0;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform:rotateY(180deg);width:100%;height:100%;transform-origin:50% 50%}
      #pjd1a{width:600px;height:300px;transform-origin:50% 100%;transform:rotateZ(var(--pjAnimVar1)) translateZ(110px);bottom:calc(460px + 50% - 300px/2);left:calc(0px + 50% - 600px/2);white-space:pre;border-top-left-radius:300px;border-top-right-radius:300px;border:50px solid #eda72588;border-bottom:none}
      #pjd1a,#pjd1b,#pjd1c{display:block;position:absolute}
      #pjd1b{width:600px;height:300px;transform-origin:50% 100%;transform:rotateZ(var(--pjAnimVar2));bottom:calc(460px + 50% - 300px/2);left:calc(0px + 50% - 600px/2);backface-visibility:visible;white-space:pre;border-top-left-radius:300px;border-top-right-radius:300px;border:50px solid #eda72588;border-bottom:none;background:0 0}
      #pjd1c{transform:rotateZ(var(--pjAnimVar3)) translateZ(20px)}
      #pjd1c,#pjd1d,#pjd1e{width:600px;height:300px;transform-origin:50% 100%;bottom:calc(460px + 50% - 300px/2);left:calc(0px + 50% - 600px/2);backface-visibility:visible;white-space:pre;border-top-left-radius:300px;border-top-right-radius:300px;border:50px solid #eda72588;border-bottom:none;background:0 0}
      #pjd1d{display:block;position:absolute;transform:rotateZ(var(--pjAnimVar4)) translateZ(140px) scale(.8)}
      #pjd1e{transform:rotateZ(var(--pjAnimVar5)) translateZ(150px) scale(.75)}
      #pjd1e,#pjd1f,#pjd1g{display:block;position:absolute}
      #pjd1f{transform:rotateZ(var(--pjAnimVar6)) translateZ(30px) scale(.75);backface-visibility:visible;white-space:pre;border-top-left-radius:300px;border-top-right-radius:300px;border:50px solid #eda72588;border-bottom:none;background:0 0;width:600px;height:300px;transform-origin:50% 100%;bottom:calc(460px + 50% - 300px/2);left:calc(0px + 50% - 600px/2)}
      #pjd1g{width:350px;height:350px;transform-style:preserve-3d;transform-origin:50% 50%;transform:translateZ(180px) rotateZ(var(--pjAnimVar7));bottom:calc(310px + 50% - 350px/2);left:calc(0px + 50% - 350px/2)}
      #pjd1h,#pjd1i{bottom:0;backface-visibility:visible}
      #pjd1h{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold;transform:rotateZ(157.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1i{transform:rotateZ(180deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1i,#pjd1j,#pjd1k{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold}
      #pjd1j{bottom:0;backface-visibility:visible;transform:rotateZ(202.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1k{transform:rotateZ(225deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1k,#pjd1l,#pjd1m{bottom:0;backface-visibility:visible}
      #pjd1l{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold;transform:rotateZ(247.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1m{transform:rotateZ(270deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1m,#pjd1n,#pjd1o{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold}
      #pjd1n{bottom:0;backface-visibility:visible;transform:rotateZ(292.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1o{transform:rotateZ(315deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1o,#pjd1p,#pjd1q{bottom:0;backface-visibility:visible}
      #pjd1p{transform-origin:50% calc(100% - 350px/2);transform:rotateZ(337.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px);position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to top,#eda725,#000 50%);border-bottom:2px solid gold;width:68.28150000000001px;height:200px}
      #pjd1q{width:100%;height:100%;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform:translateZ(200px);background:#000;border-radius:400px}
      #pjd1q,#pjd1r,#pjd1s{position:absolute;transform-origin:50% 50%}
      #pjd1r{bottom:0;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform:rotateY(180deg);backface-visibility:visible;background:0 0;width:100%;height:100%}
      #pjd1s{display:block;width:350px;height:350px;transform-style:preserve-3d;transform:translateZ(-230px) rotateZ(var(--pjAnimVar8));bottom:calc(310px + 50% - 350px/2);left:calc(0px + 50% - 350px/2)}
      #pjd1t,#pjd1u{bottom:0;backface-visibility:visible}
      #pjd1t{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);border-bottom:2px solid gold;opacity:.75;transform:rotateZ(157.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1u{transform:rotateZ(180deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1u,#pjd1v,#pjd1w{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);border-bottom:2px solid gold;opacity:.75}
      #pjd1v{bottom:0;backface-visibility:visible;transform:rotateZ(202.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1w{transform:rotateZ(225deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1w,#pjd1x,#pjd1y{bottom:0;backface-visibility:visible}
      #pjd1x{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);border-bottom:2px solid gold;opacity:.75;transform:rotateZ(247.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1y{transform:rotateZ(270deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd1y,#pjd1z,#pjd20{transform-origin:50% calc(100% - 350px/2);width:68.28150000000001px;height:200px;position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);border-bottom:2px solid gold;opacity:.75}
      #pjd1z{bottom:0;backface-visibility:visible;transform:rotateZ(292.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd20{transform:rotateZ(315deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px)}
      #pjd20,#pjd21,#pjd22{bottom:0;backface-visibility:visible}
      #pjd21{transform-origin:50% calc(100% - 350px/2);transform:rotateZ(337.5deg) rotateX(-90deg) translateZ(171.63755px) translateY(-175px);position:absolute;left:calc((100% - 68.28150000000001px)/2);background:linear-gradient(to bottom,#eda725,#000 50%);border-bottom:2px solid gold;opacity:.75;width:68.28150000000001px;height:200px}
      #pjd22{width:100%;height:100%;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform:translateZ(200px);background:0 0}
      #pjd22,#pjd23,#pjd24{position:absolute;transform-origin:50% 50%}
      #pjd23{bottom:0;left:0;clip-path:polygon(40.2454839% 99.03926402%,22.22148835% 91.57348062%,8.42651938% 77.77851165%,.96073598% 59.7545161%,.96073598% 40.2454839%,8.42651938% 22.22148835%,22.22148835% 8.42651938%,40.2454839% .96073598%,59.7545161% .96073598%,77.77851165% 8.42651938%,91.57348062% 22.22148835%,99.03926402% 40.2454839%,99.03926402% 59.7545161%,91.57348062% 77.77851165%,77.77851165% 91.57348062%,59.7545161% 99.03926402%);transform:rotateY(180deg);backface-visibility:visible;background:0 0;width:100%;height:100%}
      #pjd24{display:block;width:800px;height:800px;transform-style:preserve-3d;transform:translateZ(-80px) rotateZ(var(--pjAnimVar9));bottom:calc(310px + 50% - 800px/2);left:calc(0px + 50% - 800px/2)}
      #pjd25{transform:rotateZ(90deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px);bottom:0;backface-visibility:visible}
      #pjd25,#pjd26,#pjd27{transform-origin:50% calc(100% - 800px/2);width:306.14639999999997px;height:300px;position:absolute;left:calc((100% - 306.14639999999997px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5}
      #pjd26{bottom:0;backface-visibility:visible;transform:rotateZ(135deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd27{transform:rotateZ(225deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd27,#pjd28,#pjd29{bottom:0;backface-visibility:visible}
      #pjd28{transform-origin:50% calc(100% - 800px/2);width:306.14639999999997px;height:300px;position:absolute;left:calc((100% - 306.14639999999997px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5;transform:rotateZ(315deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd29{transform:rotateZ(360deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd29,#pjd2a,#pjd2b{transform-origin:50% calc(100% - 800px/2);width:306.14639999999997px;height:300px;position:absolute;left:calc((100% - 306.14639999999997px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5}
      #pjd2a{bottom:0;backface-visibility:visible;transform:rotateZ(405deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd2b{transform:rotateZ(450deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd2b,#pjd2c,#pjd2d{bottom:0;backface-visibility:visible}
      #pjd2c{transform-origin:50% calc(100% - 800px/2);width:306.14639999999997px;height:300px;position:absolute;left:calc((100% - 306.14639999999997px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5;transform:rotateZ(495deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd2d{transform:rotateZ(540deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd2d,#pjd2e,#pjd2f{transform-origin:50% calc(100% - 800px/2);width:306.14639999999997px;height:300px;position:absolute;left:calc((100% - 306.14639999999997px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5}
      #pjd2e{bottom:0;backface-visibility:visible;transform:rotateZ(585deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd2f{transform:rotateZ(630deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px)}
      #pjd2f,#pjd2g,#pjd2h,#pjd2i{bottom:0;backface-visibility:visible}
      #pjd2g{transform-origin:50% calc(100% - 800px/2);transform:rotateZ(675deg) rotateX(-90deg) translateZ(369.552px) translateY(-400px);position:absolute;left:calc((100% - 306.14639999999997px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5;width:306.14639999999997px;height:300px}
      #pjd2h,#pjd2i{width:100%;height:100%;left:0;clip-path:polygon(30.86582838% 96.19397663%,3.80602337% 69.13417162%,3.80602337% 30.86582838%,30.86582838% 3.80602337%,69.13417162% 3.80602337%,96.19397663% 30.86582838%,96.19397663% 69.13417162%,69.13417162% 96.19397663%);transform-origin:50% 50%;background:0 0}
      #pjd2h{position:absolute;transform:translateZ(300px);border-radius:400px}
      #pjd2i{transform:rotateY(180deg)}
      #pjd2i,#pjd2j,#pjd2k{position:absolute}
      #pjd2j{display:block;width:700px;height:700px;transform-style:preserve-3d;transform-origin:50% 50%;transform:translateZ(-20px) rotateZ(var(--pjAnimVar10));bottom:calc(310px + 50% - 700px/2);left:calc(0px + 50% - 700px/2)}
      #pjd2k{transform:rotateZ(90deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px);bottom:0;backface-visibility:visible}
      #pjd2k,#pjd2l,#pjd2m{transform-origin:50% calc(100% - 700px/2);width:267.8781px;height:200px;left:calc((100% - 267.8781px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5}
      #pjd2l{position:absolute;bottom:0;backface-visibility:visible;transform:rotateZ(135deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2m{transform:rotateZ(225deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2m,#pjd2n,#pjd2o{position:absolute;bottom:0;backface-visibility:visible}
      #pjd2n{transform-origin:50% calc(100% - 700px/2);width:267.8781px;height:200px;left:calc((100% - 267.8781px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5;transform:rotateZ(315deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2o{transform:rotateZ(360deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2o,#pjd2p,#pjd2q{transform-origin:50% calc(100% - 700px/2);width:267.8781px;height:200px;left:calc((100% - 267.8781px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5}
      #pjd2p{position:absolute;bottom:0;backface-visibility:visible;transform:rotateZ(405deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2q{transform:rotateZ(450deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2q,#pjd2r,#pjd2s{position:absolute;bottom:0;backface-visibility:visible}
      #pjd2r{transform-origin:50% calc(100% - 700px/2);width:267.8781px;height:200px;left:calc((100% - 267.8781px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5;transform:rotateZ(495deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2s{transform:rotateZ(540deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2s,#pjd2t,#pjd2u{transform-origin:50% calc(100% - 700px/2);width:267.8781px;height:200px;left:calc((100% - 267.8781px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5}
      #pjd2t{position:absolute;bottom:0;backface-visibility:visible;transform:rotateZ(585deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2u{transform:rotateZ(630deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px)}
      #pjd2u,#pjd2v,#pjd2w,#pjd2x{position:absolute;bottom:0;backface-visibility:visible}
      #pjd2v{transform-origin:50% calc(100% - 700px/2);transform:rotateZ(675deg) rotateX(-90deg) translateZ(323.358px) translateY(-350px);left:calc((100% - 267.8781px)/2);background:linear-gradient(to top,#000,#eda725,#000);border-bottom:2px solid gold;opacity:.5;width:267.8781px;height:200px}
      #pjd2w,#pjd2x{width:100%;height:100%;left:0;clip-path:polygon(30.86582838% 96.19397663%,3.80602337% 69.13417162%,3.80602337% 30.86582838%,30.86582838% 3.80602337%,69.13417162% 3.80602337%,96.19397663% 30.86582838%,96.19397663% 69.13417162%,69.13417162% 96.19397663%);transform-origin:50% 50%;background:0 0}
      #pjd2w{transform:translateZ(200px);border-radius:400px}
      #pjd2x{transform:rotateY(180deg)}


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: black;
}

:root {
  --clientWidth: 100vw;
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
  margin: 0px;
  padding: 0px;
}
body {
  --clientWidth: 1920;
  --s: calc(var(--clientWidth) / 1920);
  --gold: #ffd700;
  --gold88: rgba(255, 215, 0, 0.53);
  --goldDark: #eda725;
}
body.anti-aug-transitions *,
body.anti-aug-transitions *:before,
body.anti-aug-transitions *:after {
  transition: clip-path 4s ease;
}
body.anti-aug [augmented-ui~="exe"],
body.anti-aug #bgFPS[augmented-ui~="exe"],
body.anti-aug [augmented-ui~="exe"]:before,
body.anti-aug [augmented-ui~="exe"]:after,
body.anti-aug .aug-exe,
body.anti-aug #bgFPS.aug-exe,
body.anti-aug .aug-exe:before,
body.anti-aug .aug-exe:after {
  --aug-inset: 0px;
  --aug-tl: 0px;
  --aug-tl-height: 0px;
  --aug-tl-width: 0px;
  --aug-tr: 0px;
  --aug-tr-height: 0px;
  --aug-tr-width: 0px;
  --aug-br: 0px;
  --aug-br-height: 0px;
  --aug-br-width: 0px;
  --aug-bl: 0px;
  --aug-bl-height: 0px;
  --aug-bl-width: 0px;
  --aug-t: 0px;
  --aug-t-height: 0px;
  --aug-t-width: 0px;
  --aug-r: 0px;
  --aug-r-height: 0px;
  --aug-r-width: 0px;
  --aug-b: 0px;
  --aug-b-height: 0px;
  --aug-b-width: 0px;
  --aug-l: 0px;
  --aug-l-height: 0px;
  --aug-l-width: 0px;
}

.demo-presentation {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  max-height: calc(var(--clientWidth) * 9px / 16);
  perspective: 500px;
  background: rgba(0, 0, 0, 0.75);
}

.presentation-focus {
  pointer-events: all;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-250px);
}

/* .demo-presentation houses all the --pjAnim vars */
.presentation-el {
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  padding: 70px;
  height:               var( --pjAnim-height,         350px   );
  width:                var( --pjAnim-width,          550px   );
  --aug-inset:          var( --pjAnim-inset,          7px     );
  --aug-inset-bg:       var( --pjAnim-inset-bg,       #ffd700 );
  --aug-border:         var( --pjAnim-border,         5px     );
  --aug-border-bg:      var( --pjAnim-border-bg,      #ffd700 );
  --aug-border-opacity: var( --pjAnim-border-opacity, 0.5     );
  --aug-l-offset:       var( --pjAnim-l-offset,       0px     );
  --aug-b-offset:       var( --pjAnim-b-offset,       0px     );
  --aug-tl:             var( --pjAnim-tl,             10px    );
  --aug-tl-height:      var( --pjAnim-tl-height,      0px     );
  --aug-tl-width:       var( --pjAnim-tl-width,       0px     );
  --aug-tr:             var( --pjAnim-tr,             20px    );
  --aug-tr-height:      var( --pjAnim-tr-height,      20px    );
  --aug-tr-width:       var( --pjAnim-tr-width,       160px   );
  --aug-br:             var( --pjAnim-br,             20px    );
  --aug-br-height:      var( --pjAnim-br-height,      0px     );
  --aug-br-width:       var( --pjAnim-br-width,       0px     );
  --aug-bl:             var( --pjAnim-bl,             30px    );
  --aug-bl-height:      var( --pjAnim-bl-height,      30px    );
  --aug-bl-width:       var( --pjAnim-bl-width,       30px    );
  --aug-t:              var( --pjAnim-t,              0px     );
  --aug-t-height:       var( --pjAnim-t-height,       0px     );
  --aug-t-width:        var( --pjAnim-t-width,        0px     );
  --aug-r:              var( --pjAnim-r,              0px     );
  --aug-r-height:       var( --pjAnim-r-height,       0px     );
  --aug-r-width:        var( --pjAnim-r-width,        0px     );
  --aug-b:              var( --pjAnim-b,              15px    );
  --aug-b-height:       var( --pjAnim-b-height,       15px    );
  --aug-b-width:        var( --pjAnim-b-width,        120px   );
  --aug-l:              var( --pjAnim-l,              20px    );
  --aug-l-height:       var( --pjAnim-l-height,       210px   );
  --aug-l-width:        var( --pjAnim-l-width,        20px    );
}
.presentation-text {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
  text-shadow: 0px 0px 32px rgba(0, 0, 0, 0.8);
  color: white;
  width: 420px;
}

.definitions-container {
  pointer-events: all;
  position: absolute;
  bottom: 45px;
  right: 25px;
  height: 150px;
  width: 300px;
  transform-origin: 100% 50%;
  transform: rotateY(-5deg);
}
.definitions-container .def {
  padding: 10px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.25);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: #ffd700;
  --aug-tr: 6px;
  --aug-bl: 6px;
  --aug-br: 25px;
  --aug-tl: 25px;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 15px;
}
.definitions-container .def b,
.definitions-container .def em {
  font-size: 16px;
}
.definitions-container .def span {
  font-size: 12px;
}

.bg-controls-container {
  pointer-events: all;
  position: absolute;
  bottom: 45px;
  left: 25px;
  height: 50px;
  width: 300px;
  transform-origin: 0 50%;
  transform: rotateY(5deg);
}

.bg-controls {
  padding: 10px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.25);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: #ffd700;
  --aug-tl: 6px;
  --aug-br: 6px;
  --aug-bl: 25px;
  --aug-tr: 25px;
  height: 100%;
  width: 100%;
}

.diagnostics-info {
  position: absolute;
  top: 10px;
  right: 25px;
  width: 190px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 15px;
}

.performance-detail:after {
  content: "";
  color: var(--gold);
}
.great-fps .performance-detail:after { content: "GREAT"; }
.good-fps .performance-detail:after { content: "GOOD"; }
.fair-fps .performance-detail:after { content: "FAIR"; }
.bad-fps .performance-detail:after { content: "BAD"; color: #ffaaaa; }
.awful-fps .performance-detail:after { content: "AWFUL"; color: #ff8888; }
.awful-fps-hault .performance-detail:after { content: "HAULTED"; color: #ff0000; }
.performance-detail {
  font-size: 12px;
  opacity: 0.65;
}

#bgFPS {
  background: var(--gold);
  color: #ffffff;
  text-shadow: 0px 0px 32px rgba(0, 0, 0, 0.8);
  height: 60px;
  width: 45px;
  position: absolute;
  left: 25px;
  bottom: 20px;
  --aug-tl: 3px;
  --aug-br: 3px;
  --aug-bl: 10px;
  --aug-tr: 10px;
  font-size: 25px;
  text-align: center;
  padding-top: 10px;
}
.awful-fps-hault #bgFPS {
  background: linear-gradient(to right, #ff000033, #ff000033), var(--gold);
}

.fps-label {
  background: #000000;
  color: #ffffff;
  height: 20px;
  width: 35px;
  position: absolute;
  left: 42px;
  bottom: 14px;
  --aug-bl: 7px;
  --aug-tr: 7px;
  font-size: 11px;
  text-align: center;
  --aug-border: 1px;
  --aug-border-bg: #ffffff88;
  padding-top: 5px;
  letter-spacing: 1px;
  line-height: 11px;
}

.codepen-lore-note {
  position: absolute;
  top: calc(100vw * 9 / 16);
  color: white;
  padding: 2rem;
}

              
            
!

JS

              
                import PropJockey from "https://unpkg.com/[email protected]/src/propjockey.js"

const fpsCallback = (function () {
  const rollingAverage = (function () {
    const entries = []
    const sum = (t, v) => t + v
    const avg = () => entries.reduce(sum, 0) / entries.length
    return num => {
      entries.unshift(num)
      entries.splice(10)
      return avg()
    }
  })()
  let lastFPS = 0
  let lastClass = "init-fps"
  let awfulCount = 0
  let haulted = false
  // let lastMS = Date.now()
  const bgFPSEl = document.getElementById("bgFPS")
  return (animation, objectInProgress, animationInstanceState) => {
    if (haulted) {
      return
    }
    // const deltaTime = Date.now() - lastMS
    const deltaTime = animation.config.timingPool.deltaTime
    // lastMS = Date.now()
    const currentFPS = Math.min(1000 / deltaTime, 99)
    const fpsAvg = Math.round(rollingAverage(currentFPS))
    if (lastFPS !== fpsAvg) {
      bgFPSEl.innerHTML = fpsAvg
      lastFPS = fpsAvg
      let newClass = ""
      if (fpsAvg > 59) {
        newClass = "great-fps"
      } else if (fpsAvg > 44) {
        newClass = "good-fps"
      } else if (fpsAvg > 29) {
        newClass = "fair-fps"
      } else if (fpsAvg > 19) {
        newClass = "bad-fps"
      } else {
        newClass = "awful-fps"
      }
      if (newClass !== lastClass) {
        bgFPSEl.parentNode.classList.remove(lastClass)
        bgFPSEl.parentNode.classList.add(newClass)
        lastClass = newClass
      }
    }
    if (fpsAvg < 20) {
      awfulCount++
      if (awfulCount > 50) {
        bgFPSEl.parentNode.classList.add("awful-fps-hault")
        document.body.classList.add("background-haulted")
        animation.pause(objectInProgress)
        haulted = true
      }
    }
  }
})()


// --pjAnim-
const presetnationContainer = document.querySelector(".demo-presentation")
const presetnationEl = document.querySelector(".presentation-el")
const presentationText = document.querySelector(".presentation-text")
const presentationAnim = new PropJockey({
  repeat: true,
  repeatDelay: 4000,
  defaultSetter: "setter.element.cssVar.unit",
  props: {
    text: {
      slide: x => x,
      setter: (obj, propName, newVal, prop) => {
        if (prop.__oldValue !== newVal) {
          prop.__oldValue = newVal
          presentationText.innerHTML = newVal
        }
      },
      keyframes: [
        // grey standard div, augs with 0 size: tr-clip-x l-clip-y bl-clip tl-round br-round b-clip-x exe
        { position: 0, value: "Introducing augmented-ui", ease: "ease.step-start" },
        { position: 2500, value: "Cyberpunk inspired web design just got a whole lot easier", ease: "ease.step-start" },
        // color shifts to gold, aug sizes increased to defaults in the css file
        // 1/3 way through shift, border added with opacity start dropping
        // 2/3 way through shift, inset added
        { position: 2500 + 8000, value: "Each feature (aug) stays in place for any size element", ease: "ease.step-start" },
        // grow width to 700
        // then grow height to 500
        { position: 2500 + 8000 + 6000, value: "Fine-tune the position<br>of augs along an edge", ease: "ease.step-start" },
        // l-offset-y 0px -> 50px, b-offset 0px -> -50px (1 sec)
        // l-offset-y 50px -> -50px, b-offset -50px -> 50px (2 sec)
        // then return height and width to previous (550 h 350 w), shrink all values to 0 exept (1 sec)
        //   top right becomes 100, "initial", "initial"
        { position: 2500 + 8000 + 6000 + 4000, value: "Several augs to<br>mix and match", ease: "ease.step-start" },
        // flip through 5 on top right for 0.5s each, end at no augs
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: "Learn<br>more!<br>|<br>V", ease: "ease.step-start" }
        // tl-rect tr-rect bl-clip br-clip t-clip exe (draw arrow down)
      ]
    },
    augs: {
      slide: x => x,
      setter: (obj, propName, newVal, prop) => {
        if (prop.__oldValue !== newVal) {
          prop.__oldValue = newVal
          presetnationEl.setAttribute("augmented-ui", newVal)
        }
      },
      keyframes: [
        { position: 0, value: "tr-clip-x l-clip-y bl-clip tl-round br-round b-clip-x exe" },
        { position: 2500 + 8000 + 6000 + 4000, value: "exe" },
        { position: 2500 + 8000 + 6000 + 4000 + 1000, value: "exe tr-clip" },
        { position: 2500 + 8000 + 6000 + 4000 + 2000, value: "exe tr-round" },
        { position: 2500 + 8000 + 6000 + 4000 + 3000, value: "exe tr-rect" },
        { position: 2500 + 8000 + 6000 + 4000 + 4000, value: "exe tr-clip-x" },
        { position: 2500 + 8000 + 6000 + 4000 + 5000, value: "exe tr-clip-y" },
        { position: 2500 + 8000 + 6000 + 4000 + 6000, value: "exe t-clip r-clip" },
        { position: 2500 + 8000 + 6000 + 4000 + 7500, value: "exe t-rect r-rect" },
        { position: 2500 + 8000 + 6000 + 4000 + 9000, value: "exe t-clip-x r-clip-x" },
        { position: 2500 + 8000 + 6000 + 4000 + 10500, value: "exe t-clip-y r-clip-y" },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: "exe" },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 100, value: "exe tl-rect tr-rect bl-clip br-clip t-clip" }
      ]
    },
    "--pjAnim-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 350 },
        { position: 2500 + 8000 + 3000, value: 350 },
        { position: 2500 + 8000 + 4000, value: 500 },
        { position: 2500 + 8000 + 6000 + 3000, value: 500 },
        { position: 2500 + 8000 + 6000 + 4000, value: 350 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 350 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 550 }
      ]
    },
    "--pjAnim-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 550 },
        { position: 2500 + 8000, value: 550 },
        { position: 2500 + 8000 + 2000, value: 700 },
        { position: 2500 + 8000 + 6000 + 3000, value: 700 },
        { position: 2500 + 8000 + 6000 + 4000, value: 550 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 550 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 300 }
      ]
    },
    "--pjAnim-inset": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },
        { position: 2500 + 6000, value: 0 },
        { position: 2500 + 8000, value: 7 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 7 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 12 }
      ]
    },
    "--pjAnim-inset-bg": {
      setter: "setter.element.cssVar",
      slide: "slide.color.hex",
      keyframes: [
        { position: 0, value: "#9b9988" },
        { position: 2500, value: "#9b9988" },
        { position: 2500 + 2000, value: "#ffd700" }
      ]
    },
    "--pjAnim-border": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },
        { position: 2500 + 2000, value: 0 },
        { position: 2500 + 4000, value: 5 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 5 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 10 }
      ]
    },
    "--pjAnim-border-bg": {
      setter: "setter.element.cssVar",
      slide: "slide.color.hex",
      keyframes: [
        { position: 0, value: "#ffd700" }
      ]
    },
    "--pjAnim-border-opacity": {
      setter: "setter.element.cssVar",
      keyframes: [
        { position: 0, value: 1 },
        { position: 2500 + 2000, value: 1 },
        { position: 2500 + 4000, value: 0.5 }
      ]
    },
    "--pjAnim-l-offset": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500 + 8000 + 6000, value: 0 },
        { position: 2500 + 8000 + 6000 + 1000, value: 50 },
        { position: 2500 + 8000 + 6000 + 3000, value: -50 }
      ]
    },
    "--pjAnim-b-offset": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500 + 8000 + 6000, value: 0 },
        { position: 2500 + 8000 + 6000 + 1000, value: -100 },
        { position: 2500 + 8000 + 6000 + 3000, value: 100 }
      ]
    },
    "--pjAnim-tl": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 10 },
        { position: 2500 + 8000, value: 10 },
        { position: 2500 + 8000 + 6000 + 3000, value: 10 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-tl-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 350 }
      ]
    },
    "--pjAnim-tl-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 75 }
      ]
    },
    "--pjAnim-tr": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 20 },
        { position: 2500 + 8000, value: 20 },
        { position: 2500 + 8000 + 6000 + 3000, value: 20 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 1, value: 100 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 100 }
      ]
    },
    "--pjAnim-tr-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 20 },
        { position: 2500 + 8000, value: 20 },
        { position: 2500 + 8000 + 6000 + 3000, value: 20 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0, ease: "ease.step-start" },
        { position: 2500 + 8000 + 6000 + 4000 + 1000, value: 70, ease: "ease.step-end" }, // "exe tr-clip"
        { position: 2500 + 8000 + 6000 + 4000 + 2000, value: 50, ease: "ease.step-end" }, // "exe tr-round"
        { position: 2500 + 8000 + 6000 + 4000 + 3000, value: 50, ease: "ease.step-end" }, // "exe tr-rect"
        { position: 2500 + 8000 + 6000 + 4000 + 4000, value: 40, ease:  "ease.step-end" },  // "exe tr-clip-x"
        { position: 2500 + 8000 + 6000 + 4000 + 5000, value: 120, ease: "ease.step-end" },  // "exe tr-clip-y"
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 350 }
      ]
    },
    "--pjAnim-tr-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 160 },
        { position: 2500 + 8000, value: 160 },
        { position: 2500 + 8000 + 6000 + 3000, value: 160 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0, ease: "ease.step-start" },
        { position: 2500 + 8000 + 6000 + 4000 + 1000, value: 70, ease: "ease.step-end" }, // "exe tr-clip"
        { position: 2500 + 8000 + 6000 + 4000 + 2000, value: 50, ease: "ease.step-end" }, // "exe tr-round"
        { position: 2500 + 8000 + 6000 + 4000 + 3000, value: 100, ease: "ease.step-end" }, // "exe tr-rect"
        { position: 2500 + 8000 + 6000 + 4000 + 4000, value: 120, ease: "ease.step-end" }, // "exe tr-clip-x"
        { position: 2500 + 8000 + 6000 + 4000 + 5000, value: 40, ease:  "ease.step-end" },   // "exe tr-clip-y"
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 75 }
      ]
    },
    "--pjAnim-br": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 20 },
        { position: 2500 + 8000, value: 20 },
        { position: 2500 + 8000 + 6000 + 3000, value: 20 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-br-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 130 }
      ]
    },
    "--pjAnim-br-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 130 }
      ]
    },
    "--pjAnim-bl": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 30 },
        { position: 2500 + 8000, value: 30 },
        { position: 2500 + 8000 + 6000 + 3000, value: 30 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-bl-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 30 },
        { position: 2500 + 8000, value: 30 },
        { position: 2500 + 8000 + 6000 + 3000, value: 30 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 130 }
      ]
    },
    "--pjAnim-bl-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 30 },
        { position: 2500 + 8000, value: 30 },
        { position: 2500 + 8000 + 6000 + 3000, value: 30 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 130 }
      ]
    },
    "--pjAnim-t": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-t-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 5000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 6000, value: 35, ease: "ease.step-end" },     // t,r clip
        { position: 2500 + 8000 + 6000 + 4000 + 7500, value: 50, ease: "ease.step-end" },     // t,r rect
        { position: 2500 + 8000 + 6000 + 4000 + 9000, value: 30, ease: "ease.step-end" },     // t,r clip-x
        { position: 2500 + 8000 + 6000 + 4000 + 10500, value: 90, ease: "ease.step-end" },   // t,r clip-y
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 35 }
      ]
    },
    "--pjAnim-t-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 5000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 6000, value: 70, ease: "ease.step-end" },     // t,r clip
        { position: 2500 + 8000 + 6000 + 4000 + 7500, value: 100, ease: "ease.step-end" },    // t,r rect
        { position: 2500 + 8000 + 6000 + 4000 + 9000, value: 120, ease: "ease.step-end" },    // t,r clip-x
        { position: 2500 + 8000 + 6000 + 4000 + 10500, value: 60, ease: "ease.step-end" },    // t,r clip-y
        { position: 2500 + 8000 + 6000 + 4000 + 12000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 1750, value: 70 }
      ]
    },
    "--pjAnim-r": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-r-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 5000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 6000, value: 70, ease: "ease.step-end" },  // t,r clip
        { position: 2500 + 8000 + 6000 + 4000 + 7500, value: 100, ease: "ease.step-end" }, // t,r rect
        { position: 2500 + 8000 + 6000 + 4000 + 9000, value: 60, ease: "ease.step-end" }, // t,r clip-x
        { position: 2500 + 8000 + 6000 + 4000 + 10500, value: 120, ease: "ease.step-end" }, // t,r clip-y
      ]
    },
    "--pjAnim-r-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 0 },
        { position: 2500 + 8000, value: 0 },
        { position: 2500 + 8000 + 6000 + 3000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 5000, value: 0 },
        { position: 2500 + 8000 + 6000 + 4000 + 6000, value: 35, ease: "ease.step-end"  },  // t,r clip
        { position: 2500 + 8000 + 6000 + 4000 + 7500, value: 50, ease: "ease.step-end"  },  // t,r rect
        { position: 2500 + 8000 + 6000 + 4000 + 9000, value: 90, ease: "ease.step-end" },   // t,r clip-x
        { position: 2500 + 8000 + 6000 + 4000 + 10500, value: 30, ease: "ease.step-end" }, // t,r clip-y
      ]
    },
    "--pjAnim-b": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 15 },
        { position: 2500 + 8000, value: 15 },
        { position: 2500 + 8000 + 6000 + 3000, value: 15 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-b-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 15 },
        { position: 2500 + 8000, value: 15 },
        { position: 2500 + 8000 + 6000 + 3000, value: 15 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-b-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 120 },
        { position: 2500 + 8000, value: 120 },
        { position: 2500 + 8000 + 6000 + 3000, value: 120 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-l": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 20 },
        { position: 2500 + 8000, value: 20 },
        { position: 2500 + 8000 + 6000 + 3000, value: 20 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-l-height": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 210 },
        { position: 2500 + 8000, value: 210 },
        { position: 2500 + 8000 + 6000 + 3000, value: 210 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "--pjAnim-l-width": {
      unit: "px",
      keyframes: [
        { position: 0, value: 0 },                                                     
        { position: 2500, value: 0 },
        { position: 2500 + 6500, value: 20 },
        { position: 2500 + 8000, value: 20 },
        { position: 2500 + 8000 + 6000 + 3000, value: 20 },
        { position: 2500 + 8000 + 6000 + 4000, value: 0 }
      ]
    },
    "fps": {
      setter: () => fpsCallback(presentationAnim, presetnationContainer),
      keyframes: [
        { position: 0, value:0 },
        { position: 2500 + 8000 + 6000 + 4000 + 12000 + 3500, value: 1 }
      ]
    }
  }
})
presentationAnim.play(presetnationContainer)


/* code animation */
  const antiAugColorAnimation = new PropJockey({
    defaultSetter: "setter.element.cssVar",
    props: {
      "--gold":     { slide: "slide.color.hex",  keyframes: [ { position: 0, value: "#ffd700"   }, { position: 5000, value: "#d0d0d0"   } ] },
      "--gold88":   { slide: "slide.color.hexa", keyframes: [ { position: 0, value: "#ffd70088" }, { position: 5000, value: "#d0d0d088" } ] },
      "--goldDark": { slide: "slide.color.hex",  keyframes: [ { position: 0, value: "#eda725"   }, { position: 5000, value: "#acacac"   } ] },
    }
  })

  const antiAugScum = () => {
    presentationAnim.stop(presetnationContainer)
    setTimeout(() => {
      presentationText.innerHTML = "You monster."
      document.body.classList.add("anti-aug-transitions")
    }, 250)
    setTimeout(() => {
      document.body.classList.add("anti-aug")
      antiAugColorAnimation.play(document.body)
    }, 1500)
  }
  const proAugHero = () => {
    presentationText.innerHTML = "The augmented are elments too.<br>#proAug"
    setTimeout(() => {
      document.body.classList.remove("anti-aug")
      antiAugColorAnimation.play(document.body, { speed: -1 })
    }, 250)
    setTimeout(() => {
      document.body.classList.remove("anti-aug-transitions")
      presentationAnim.play(presetnationContainer)
    }, 10500)
  }

  const kk = "38384040373937396665"
  let buf = ""
  document.addEventListener("keydown", (ev) => {
    buf = (buf + ev.which.toString(10)).substr(-20)
    if (buf === kk) {
      antiAugScum()
      setTimeout(proAugHero, 15000)
    }
  })
/* end code animation */

              
            
!
999px

Console