Bricks: sticky 300SL

tmunz · Nov 1, 2024 · 2a45f3f · 2a45f3f
1 parent 1617efa
commit 2a45f3f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 30 deletions.
diff --git a/src/app/content/bricks/Bricks.tsx b/src/app/content/bricks/Bricks.tsx
@@ -14,7 +14,8 @@ import { Mb300slContent } from './mb300sl/Mb300slContent';
 
 const SECTIONS = [
   'empty',
-  '',
+  undefined /* 300 SL  2 height*/,
+  undefined,
   < View style={{ height: 300 }}>
     <color attach="background" args={["lightblue"]} />
     <ambientLight intensity={0.5} />
@@ -86,16 +87,18 @@ export const Bricks = () => {
       }}
     >
       {SECTIONS.map((section, i) => {
-        return <section key={i} style={{ height: '100vh', overflow: 'hidden', position: 'relative' }}>{
-          (i === 1) ?
-            <>
-              <Mb300slContent />
-              <View style={{ height: '100%', width: '100vw', position: 'absolute', top: 0, left: 0 }}>
-                <Mb300slScroll transformations={SCROLL_STATES.mb300sl} progress={scroll} animationTrigger={[MB_300SL_TRIGGER[0] - 1 / L, MB_300SL_TRIGGER[1] + 1 / L]} />
-              </View>
-            </>
-            : section
-        }</section>
+        return (i === 1) ?
+          <section key={i} style={{ height: '200vh', overflow: 'hidden' }}>
+            <View style={{ width: '100vw', height: '100vh', position: 'sticky', top: 0 }}>
+              <Mb300slScroll transformations={SCROLL_STATES.mb300sl} progress={scroll} animationTrigger={[MB_300SL_TRIGGER[0] - 1 / L, MB_300SL_TRIGGER[1] + 1 / L]} />
+            </View>
+            {/* <Mb300slContent /> */}
+          </section>
+          :
+          (i === 2) ? null :
+            <section key={i} style={{ height: '100vh' }}>{
+              section
+            }</section>
       })}
 
       {/**************************************** overlay *******************************************/}

diff --git a/src/app/content/bricks/brick/BrickScroll.tsx b/src/app/content/bricks/brick/BrickScroll.tsx
@@ -10,7 +10,7 @@ export function BrickScroll({ transformations, progress }: { transformations: Tr
 
   useFrame(() => {
     if (ref.current) {
-      transformationAnimator.apply(ref.current, progress, 0.92);
+      transformationAnimator.apply(ref.current, progress, 0.82, 0.92);
     }
   });
 

diff --git a/src/app/content/bricks/mb300sl/Mb300slScroll.tsx b/src/app/content/bricks/mb300sl/Mb300slScroll.tsx
@@ -30,6 +30,6 @@ export function Mb300slScroll({ transformations, progress, animationTrigger }: {
 
 
   return (
-    <CarShow ref={carShowRef} Model={Mb300sl} animate={animate} quality={Quality.HIGH} controls={true} />
+    <CarShow ref={carShowRef} Model={Mb300sl} animate={animate} quality={Quality.HIGH} controls={false} />
   );
 };
diff --git a/src/assets/font/montserrat/montserrat-v26-latin-900.woff2 b/src/assets/font/montserrat/montserrat-v26-latin-900.woff2
diff --git a/src/assets/font/montserrat/stylesheet.css b/src/assets/font/montserrat/stylesheet.css
@@ -1,20 +1,27 @@
 @font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 200;
-    src: url('./montserrat-v26-latin-200.woff2') format('woff2');
-  }
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 200;
+  src: url('./montserrat-v26-latin-200.woff2') format('woff2');
+}
 
-  @font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    src: url('./montserrat-v26-latin-regular.woff2') format('woff2');
-  }
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./montserrat-v26-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./montserrat-v26-latin-500.woff2') format('woff2');
+}
 
-  @font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 500;
-    src: url('./montserrat-v26-latin-500.woff2') format('woff2');
-  }
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 900;
+  src: url('./montserrat-v26-latin-900.woff2') format('woff2');
+}