design-adj

2026-08-05 13:46:35 -07:00 · 2023-06-05 16:31:00 +02:00
parent 9fafadc6d5
commit a7b8293824
10 changed files with 72 additions and 36 deletions
@@ -15,7 +15,10 @@ import {

 <Hero size="large">
  <HeroInfo>
-    <HeroTitle>Ethereum network participation for everyone</HeroTitle>
+    <HeroTitle>
+      THE STANDARD <br />
+      FOR WEB3 COMMUNICATIONS
+    </HeroTitle>
    {/*
        <HeroDescription className={"long"}>
            Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3
@@ -23,9 +26,9 @@ import {
        </HeroDescription>
            * */}
    <HeroDescription className={'short'}>
-      Nimbus promotes client diversity and decentralization on Ethereum by
-      lowering participation barriers and reducing hardware overheads for
-      validators
+      Waku is a decentralized communications network, built for generalized
+      private and censorship-resistant messaging, supporting resource-restricted
+      environments like phones and browsers
    </HeroDescription>
    <HeroActions>
      <HeroAction href="/about" target="_blank">
@@ -37,7 +40,7 @@ import {
    </HeroActions>
  </HeroInfo>
  <HeroModel
-    modelId={'architecture04'}
+    modelId={'bust01'}
    mode={'abstract'}
    rotateSpeed={0.04}
    startY={'bottom'}
@@ -19,6 +19,7 @@
 }

 .mdx-hero-description--large {
+  @include lsd.typography('h4');
 }

 .mdx-hero-description--medium {
@@ -20,6 +20,6 @@

@include utils.responsive('lg', 'down') {
  :root {
-    --logos-hero-info-height: 340px;
+    //--logos-hero-info-height: 340px;
  }
 }
@@ -1,8 +1,15 @@
 import clsx from 'clsx'
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, useEffect } from 'react'
 import { useHero } from '../Hero/Hero.context'
 import { ScrollToBottom } from '../index'
 import './HeroInfo.scss'
+import { useScrollY } from '../../../lib/useScrollY'
+import {
+  calcHeroInfoMb,
+  calcScrollThreshold,
+  isMobile,
+  mapFloat,
+} from '../../../lib/ui.utils'

 export type HeroInfoProps = PropsWithChildren<
  React.HTMLAttributes<HTMLDivElement>
@@ -18,11 +25,22 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
 }) => {
  const ctx = useHero()
  const size = sizeProp ? sizeProp : ctx ? ctx.size : 'medium'
+  const [mb, setMb] = React.useState(0)
+  const scrollY = useScrollY()
+
+  useEffect(() => {
+    if (isMobile()) {
+      setMb(calcHeroInfoMb(scrollY))
+    }
+  }, [scrollY])

  return (
    <>
      <div
        className={clsx(className, 'mdx-hero-info', `mdx-hero-info--${size}`)}
+        style={{
+          marginBottom: `calc(100vh - var(--logos-hero-info-height) - ${mb}px)`,
+        }}
        {...(props as any)}
      >
        {children}
@@ -1,11 +1,15 @@
 import { ROTATE_SPEED } from './HeroModel.configs'
-import { LookPresetItemValues, MovementProps } from '../../../types/ui.types'
+import { MovementProps } from '../../../types/ui.types'
 import React, { useEffect, useRef } from 'react'
 import { useScrollY } from '../../../lib/useScrollY'
 import { useFrame, useThree } from '@react-three/fiber'
-import { calcRotateSpeed } from './HeroModel.utils'
 import { OrbitControls } from '@react-three/drei'
-import { isMobile, isTouchDevice } from '../../../lib/ui.utils'
+import {
+  calcScrollThreshold,
+  isMobile,
+  isTouchDevice,
+  mapFloat,
+} from '../../../lib/ui.utils'

 const lerp = (a: number, b: number, t: number) => (1 - t) * a + t * b
 let targetPos: [number, number, number] = [0, 0, 0]
@@ -56,10 +60,12 @@ export const Controls = ({
  const { camera, size } = useThree()
  const controls = useRef<any>()
  const [lockOrbit, setLockOrbit] = React.useState(false)
+  const [scale, setScale] = React.useState(1)
+  const [posY, setPosY] = React.useState(0)

  useFrame((state, delta) => {
    ref.current.rotation.y -=
-      delta * (isMobile() ? 0.1 * rotateSpeed : rotateSpeed)
+      delta * (isMobile() ? 0.6 * rotateSpeed : rotateSpeed)
  })

  useEffect(() => {
@@ -91,18 +97,13 @@ export const Controls = ({
    }
  }, [])

-  // useEffect(() => {
-  //   if (!enableZoom) return
-  //   const [deltaX, deltaY, deltaZ] = calculateCameraPosition(scrollY)
-  //
-  //   // Add the deltas to the initial positions
-  //   const newPositionX = preset.cameraPos[0] + deltaX
-  //   const newPositionY = preset.cameraPos[1] + deltaY
-  //   const newPositionZ = preset.cameraPos[2] + deltaZ
-  //
-  //   camera.position.set(newPositionX, newPositionY, newPositionZ)
-  //   camera.updateProjectionMatrix()
-  // }, [scrollY, camera])
+  useEffect(() => {
+    if (isMobile()) {
+      setScale(mapFloat(scrollY, 0, calcScrollThreshold(), 1, 0.65))
+
+      setPosY(mapFloat(scrollY, 0, calcScrollThreshold(), 0, 0.35))
+    }
+  }, [scrollY])

  useEffect(() => {
    if (!enableZoom) return
@@ -135,7 +136,7 @@ export const Controls = ({
  }, [scrollY, camera])

  return (
-    <group ref={ref} {...props}>
+    <group ref={ref} {...props} scale={scale} position-y={posY}>
      {children}
      <OrbitControls
        ref={controls}
@@ -214,21 +214,21 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [
      ],
    },
    abstract: {
-      cameraPos: [-0.04896235033638902, 0.9472082701791184, 0.5228785650143615],
+      cameraPos: [0.025758408225725123, 0.9432728632646389, 0.5085343068565109],
      cameraRot: [
-        0.09075944802968429, -0.13324364459355229, 0.012089995097095805,
+        -0.016796160047877214, 0.23199352927595504, 0.003862085219634371,
      ],
      controlsTarget: [
-        -0.006060485975867984, 0.9762180394124839, 0.20412308284554606,
+        -0.04849025797636223, 0.9379943498483801, 0.19429480114059927,
      ],
    },
    targetLook: {
-      cameraPos: [-0.09472312110216502, 0.9706051013497217, 1.2832894173829374],
+      cameraPos: [-0.0995637601904456, 0.9905193985583883, 1.2844592429465957],
      cameraRot: [
-        -0.19425365632872382, -0.10491000822068351, -0.020598661004321738,
+        -0.21489715158374015, -0.011908392248228742, -0.002599147273856083,
      ],
      controlsTarget: [
-        0.031601966631050554, 0.7390204722154392, 0.1061462404432137,
+        -0.08519853311178426, 0.7332893758986562, 0.10595091334036527,
      ],
    },
  },
@@ -88,7 +88,8 @@
  }

  .mdx-hero-model {
-    transform: translate(-20px, 0px);
+    transform: translate(-12px, 0px);
+    width: calc(100vw - 20px);
  }
  .mdx-hero-model--abstract {
  }
@@ -9,8 +9,9 @@
 }

 .mdx-hero-title--large {
-  font-size: 5.0625rem !important;
-  line-height: 5rem !important;
+  @include lsd.typography('h1');
+  //font-size: 5.0625rem !important;
+  //line-height: 5rem !important;
 }

 .mdx-hero-title--medium {
@@ -31,7 +32,9 @@
  }

  .mdx-hero-title--large {
-    font-size: 1.875rem !important;
-    line-height: 2.1rem !important;
+    //font-size: 1.875rem !important;
+    //line-height: 2.1rem !important;
+    font-size: 2.175rem !important;
+    line-height: 2.475rem !important;
  }
 }
@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import React, { HTMLProps } from 'react'
 import styles from './styles.module.scss'
 import { useScrollY } from '../../../lib/useScrollY'
+import { calcHeroInfoMb, isMobile } from '../../../lib/ui.utils'

 type TProps = {}

@@ -20,8 +21,12 @@ export const ScrollToBottom = (
        top: document.body.scrollHeight,
        behavior: 'smooth',
      })
-    ;(secondElement as HTMLElement)?.scrollIntoView?.({ behavior: 'smooth' })

+    if (isMobile()) {
+      window.scrollTo(0, secondElement.getBoundingClientRect().top - 200)
+    } else {
+      ;(secondElement as HTMLElement)?.scrollIntoView?.({ behavior: 'smooth' })
+    }
    return
  }

@@ -36,3 +36,7 @@ export const isMobile = () => {
  if (typeof window === 'undefined') return false
  return window.innerWidth < 997
 }
+
+export const calcHeroInfoMb = (sy) => {
+  return mapFloat(scrollY, 0, calcScrollThreshold(), 0, 100)
+}