diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index bd14bb3..3486a26 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -26,7 +26,7 @@ const config = { '@acid-info/logos-docusaurus-preset', /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */ ({ - businessUnit: 'Waku', + businessUnit: 'Nimbus', theme: { name: 'default', options: { diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index 3a2cc96..3f48247 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -13,17 +13,18 @@ import { Box, } from '../components/mdx' - + - The web3 managing standard. + Durable, decentralized data storage {/* - + Waku is a decentralized communications network that enables private, censorship-resistant messaging for web3 applications. - * */} - - Waku is a decentralized communications network + * */} + + Codex provides immutable, censorship-resistant data storage via a + censorship-resistant, permissionless and incentivized p2p network @@ -35,11 +36,12 @@ import { diff --git a/packages/docusaurus-playground/static/hero/architecture02/hi.glb b/packages/docusaurus-playground/static/hero/architecture02/hi.glb new file mode 100644 index 0000000..77d2ce7 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture02/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture02/lo.glb b/packages/docusaurus-playground/static/hero/architecture02/lo.glb new file mode 100644 index 0000000..77d2ce7 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture02/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture03/hi.glb b/packages/docusaurus-playground/static/hero/architecture03/hi.glb new file mode 100644 index 0000000..f0cdb2b Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture03/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture03/lo.glb b/packages/docusaurus-playground/static/hero/architecture03/lo.glb new file mode 100644 index 0000000..f0cdb2b Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture03/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture04/hi.glb b/packages/docusaurus-playground/static/hero/architecture04/hi.glb new file mode 100644 index 0000000..f3139c6 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture04/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture04/lo.glb b/packages/docusaurus-playground/static/hero/architecture04/lo.glb new file mode 100644 index 0000000..bebb2e7 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture04/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture05/hi.glb b/packages/docusaurus-playground/static/hero/architecture05/hi.glb new file mode 100644 index 0000000..8a925be Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture05/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture05/lo.glb b/packages/docusaurus-playground/static/hero/architecture05/lo.glb new file mode 100644 index 0000000..b8b7ddb Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture05/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture06/hi.glb b/packages/docusaurus-playground/static/hero/architecture06/hi.glb new file mode 100644 index 0000000..caaefde Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture06/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture06/lo.glb b/packages/docusaurus-playground/static/hero/architecture06/lo.glb new file mode 100644 index 0000000..caaefde Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture06/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture07/hi.glb b/packages/docusaurus-playground/static/hero/architecture07/hi.glb new file mode 100644 index 0000000..697f119 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture07/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/architecture07/lo.glb b/packages/docusaurus-playground/static/hero/architecture07/lo.glb new file mode 100644 index 0000000..697f119 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/architecture07/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/atlas/hi.glb b/packages/docusaurus-playground/static/hero/atlas/hi.glb new file mode 100644 index 0000000..0adfed0 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/atlas/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/atlas/lo.glb b/packages/docusaurus-playground/static/hero/atlas/lo.glb new file mode 100644 index 0000000..0adfed0 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/atlas/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/bust01/hi.glb b/packages/docusaurus-playground/static/hero/bust01/hi.glb new file mode 100644 index 0000000..2eedb60 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/bust01/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/bust01/lo.glb b/packages/docusaurus-playground/static/hero/bust01/lo.glb new file mode 100644 index 0000000..2eedb60 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/bust01/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/bust02/hi.glb b/packages/docusaurus-playground/static/hero/bust02/hi.glb new file mode 100644 index 0000000..00955a2 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/bust02/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/bust02/lo.glb b/packages/docusaurus-playground/static/hero/bust02/lo.glb new file mode 100644 index 0000000..e67bfe1 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/bust02/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/bust03/hi.glb b/packages/docusaurus-playground/static/hero/bust03/hi.glb new file mode 100644 index 0000000..77b847e Binary files /dev/null and b/packages/docusaurus-playground/static/hero/bust03/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/bust03/lo.glb b/packages/docusaurus-playground/static/hero/bust03/lo.glb new file mode 100644 index 0000000..a449f7d Binary files /dev/null and b/packages/docusaurus-playground/static/hero/bust03/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/discobolus/hi.glb b/packages/docusaurus-playground/static/hero/discobolus/hi.glb new file mode 100644 index 0000000..ea2ec28 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/discobolus/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/discobolus/lo.glb b/packages/docusaurus-playground/static/hero/discobolus/lo.glb new file mode 100644 index 0000000..f3c80c0 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/discobolus/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/flower/hi.glb b/packages/docusaurus-playground/static/hero/flower/hi.glb new file mode 100644 index 0000000..0d94412 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/flower/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/flower/lo.glb b/packages/docusaurus-playground/static/hero/flower/lo.glb new file mode 100644 index 0000000..77d2ce7 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/flower/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/hand/hi.glb b/packages/docusaurus-playground/static/hero/hand/hi.glb new file mode 100644 index 0000000..5492ee5 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/hand/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/hand/lo.glb b/packages/docusaurus-playground/static/hero/hand/lo.glb new file mode 100644 index 0000000..5492ee5 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/hand/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/vase01/hi.glb b/packages/docusaurus-playground/static/hero/vase01/hi.glb new file mode 100644 index 0000000..30f50f0 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/vase01/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/vase01/lo.glb b/packages/docusaurus-playground/static/hero/vase01/lo.glb new file mode 100644 index 0000000..30f50f0 Binary files /dev/null and b/packages/docusaurus-playground/static/hero/vase01/lo.glb differ diff --git a/packages/docusaurus-playground/static/hero/venus/hi.glb b/packages/docusaurus-playground/static/hero/venus/hi.glb new file mode 100644 index 0000000..a9fe31e Binary files /dev/null and b/packages/docusaurus-playground/static/hero/venus/hi.glb differ diff --git a/packages/docusaurus-playground/static/hero/venus/lo.glb b/packages/docusaurus-playground/static/hero/venus/lo.glb new file mode 100644 index 0000000..2df429a Binary files /dev/null and b/packages/docusaurus-playground/static/hero/venus/lo.glb differ diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss index e39c25f..99e3ef6 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.scss @@ -6,6 +6,7 @@ position: relative; z-index: -2; font-weight: 100 !important; + text-shadow: 1px 1px 6px rgba(var(--lsd-surface-primary), 1); } .mdx-hero-description--small { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx index a0eb858..840b92f 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/Controls.tsx @@ -1,62 +1,53 @@ import { ROTATE_SPEED } from './HeroModel.configs' -import { MovementProps } from '../../../types/ui.types' +import { LookPresetItemValues, 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 { isTouchDevice } from '../../../lib/ui.utils' - -class Vector3 { - x: number - y: number - z: number - - constructor(x: number, y: number, z: number) { - this.x = x - this.y = y - this.z = z - } - - subtract(v: Vector3) { - return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z) - } - - add(v: Vector3) { - return new Vector3(this.x + v.x, this.y + v.y, this.z + v.z) - } - - multiplyScalar(s: number) { - return new Vector3(this.x * s, this.y * s, this.z * s) - } - - clone() { - return new Vector3(this.x, this.y, this.z) - } - - toArray() { - return [this.x, this.y, this.z] - } -} +import { isMobile, isTouchDevice } 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] -function calculateCameraPosition(scrollY: number): [number, number, number] { - const baseXZ = -1.6 // Base x and z component at scrollY = 0 - const baseY = 4.04 // Base y component at scrollY = 0 - const rateXZ = -0.01 // Rate of change for x and z components - const rateY = 0.00185 // Rate of change for y component - const deltaX = baseXZ + rateXZ * scrollY - baseXZ - const deltaY = baseY + rateY * scrollY - baseY - const deltaZ = baseXZ + rateXZ * scrollY - baseXZ - return [deltaX, deltaY, deltaZ] +// function calculateCameraPosition(scrollY: number): [number, number, number] { +// const baseXZ = -1.6 // Base x and z component at scrollY = 0 +// const baseY = 4.04 // Base y component at scrollY = 0 +// const rateXZ = -0.01 // Rate of change for x and z components +// const rateY = 0.00185 // Rate of change for y component +// const deltaX = baseXZ + rateXZ * scrollY - baseXZ +// const deltaY = baseY + rateY * scrollY - baseY +// const deltaZ = baseXZ + rateXZ * scrollY - baseXZ +// return [deltaX, deltaY, deltaZ] +// } + +const MAX_SCROLL = 400 + +function calculateVector( + scrollY: number, + scrollYMax: number, + preset: number[], + target: number[], +): [number, number, number] { + // Calculate the lerp factor based on the scroll position + const t = scrollY / scrollYMax + + const newVector = [0, 0, 0] + for (let i = 0; i < 3; i++) { + // Perform a lerp between the preset and target for each component + // @ts-ignore + newVector[i] = lerp(preset[i], target[i], t) + } + + return newVector as [number, number, number] } + export const Controls = ({ rotateSpeed = ROTATE_SPEED, enableZoom = true, enableRotateOnScroll = true, preset, + targetPreset, children, ...props }: MovementProps) => { @@ -64,12 +55,14 @@ export const Controls = ({ const scrollY = useScrollY() const { camera, size } = useThree() const controls = useRef() + const [lockOrbit, setLockOrbit] = React.useState(false) useFrame((state, delta) => { const speed = enableRotateOnScroll ? calcRotateSpeed(scrollY, rotateSpeed) : rotateSpeed - ref.current.rotation.y += delta * speed + + ref.current.rotation.y += delta * (isMobile() ? 0.1 * speed : speed) }) useEffect(() => { @@ -95,26 +88,53 @@ export const Controls = ({ if (isTouchDevice()) { controls.current.minPolarAngle = Math.PI / 2 controls.current.maxPolarAngle = Math.PI / 2 + setTimeout(() => { + setLockOrbit(true) + }, 1000) } }, []) + // 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 (!enableZoom) return + if (!targetPreset) return + // we only apply zoom effect if targetPreset is defined - const [deltaX, deltaY, deltaZ] = calculateCameraPosition(scrollY) + const newPos = calculateVector( + scrollY, + MAX_SCROLL, + preset.cameraPos, + targetPreset.cameraPos, + ) + const newRot = calculateVector( + scrollY, + MAX_SCROLL, + preset.cameraRot, + targetPreset.cameraRot, + ) + const newTarget = calculateVector( + scrollY, + MAX_SCROLL, + preset.controlsTarget, + targetPreset.controlsTarget, + ) - // 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.position.set(...newPos) + camera.rotation.set(...newRot) + controls.current.target.set(...newTarget) camera.updateProjectionMatrix() - - // const scale = mapFloat(scrollY, 0, calcScrollThreshold(), 1, 0.5); - // const initialPosition = ref.current.position.clone(); - // ref.current.scale.set(scale, scale, scale); - // ref.current.position.y += 0.0001 * scale; }, [scrollY, camera]) return ( @@ -123,7 +143,10 @@ export const Controls = ({ ) diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts index 81a6244..a9bbc35 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.configs.ts @@ -38,7 +38,7 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'architecture01', simple: { - cameraPos: [0, 0, 0], + cameraPos: [6.898858137575106, 4.772099506970454, -3.1821660872368627], cameraRot: [0, 0, 0], controlsTarget: [0, 0, 0], }, @@ -51,7 +51,7 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'architecture02', simple: { - cameraPos: [0, 0, 0], + cameraPos: [6.898858137575106, 4.772099506970454, -3.1821660872368627], cameraRot: [0, 0, 0], controlsTarget: [0, 0, 0], }, @@ -64,7 +64,7 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'architecture03', simple: { - cameraPos: [0, 0, 0], + cameraPos: [6.898858137575106, 4.772099506970454, -3.1821660872368627], cameraRot: [0, 0, 0], controlsTarget: [0, 0, 0], }, @@ -77,33 +77,50 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'architecture04', simple: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [2.263701079468784, 0.6448855513810133, -1.1446840846564066], + cameraRot: [-2.3314571674867457, 0.984733935216302, 2.422537357648925], + controlsTarget: [ + 0.6593539926170827, -0.1266335925222026, -0.4104215479626598, + ], }, abstract: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [2.299135943394893, 0.8656851576290204, -0.7027825038010787], + cameraRot: [-1.916700195994318, 1.0755068798100078, 1.959565308882676], + controlsTarget: [ + 0.6048467950344667, 0.0046384989689828805, -0.3924669053385349, + ], + }, + targetLook: { + cameraPos: [1.2775067913826557, 1.3342390202957728, -3.123518037652026], + cameraRot: [-2.6905895797482686, 0.32826936260575107, 2.9867046984290964], + controlsTarget: [ + 0.27965301570358253, 0.05724884619536415, -0.48670374558576035, + ], }, }, { modelId: 'architecture05', simple: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [2.783916402572475, 0.8560027544276005, 2.7596737879252995], + cameraRot: [ + -0.16075199314229247, 0.8310730403125255, 0.11920589473418516, + ], + controlsTarget: [ + -0.13283501637059433, 0.4299574965789378, 0.13221598116033606, + ], }, abstract: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [1.1470783184950044, 0.23878712525763962, 1.4621079231748313], + cameraRot: [0.0781563760261837, 0.753617521461716, -0.05353888616056665], + controlsTarget: [ + -0.10475467093508074, 0.34294485241818873, 0.1321388746243302, + ], }, }, { modelId: 'architecture06', simple: { - cameraPos: [0, 0, 0], + cameraPos: [6.898858137575106, 4.772099506970454, -3.1821660872368627], cameraRot: [0, 0, 0], controlsTarget: [0, 0, 0], }, @@ -116,7 +133,7 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'architecture07', simple: { - cameraPos: [0, 0, 0], + cameraPos: [6.898858137575106, 4.772099506970454, -3.1821660872368627], cameraRot: [0, 0, 0], controlsTarget: [0, 0, 0], }, @@ -129,22 +146,34 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'atlas', simple: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [-0.05747471409961126, 1.1561369169508278, 0.2934743027588207], + cameraRot: [ + 0.13523803197626882, -0.45004875426349367, 0.05912213357583956, + ], + controlsTarget: [ + -0.03052411570622545, 1.1636581998026059, 0.23819862568800665, + ], }, abstract: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [-0.05747471409961126, 1.1561369169508278, 0.2934743027588207], + cameraRot: [ + 0.13523803197626882, -0.45004875426349367, 0.05912213357583956, + ], + controlsTarget: [ + -0.03052411570622545, 1.1636581998026059, 0.23819862568800665, + ], }, }, { modelId: 'bust01', simple: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [-0.6865425525854476, 0.9101267370893742, 0.6192780523604176], + cameraRot: [ + -0.39660492694232563, -0.962317303218196, -0.3309893133032883, + ], + controlsTarget: [ + 0.008888669206507317, 0.7229784900626205, 0.17240700391361993, + ], }, abstract: { cameraPos: [0, 0, 0], @@ -155,20 +184,29 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'bust02', simple: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [-1.4566842350476759, 1.3228318382357354, 0.3529107224325513], + cameraRot: [-0.7212161402570414, -1.161345100016008, -0.6787189972933454], + controlsTarget: [ + 0.13759890903780844, 0.8659810364239205, -0.1666973840261623, + ], }, + // TODO add option for scale on scroll abstract: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [ + -0.3488062269042841, 1.3111379960412364, 0.033354968216059155, + ], + cameraRot: [ + -0.7212161402570405, -1.1613451000160089, -0.6787189972933446, + ], + controlsTarget: [ + 0.2227218365835886, 1.147363414950647, -0.15291722311874764, + ], }, }, { modelId: 'bust03', simple: { - cameraPos: [0, 0, 0], + cameraPos: [6.898858137575106, 4.772099506970454, -3.1821660872368627], cameraRot: [0, 0, 0], controlsTarget: [0, 0, 0], }, @@ -181,9 +219,13 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'discobolus', simple: { - cameraPos: [0, 0, 0], - cameraRot: [0, 0, 0], - controlsTarget: [0, 0, 0], + cameraPos: [0.9321278495515372, 1.1243517299151449, 1.0437243089401456], + cameraRot: [ + -0.05449607597993083, 0.5948614803388417, 0.030560026854436973, + ], + controlsTarget: [ + 0.17851738112859908, 1.0636847191934362, -0.06840974825492452, + ], }, abstract: { cameraPos: [0, 0, 0], @@ -220,7 +262,26 @@ export const OBJECTS_PRESETS: LookPresetItem[] = [ { modelId: 'venus', simple: { - cameraPos: [0, 0, 0], + cameraPos: [-0.33960257176056113, 1.3731114512210183, 0.5843851218219973], + cameraRot: [ + 0.19165735697369993, -0.4160172409280952, 0.07825504508386714, + ], + controlsTarget: [ + 0.1766806722765915, 1.595709756901872, -0.5627979418735829, + ], + }, + abstract: { + cameraPos: [-0.2543046264127692, 1.591894996466899, 0.21161310295797725], + cameraRot: [0.17078534527374745, -0.637502107706861, 0.10229142114685894], + controlsTarget: [ + 0.2766995177502174, 1.7137410300309837, -0.49488235116491014, + ], + }, + }, + { + modelId: 'flower', + simple: { + cameraPos: [-0.33960257176056113, 1.3731114512210183, 0.5843851218219973], cameraRot: [0, 0, 0], controlsTarget: [0, 0, 0], }, diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss index a77b528..b2dbf98 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss @@ -2,7 +2,6 @@ .mdx-hero-model { --mdx-hero-model-wrapper-scale: 1; - width: 100vw; transform: translateX( calc( @@ -13,7 +12,6 @@ ) ); position: absolute; - top: calc(var(--logos-hero-info-height) - 10px); z-index: 0; .mdx-hero-model--inner { @@ -28,6 +26,18 @@ } } +.mdx-hero-model--top { + top: 0; +} + +.mdx-hero-model--bottom { + top: calc(var(--logos-hero-info-height) - 10px); + .mdx-hero-model--shade { + bottom: 10vh; + height: 40vh; + } +} + .mdx-hero-model--simple { } @@ -49,8 +59,9 @@ .mdx-hero-model--shade { width: 100%; - height: 60vh; + height: 30vh; position: absolute; + background: linear-gradient( 0deg, rgb(var(--lsd-surface-primary)) 37%, @@ -63,13 +74,27 @@ @include utils.responsive('lg', 'down') { .mdx-hero-model--simple { - --mdx-hero-model-wrapper-scale: 0.8; } + + .mdx-hero-model--top { + top: calc(calc(var(--logos-hero-info-height) / 1) - 10px); + } + + .mdx-hero-model--bottom { + } + + .mdx-hero-model--ascii { + } + .mdx-hero-model { - transform: unset; + transform: translate(-20px, 0px); } .mdx-hero-model--abstract { - transform: translate(-20px, 0px); + } + + .mdx-hero-model--shade { + height: 90vh !important; + bottom: 0vh; } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx index d94834e..9fa70ab 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.tsx @@ -19,6 +19,7 @@ import { calcScrollThreshold, mapFloat } from '../../../lib/ui.utils' import { AsciiRenderer } from './Ascii' import { Controls } from './Controls' import './HeroModel.scss' +import { useScrollY } from '../../../lib/useScrollY' export type HeroModelProps = React.HTMLAttributes & { modelId?: string @@ -26,6 +27,7 @@ export type HeroModelProps = React.HTMLAttributes & { mode?: 'simple' | 'abstract' asciiConfig?: AsciiConfigs rotateSpeed?: number + startY?: 'top' | 'bottom' enableZoom?: boolean enableRotateOnScroll?: boolean @@ -46,7 +48,7 @@ const useLookPreset = ( } const getInitialY = (mode: 'abstract' | 'simple'): number => { - return mode === 'abstract' ? 0 : window.innerWidth > 997 ? -200 : -140 + return mode === 'abstract' ? 0 : window.innerWidth > 997 ? -100 : 0 } export const HeroModel = (props: HeroModelProps) => { @@ -61,13 +63,14 @@ export const HeroModel = (props: HeroModelProps) => { enableZoom, enableRotateOnScroll, withParallelEffect = true, + startY = 'bottom', ...divProps } = props const preset = useLookPreset(mode, presetProp, modelId) - // const index = 0; + // const index = 4; // const preset = OBJECTS_PRESETS[index] ? OBJECTS_PRESETS[index] : defaultPresets; - // const scrollY = useScrollY() + const scrollY = useScrollY() return (
{ 'mdx-hero-model', 'mdx-hero-model--ascii', `mdx-hero-model--${mode}`, + `mdx-hero-model--${startY}`, )} {...divProps} > @@ -110,6 +114,7 @@ export const HeroModel = (props: HeroModelProps) => { { scrollY, 0, calcScrollThreshold() * RESIZE_SPEED_FACTOR, - 0.2, + 1, 1, ), }} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss index afa05b5..9652c34 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroTitle/HeroTitle.scss @@ -3,7 +3,8 @@ .mdx-hero-title { font-weight: 300 !important; - z-index: -2; + z-index: 1; + text-shadow: 0px 0px 6px rgba(var(--lsd-surface-primary), 0.5); } .mdx-hero-title--large { diff --git a/packages/logos-docusaurus-theme/src/client/types/ui.types.ts b/packages/logos-docusaurus-theme/src/client/types/ui.types.ts index 11d64c2..53b6603 100644 --- a/packages/logos-docusaurus-theme/src/client/types/ui.types.ts +++ b/packages/logos-docusaurus-theme/src/client/types/ui.types.ts @@ -21,6 +21,7 @@ export type LookPresetItem = { modelId: string simple: LookPresetItemValues abstract: LookPresetItemValues + targetLook?: LookPresetItemValues } export type MovementProps = { @@ -28,6 +29,7 @@ export type MovementProps = { enableZoom?: boolean enableRotateOnScroll?: boolean preset: LookPresetItemValues + targetPreset?: LookPresetItemValues } & GroupProps export type AsciiConfigs = {