start messing with 3d transforms

main/src/assets/global.pcss

@@ -4,7 +4,7 @@
 @import 'prism-themes/themes/prism-gruvbox-dark.min.css';
 
 body {
-  @apply m-0 font-sans bg-warmgray-900 text-warmgray-200;
+  @apply m-0 font-sans text-warmgray-200;
   display: grid;
   grid-template-areas: "nav" "main";
   grid-template-rows: auto 1fr;

main/src/components/Background.svelte

@@ -12,6 +12,7 @@
     left: 0;
     bottom: 0;
     right: 0;
+    background-attachment: fixed;
     background-image: linear-gradient(
       to bottom,
       #378 0,

main/src/components/Hills.svelte

@@ -51,16 +51,30 @@
   let screenWidth = 1;
   let position: number = 1 / 2;
 
+  export let pos: number;
+
   const mouseMove = (e: MouseEvent) => (position = e.clientX / screenWidth);
 </script>
 
 <svelte:window
-  bind:scrollY={scroll}
   bind:innerWidth={screenWidth}
   on:mousemove={mouseMove}
+  bind:scrollY={scroll}
 />
 
-<svg width="100%" height="192" xmlns="http://www.w3.org/2000/svg">
+<div class="clip">
+  <div class="position">
+    <div class="hills">
+      <div class="hill" style={`transform: translate3d(0, ${pos}px,-8rem)`} />
+      <div
+        class="hill"
+        style={`transform: translate3d(8rem, ${pos}px,-8rem)`}
+      />
+    </div>
+  </div>
+</div>
+
+<!--svg width="100%" height="192" xmlns="http://www.w3.org/2000/svg">
   <g transform="matrix(1, 0, 0, -1, 0, 192)">
     {#each peaks as [x, y, z]}
       <g style={`transform: translate(0, ${-scroll * (z / 2 + 1 / 4)}px)`}>
@@ -88,12 +102,47 @@
       </g>
     {/each}
   </g>
-</svg>
-
+</svg-->
 <style lang="postcss">
-  svg {
+  .clip {
     position: absolute;
+    top: 0;
     bottom: 0;
+    left: 0;
+    right: 0;
+    //clip: rect(-100%, auto, auto, auto);
+    clip-path: margin-box;
+    z-index: -10;
+  }
+
+  .position {
+    position: absolute;
+    top: 100%;
+  }
+  .hills {
+    position: fixed;
+    transform: translateY(-100%);
+    left: 0;
+    right: 0;
+    z-index: -5;
+    perspective: 24rem;
+
+    .hill {
+      border-style: solid;
+      border-width: 8rem 16rem;
+      border-top-width: 0;
+      border-color: transparent;
+      border-bottom-color: brown;
+      width: 0;
+      height: 0;
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
+  svg {
+    position: absolute;
+    //bottom: 0;
     z-index: -10;
 
     .cool {

main/src/components/Nav.svelte

@@ -3,17 +3,25 @@
   import Hills from "./Hills.svelte";
   import Background from "./Background.svelte";
 
+  import { onMount } from "svelte";
+
   export let segment: string | null;
 
   let scroll = 0;
+  let nav: HTMLElement | undefined;
+  let pos = 0;
+
+  const onScroll = () => {
+    pos = nav!.getBoundingClientRect().top;
+  };
 </script>
 
-<svelte:window bind:scrollY={scroll} />
+<svelte:window bind:scrollY={scroll} on:scroll={onScroll} />
 
-<nav>
+<nav bind:this={nav}>
   <Background />
   <Loading />
-  <Hills />
+  <Hills {pos} />
   <a
     href="/"
     title="Ha, get it?  It&rsquo;s funny because my last name is &ldquo;Shi&rdquo;."
@@ -34,12 +42,15 @@
 
 <style lang="postcss">
   nav {
-    @apply sticky -top-64 pt-64
-    text-warmgray-100
+    @apply text-warmgray-100
     transition-colors
-    overflow-x-hidden
-    items-end
-    bg-fixed z-10;
+    items-end;
+    z-index: 10;
+
+    position: sticky;
+    top: -16rem;
+    padding-top: 16rem;
+    //overflow: hidden;
 
     display: grid;
     grid-template-areas: "title small" "menu menu";

main/src/routes/__layout.svelte

@@ -19,5 +19,6 @@
       minmax(2rem, 1fr)
       minmax(32rem, 48rem)
       minmax(16rem, 1fr);
+    background-color: #1d2021;
   }
 </style>