@realsee/vreo 0.2.0-alpha.6 → 0.2.0-alpha.9

package/resources/Player/custom/SpatialScenePanel/index.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { Five } from '@realsee/five'
-import { Raycaster, Vector3 } from 'three'
+import * as THREE from 'three'
+import { Object3D, Raycaster, Vector3 } from 'three'
 import { tweenProgress } from '@realsee/dnalogel/shared-utils/animationFrame/BetterTween'
 import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '@realsee/dnalogel/plugins/CSS3DRenderPlugin'
 
 import { VreoKeyframe, VreoKeyframeEnum } from '../../../typings/VreoUnit'
 import { CustomVreoKeyframeProps } from '../../typings'
 
+// __debug__
 // const mockData: SpatialScenePanelData = {
 //   customType: 'SpatialScenePanel',
 //   "stateList": [
@@ -66,6 +68,7 @@ const searchV1 = ({ five, dom }: SearchParams) => {
   const [intersect] = five.model.intersectRaycaster(new Raycaster(cameraPosition, cameraDirection))
   const point = five.project2d(intersect.point)
 
+  const widescreen = window.innerWidth > 560 ? true : false
   // const width = dom!.clientWidth
   const height = dom!.clientHeight
   dom!.style.left = point!.x + 'px'
@@ -79,8 +82,8 @@ const searchV1 = ({ five, dom }: SearchParams) => {
   const rightBottom = new Vector3(right, bottom)
 
   const points = [leftBottom, rightBottom, rightTop, leftTop].map((point) => {
-    point.setX((point.x / window.innerWidth) * 2 - 1.25)
-    point.setY(-(point.y / window.innerHeight) * 2 + 1)
+    point.setX((point.x / window.innerWidth) * 2 - (widescreen ? 1.25: 1.75))
+    point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35: 1.125))
     point.setZ(0.5)
     return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2)
   })
@@ -89,7 +92,8 @@ const searchV1 = ({ five, dom }: SearchParams) => {
   // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
   // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
 
-  const ratio = leftBottom.distanceTo(rightBottom) / 150
+  // 判断是手机 150
+  const ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120)
   return { points, ratio }
 }
 
@@ -98,6 +102,7 @@ const searchV1 = ({ five, dom }: SearchParams) => {
  * @returns
  */
 export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
   const ref = React.useRef<HTMLDivElement>(null)
   const panelRef = React.useRef<HTMLDivElement | null>(null)
   const rendererRef = React.useRef<CSS3DRenderPluginExportType>(CSS3DRenderPlugin(props.five))
@@ -123,16 +128,19 @@ export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
       const { container, dispose, css3DObject, render } =
         rendererRef.current.create3DDomContainer(points, { ratio, autoRender: false }) || {}
 
+      Object.assign(window, { $css3DObject: css3DObject })
       if (!container) return
 
       ReactDOM.render(<Panel ref={(ref) => (panelRef.current = ref)} data={data} />, container)
       const startRotateY = -(Math.PI * 2) / 9
       let lastRotateY = 0
+    
       tweenProgress(1000)
         .onUpdate(({ progress }) => {
           const needRotateY = (Math.PI / 90) * 11 * progress
           const rotateY = needRotateY - lastRotateY
           css3DObject?.rotateY(rotateY)
+          // css3DObject?.rotateZ
           lastRotateY = needRotateY
         })
         .onStart(() => {
@@ -143,30 +151,70 @@ export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
           panelRef.current?.classList.add('show')
         })
         .play()
+
+    // Object.assign(window, {  $dispose: () => {
+    //   panelRef.current?.classList.add('hide')
+    //   setTimeout(() => dispose?.(), 1500)
+    // } })
+
       const { start, end } = keyframe
 
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         panelRef.current?.classList.add('hide')
-        setTimeout(() => dispose?.(), 1500)
+        timeoutRef.current = setTimeout(() => {
+          dispose?.()
+          timeoutRef.current = null
+        }, 1500)
       }, end - start)
     }
 
-    // Object.assign(window, { $callback: callback })
+    Object.assign(window, { $callback: callback })
+
+    // setTimeout(() => {callback()}, 8000)
     props.subscribe.on(VreoKeyframeEnum.Custom, callback)
 
     return () => {
       props.subscribe.off(VreoKeyframeEnum.Custom, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
     }
   }, [])
 
   return <div className="vreo-SpatialScenePanel" ref={ref}></div>
 }
 
+/** 背景动画：控制延迟 */
+function SpatialScenePanelBg() {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  React.useEffect(() => {
+    if (!ref.current) return
+
+    const listener = () => {
+      ref.current?.setAttribute('class', 'SpatialScenePanel-bg')
+
+      timeoutRef.current = setTimeout(() => {
+        ref.current?.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation')
+        timeoutRef.current = null
+      }, 3000)
+    }
+
+    ref.current.addEventListener('animationend', listener)
+
+    return () => {
+      if (ref.current) ref.current.removeEventListener('animationend', listener)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
+  return <div ref={ref} className="SpatialScenePanel-bg SpatialScenePanel-bg--animation"></div>
+}
+
 const Panel = React.forwardRef(
   (props: { data: SpatialScenePanelData }, myRef: React.LegacyRef<HTMLDivElement> | undefined) => (
     <div className="SpatialScenePanel" ref={myRef}>
       <div className="SpatialScenePanel-show-area">
-        <div className="SpatialScenePanel-bg"></div>
+        <SpatialScenePanelBg />
         <div className="SpatialScenePanel-header">
           <div className="SpatialScenePanel-title">{props.data?.title}</div>
           <div className="SpatialScenePanel-temperature">{props.data?.temperature}℃</div>
@@ -186,3 +234,31 @@ const Panel = React.forwardRef(
     </div>
   )
 )
+
+
+// export function SpatialScenePanel() {
+//   // const data = mockData
+
+//   return (
+//     <div className="SpatialScenePanel" >
+//     <div className="SpatialScenePanel-show-area">
+//       <SpatialScenePanelBg />
+//       <div className="SpatialScenePanel-header">
+//         <div className="SpatialScenePanel-title">{data?.title}</div>
+//         <div className="SpatialScenePanel-temperature">{data?.temperature}℃</div>
+//       </div>
+//       <div className="SpatialScenePanel-body">
+//         {data?.stateList?.map((state, index) => (
+//           <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
+//             <img className="SpatialScenePanel-icon" src={state.icon}></img>
+//             <div className="SpatialScenePanel-text">{state.text}</div>
+//             <div className="SpatialScenePanel-dot"></div>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+
+//     <div className="SpatialScenePanel-disappear-area"></div>
+//   </div>
+//   )
+// }

package/resources/Player/index.tsx

@@ -4,7 +4,7 @@ import { Five, Subscribe } from '@realsee/five'
 
 import { App } from './App'
 import { Controller, ControllerContext } from './Controller'
-import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
+import { CameraMovementData, VreoKeyframeEnum, VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 import { reaction } from 'mobx'
 import { Drawer } from './modules/Drawer'
 import { PlayerConfigs } from './typings'
@@ -69,7 +69,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     )
   }
 
-  async load(vreoUnit: VreoUnit, currentTime = 0) {
+  async load(vreoUnit: VreoUnit, currentTime = 0, preload = false) {
     if (!this.controller.visible) {
       this.controller.setVisible(true)
       // 延迟 500ms 规避跟 DOM 动画冲突
@@ -86,6 +86,38 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     this.controller.vreoUnit = vreoUnit
     this.controller.videoInstance?.pause()
 
+    // 预载逻辑
+    // 是否降低图片分辨率
+    if (this.$five.imageOptions.size && this.configs.imageOptions?.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
+      this.$five.imageOptions.size = this.configs.imageOptions.size
+    }
+    
+    // 预载数据中的点位
+    if (preload || (preload === undefined && this.configs.autoPreload)) {
+      const panoIndexMap = vreoUnit.keyframes.filter((vreoKeyframe) => {
+        if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
+          return false
+        }
+  
+        const data = vreoKeyframe.data as CameraMovementData
+        if (data.panoIndex === undefined) {
+          return false
+        }
+        return true
+      }).reduce((accu: Record<number, boolean>, curr) => {
+        const panoIndex = curr.data.panoIndex as number
+        if (!accu[panoIndex]) {
+          accu[panoIndex] = true
+        }
+        return accu
+      }, {})
+  
+      const panoIndexs = Object.keys(panoIndexMap)
+      for (let i = 0; i < panoIndexs.length; i++) {
+        await this.$five.preloadPano(Number(panoIndexs[i]))
+      }
+    }
+    
     // 新数据载入就绪
     this.emit('loaded', vreoUnit)
     if (vreoUnit.video.url) {

package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts

@@ -64,6 +64,7 @@ const cacheInstance: {
 
 export interface VideoAgentMeshOptions {
   videoInstance?: HTMLVideoElement
+  audioInstance?: HTMLAudioElement
 }
 
 /**
@@ -134,10 +135,9 @@ export class VideoAgentMesh extends THREE.Mesh {
     this.freeze = false
     this.paused = true
 
-    {
+    if (!options.audioInstance) {
       if (cacheInstance.audioInstance) {
         this.audioInstance = cacheInstance.audioInstance
-
       } else {
         const audioInstance = document.createElement('audio')
         audioInstance.crossOrigin = ''
@@ -151,7 +151,8 @@ export class VideoAgentMesh extends THREE.Mesh {
         this.audioInstance = audioInstance
         cacheInstance.audioInstance = audioInstance
       }
-
+    } else {
+      this.audioInstance = options.audioInstance
     }
 
     makeObservable(this, { paused: observable })

package/resources/Player/modules/VideoAgent/VideoAgentScene.ts

@@ -9,7 +9,7 @@ export class VideoAgentScene {
   renderer = new THREE.WebGLRenderer({ alpha: true })
   container: HTMLElement
 
-  constructor(container: HTMLElement, needRender = true) {
+  constructor(container: HTMLElement, needRender = true, options: { videoInstance?: HTMLVideoElement, audioInstance?: HTMLAudioElement } = {}) {
     this.container = container
     this.camera.position.set(0, 0, 10)
     this.camera.lookAt(0, 0, 0)
@@ -22,7 +22,7 @@ export class VideoAgentScene {
     this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio)
     domElement.setAttribute('style', `width: ${state.width}px;height: ${state.height}px;`)
 
-    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1)
+    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options)
     if (needRender) {
       container.append(domElement)
       this.scene.add(this.videoAgentMesh)

package/resources/Player/modules/VideoAgent/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { useController } from '../../hooks'
+import { VideoAgentMeshOptions } from './VideoAgentMesh'
 import { VideoAgentScene } from './VideoAgentScene'
 
-export function VideoAgent(props: { onClick?: () => void }) {
+export function VideoAgent(props: { onClick?: () => void; options?: VideoAgentMeshOptions }) {
   const ref = React.useRef<HTMLDivElement>(null)
   const controller = useController()
 
@@ -12,7 +13,7 @@ export function VideoAgent(props: { onClick?: () => void }) {
       console.warn('"VideoAgentScene" 重复初始化，已被过滤 ...')
       return
     }
-    const videoAgentScene = new VideoAgentScene(ref.current)
+    const videoAgentScene = new VideoAgentScene(ref.current, true, props.options || {})
     controller.videoAgentScene = videoAgentScene
 
     return () => {

package/resources/Player/modules/keyframes/CameraMovement/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CameraMovementPlugin } from '../../../../fivePlugins/CameraMovementPlugin'
-import { CameraMovementEffect, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
+import { CameraMovementEffect, MoveArgs, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
 import { CameraMovementData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 import { useController, useFiveInstance } from '../../../hooks'
 
@@ -18,9 +18,13 @@ export function CameraMovement() {
       const cameraMovementData = data as CameraMovementData
       const effect = cameraMovementData.effect
       if (effect === CameraMovementEffect.Rotate) {
-        ref.current.rotate(data as RotateArgs, end - start)
+        await ref.current.rotate(data as RotateArgs, end - start)
+      } else if (effect === CameraMovementEffect.Move) {
+        await ref.current.move(data as MoveArgs, end - start)
+      } else if (cameraMovementData.panoIndex !== undefined && cameraMovementData.panoIndex !== five.panoIndex) {
+        await ref.current.move(data as MoveArgs, end - start)
       } else {
-        ref.current.move(data, end - start)
+        await ref.current.rotate(data as RotateArgs, end - start)
       }
     }
 

package/resources/Player/modules/keyframes/UpdateVRPanorama/index.tsx

@@ -6,49 +6,52 @@ import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../.
 export function UpdateVRPanorama() {
   const controller = useController()
   const five = useFiveInstance()
-  const rawRef = React.useRef<string[] | null>(null)
-  const workRef = React.useRef<Work | null>(null)
+  const deafultWorkRef = React.useRef<string[] | null>(null)
+  const updateWorkRef = React.useRef<Work | null>(null)
 
   const restoreCallback = React.useCallback(() => {
-    if (rawRef.current) {
-      const work = parseWork(rawRef.current)
+
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
       five.load(work)
     }
    
-    workRef.current = null
+    updateWorkRef.current = null
   }, [])
 
   const pausedCallback = React.useCallback(() => {
-    if (rawRef.current) {
-      const work = parseWork(rawRef.current)
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
+      Object.assign(window, {$rawWork: work})
       five.load(work)
     }
   }, [])
 
   const playingCallback = React.useCallback(() => {
-    if (!workRef.current) {
+    if (!updateWorkRef.current) {
       return
     }
-    five.load(workRef.current)
+    five.load(updateWorkRef.current)
   }, [])
 
   React.useEffect(() => {
     const callback = (keyframe: VreoKeyframe) => {
-      if (!rawRef.current) {
-        rawRef.current = five.work.raw.works
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works
       }
 
       const data = keyframe.data as UpdateVRPanoramaData
 
       // 如果数据中有新 work 数据，则直接载入
       if (data.work) {
-        workRef.current = parseWork(data.work)
-        five.load(workRef.current)
+        updateWorkRef.current = parseWork(data.work)
+        five.load(updateWorkRef.current)
         return
       }
 
       const lastRawWork = five.work?.raw.works[0]
 
+
       // 动态场景：不提供完成的签名数据，需重新整理
       if (data.dynamic_scene && !data.panorama) {
         const lastWork = JSON.parse(lastRawWork)
@@ -59,8 +62,10 @@ export function UpdateVRPanorama() {
         delete data.dynamic_scene
       }
 
-      workRef.current = parseWork([lastRawWork, data])
-      five.load(workRef.current)
+      Object.assign(window, {$work1: JSON.parse(lastRawWork), $work2: data, parseWork: parseWork})
+
+      updateWorkRef.current = parseWork([lastRawWork, data])
+      five.load(updateWorkRef.current)
     }
 
     controller.on(VreoKeyframeEnum.UpdateVRPanorama, callback)

package/resources/Player/typings.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { Subscribe, Five } from '@realsee/five';
 
 import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit'
+import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 
 export interface PlayerConfigs {
   containter?: ReactDOM.Container
@@ -15,11 +16,15 @@ export interface PlayerConfigs {
     videoEffect?: HTMLVideoElement
     modelTVVideo?: HTMLVideoElement
   }
+
+  videoAgentMeshOptions?: VideoAgentMeshOptions
   /**
    * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
    */
   customPanelChildren?: ReactNode
   customKeyframes?: React.FC<CustomVreoKeyframeProps>[]
+  imageOptions?: { size: number }
+  autoPreload?: boolean
 }
 
 export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>

package/resources/fivePlugins/CameraMovementPlugin/index.ts

@@ -50,65 +50,73 @@ function progressNumber(from: number, to: number, pst: number) {
 export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType> = (
   five: Five,
 ) => {
-  const move = async (args: Partial<MoveArgs>, duration: number, opts: MoveOpts = { preload: true }) => {
-    if (opts.asyncStartCallback) {
-      opts.asyncStartCallback()
-    }
+  const move = (args: Partial<MoveArgs>, duration: number, opts: MoveOpts = { preload: true }) => {
+    return new Promise<boolean>(async (resolve, reject) => {
+
+      if (opts.asyncStartCallback) {
+        opts.asyncStartCallback()
+      }
+
+      if (five.panoIndex === undefined) {
+        return reject(false)
+      }
 
-    if (args.mode && args.mode !== five.currentMode) {
-      await new Promise((resolve) => {
-        if (!args.mode) return
-        five.once('modeChange', (mode) => {
-          five.once('initAnimationEnded', () => {
-            if (mode === args.mode) {
-              resolve(true)
-            }
+      if (args.mode && args.mode !== five.currentMode) {
+        await new Promise((resolve) => {
+          if (!args.mode) return
+          five.once('modeChange', (mode) => {
+            five.once('initAnimationEnded', () => {
+              if (mode === args.mode) {
+                resolve(true)
+              }
+            })
+          })
+          five.changeMode(args.mode, {
+            fov: args.fov || undefined,
+            latitude: args.latitude || undefined,
+            longitude: args.longitude || undefined,
+            panoIndex: args.panoIndex || undefined,
           })
         })
-        five.changeMode(args.mode, {
-          fov: args.fov || undefined,
-          latitude: args.latitude || undefined,
-          longitude: args.longitude || undefined,
-          panoIndex: args.panoIndex || undefined,
-        })
-      })
-    }
+      }
 
-    if (args.mode === Five.Mode.Floorplan) {
-      return true
-    }
+      if (args.mode === Five.Mode.Floorplan) {
+        return resolve(true)
+      }
 
-    if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
-      await five.preloadPano(args.panoIndex)
-    }
+      if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+        await five.preloadPano(args.panoIndex)
+      }
+
+      if (opts.asyncEndCallback) {
+        opts.asyncEndCallback()
+      }
+
+      if (
+        args.panoIndex === undefined &&
+        args.fov === undefined &&
+        args.latitude === undefined &&
+        args.longitude === undefined
+      ) {
+        return resolve(true)
+      }
 
-    if (opts.asyncEndCallback) {
-      opts.asyncEndCallback()
-    }
 
-    if (
-      args.panoIndex === undefined &&
-      args.fov === undefined &&
-      args.latitude === undefined &&
-      args.longitude === undefined
-    ) {
-      return true
-    }
-    return await new Promise<boolean>((resolve, reject) => {
       const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex
+
       if (panoIndex !== undefined) {
-        const movePanoOptions: MovePanoOptions = {
+        const movePanoOptions: MovePanoOptions = Object.assign(args, {
           duration, // 移动耗时
           moveEndCallback: () => resolve(true), // 移动结束
-          moveCancelCallback: () => reject(false), // 移动开始
-          effect: 'fade',
-        }
-        five.moveToPano(
+          moveCancelCallback: () => {
+            resolve(true)
+          }, // 移动开始
+          // effect: args.transEffect || 'fade',
+        })
+
+        await five.moveToPano(
           panoIndex,
-          Object.assign(
-            movePanoOptions,
-            args,
-          ),
+          movePanoOptions,
         )
       } else {
         reject(false)

package/resources/fivePlugins/CameraMovementPlugin/typings.ts

@@ -39,7 +39,8 @@ export interface CameraMovementOptsCallback {
 export type MoveArgs = {
   mode: Mode
   panoIndex: number
-} & Pose & Pick<MovePanoOptions, 'effect'>
+  transEffect?: "fly" | "fade" | "instant"
+} & Pose
 
 export type MoveOpts = {
   preload?: boolean

package/resources/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose } from '@realsee/five'
+import { Mode, MovePanoOptions, Pose } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -65,7 +65,7 @@ export type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
-  uuid: string
+  uuid?: string
   type: VreoKeyframeEnum
   start: number
   end: number
@@ -104,7 +104,7 @@ export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyf
   // 新数据载入完成
   loaded: (vreoUnit: VreoUnit) => void
   // 语音状态 播放 -> 暂停
-  paused: () => void
+  paused: (ended?: boolean) => void
   // 语音状态 暂停 -> 播放
   playing: () => void
   // 未知的 剧本帧类型
@@ -115,7 +115,8 @@ export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyf
  * 相机运动
  */
 export type CameraMovementData = {
-  effect: CameraMovementEffect
+  effect?: CameraMovementEffect
+  transEffect?: "fly" | "fade" | "instant"
   mode: Mode
   panoIndex: number
   loop?: boolean

package/stylesheets/custom/SpatialScenePanel.css

@@ -77,9 +77,15 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/panel-min.7d9ba2b7.png");
   background-size: 340rem 13.4375rem;
   background-repeat: no-repeat;
-  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal
+  z-index: -1;
 }
 
+.SpatialScenePanel-bg--animation {
+  /* animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal; */
+  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0.5s steps(33) normal;
+}
+
+
 .SpatialScenePanel-show-area .SpatialScenePanel-header {
   width: 7.5rem;
   height: 1.375rem;
@@ -89,7 +95,9 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/title-bg.377af865.png");
   background-size: 100%;
   margin: 1.875rem auto 1.25rem auto;
-  padding-bottom: .25rem
+  background-image: linear-gradient(to left, rgba(234, 208, 154, 0), rgb(255 229 176 / 21%) 47%, rgba(234, 208, 154, 0));
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 2px;
 }
 
 .SpatialScenePanel-show-area .SpatialScenePanel-header .SpatialScenePanel-title {
@@ -97,7 +105,7 @@
   font-size: 1.0625rem;
   color: #ffe5b0;
   letter-spacing: 0;
-  line-height: 1.0625rem;
+  line-height: 1.125;
   text-shadow: 0 0 1.25rem rgba(0,0,0,0.15)
 }
 
@@ -106,7 +114,7 @@
   font-size: .625rem;
   color: rgba(255,229,176,0.6);
   letter-spacing: 0;
-  line-height: .625rem;
+  line-height: 1.25rem;
   text-shadow: 0 0 .625rem rgba(255,255,255,0.03);
   align-self: flex-end
 }
@@ -270,9 +278,7 @@
 
 .SpatialScenePanel.hide .SpatialScenePanel-show-area {
   transform: scale3d(0,1,1);
-  transition: -webkit-transform 500ms linear;
-  transition: transform 500ms linear;
-  transition: transform 500ms linear, -webkit-transform 500ms linear
+  transition: transform 150ms linear;
 }
 
 .SpatialScenePanel.hide .SpatialScenePanel-disappear-area {
@@ -298,6 +304,6 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/line.4ac1c0bb.png");
   background-size: 10rem 11.666666666666666rem;
   background-repeat: no-repeat;
-  animation: SpatialScenePanel-line-sprites-animation 500ms 500ms steps(23) 1 normal
+  animation: SpatialScenePanel-line-sprites-animation 500ms 100ms steps(23) 1 normal
 }