feat(components): ✨ Add Loader

Show loader while apllication is loading

package.json

@@ -41,6 +41,7 @@
     "polished": "^4.1.4",
     "react": "^18.0.0-rc.2",
     "react-dom": "^18.0.0-rc.2",
+    "react-lottie": "^1.2.3",
     "react-merge-refs": "^1.1.0",
     "react-use-gesture": "^9.1.3",
     "react-useanimations": "^2.0.8",

public/lotties/vortex-loader.json

@@ -0,0 +1 @@
+{"v":"5.5.8","fr":24,"ip":0,"op":31,"w":900,"h":900,"nm":"Comp 1","ddd":1,"assets":[],"layers":[{"ddd":1,"ind":1,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[449.814,442.734,-146.209],"to":[6.069,-7.553,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":17,"s":[486.228,397.418,-146.209],"to":[0,0,0],"ti":[6.069,-7.553,0]},{"t":29,"s":[449.814,442.734,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[2752.758,2752.758,2752.758],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0},{"ddd":1,"ind":2,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[449.814,442.734,-146.209],"to":[6.069,-7.553,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15.447,"s":[486.228,397.418,-146.209],"to":[0,0,0],"ti":[6.069,-7.553,0]},{"t":27,"s":[449.814,442.734,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[2355.058,2355.058,2355.058],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0},{"ddd":1,"ind":3,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[449.814,442.734,-146.209],"to":[6.069,-7.553,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":13.447,"s":[486.228,397.418,-146.209],"to":[0,0,0],"ti":[6.069,-7.553,0]},{"t":26,"s":[449.814,442.734,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[1942.734,1851.999,720.899],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0},{"ddd":1,"ind":4,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[447.57,437.103,-146.209],"to":[5.881,-7.249,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":10.759,"s":[482.855,393.612,-146.209],"to":[0,0,0],"ti":[5.881,-7.249,0]},{"t":25.103515625,"s":[447.57,437.103,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[1599.721,1446.032,720.899],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.4,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0},{"ddd":1,"ind":5,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[453.733,426.119,-146.209],"to":[4.027,-5.22,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8.966,"s":[477.896,394.797,-146.209],"to":[0,0,0],"ti":[4.027,-5.22,0]},{"t":23.3115234375,"s":[453.733,426.119,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[1085.567,1102.134,720.899],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0},{"ddd":1,"ind":6,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[462.036,414.557,-146.209],"to":[2.855,-3.757,0],"ti":[0.515,-2.218,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7.173,"s":[479.166,392.018,-146.209],"to":[-0.483,2.079,0],"ti":[2.855,-3.757,0]},{"t":22.4140625,"s":[462.036,414.557,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[720.899,720.899,720.899],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0.5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0},{"ddd":1,"ind":7,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[462.036,414.557,-146.209],"to":[2.855,-3.757,0],"ti":[0.515,-2.218,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":6,"s":[479.166,392.018,-146.209],"to":[-0.483,2.079,0],"ti":[2.855,-3.757,0]},{"t":21,"s":[462.036,414.557,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[307.009,307.009,307.009],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0},{"ddd":1,"ind":8,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":-37,"ix":8},"ry":{"a":0,"k":-23,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[462.036,414.557,-146.209],"to":[2.855,-3.757,0],"ti":[0.515,-2.218,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[479.166,392.018,-146.209],"to":[-0.483,2.079,0],"ti":[2.855,-3.757,0]},{"t":20,"s":[462.036,414.557,-146.209]}],"ix":2},"a":{"a":0,"k":[24,-42.25,0],"ix":1},"s":{"a":0,"k":[124.114,124.114,124.114],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30.248,30.248],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.7,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[24.396,-42.845],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[72.774,72.774],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":37,"st":0,"bm":0}],"markers":[]}

src/components/Cursor/index.jsx

@@ -134,7 +134,7 @@ export function Cursor({
           </div> */}
           </div>
         )}
-        <div className='text-[red] absolute right-[1%] bottom-[1%] flex'>
+        <div className='absolute right-[1%] bottom-[1%] flex'>
           {icons.map(({ icon, description, fontSize, link }) => (
             <div
               className='relative flex flex-col items-center group ml-3'
@@ -195,7 +195,7 @@ export function Cursor({
                 </div>
               </div>
 
-              <div className='flex flex-col md:flex-row bg-[#052f37bb] md:bg-transparent rounded-md md:rounded-none text-[red]'>
+              <div className='flex flex-col md:flex-row bg-[#052f37bb] md:bg-transparent rounded-md md:rounded-none text-[#00f8f8]'>
                 {sections.map(({ section, objName }) => (
                   <div
                     role='presentation'
@@ -217,7 +217,7 @@ export function Cursor({
                     }}>
                     <div
                       className={`navbar-text py-2 md:py-0 font-mono text-base hover:text-white ${
-                        currentSection === section ? 'text-red-500' : 'text-zinc-500'
+                        currentSection === section ? 'text-[#00f8f8]' : 'text-zinc-500'
                       }`}>
                       <AnimatorGeneralProvider animator={{ duration: { enter: 250, exit: 100 } }}>
                         <Animator

src/components/Loader/index.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import Lottie from 'react-lottie'
+import { ArwesThemeProvider, StylesBaseline, Text as ArwesText } from '@arwes/core'
+import { BleepsProvider } from '@arwes/sounds'
+import { AnimatorGeneralProvider, Animator } from '@arwes/animation'
+import animationData from '../../../public/lotties/vortex-loader.json'
+
+const defaultOptions = {
+  loop: true,
+  autoplay: true,
+  animationData,
+  rendererSettings: {
+    preserveAspectRatio: 'xMidYMid slice'
+  }
+}
+
+export function Loader({ startText = false, ...props }) {
+  return (
+    <ArwesThemeProvider>
+      <StylesBaseline />
+      <BleepsProvider
+        audioSettings={{
+          common: { volume: 0.25 }
+        }}
+        playersSettings={{
+          object: { src: ['/sound/object.mp3'] },
+          assemble: { src: ['/sound/assemble.mp3'], loop: true },
+          type: { src: ['/sound/type.mp3'], loop: true },
+          click: { src: ['/sound/click.mp3'] }
+        }}
+        bleepsSettings={{
+          object: { player: 'object' },
+          assemble: { player: 'assemble' },
+          type: { player: 'type' },
+          click: { player: 'click' }
+        }}>
+        <div className='w-screen h-screen bg-black' role='presentation' {...props}>
+          <div className='w-full h-full flex flex-col	 justify-center items-center'>
+            <div className='w-[40%] md:w-[20%]'>
+              <Lottie options={defaultOptions} />
+            </div>
+            {startText && (
+              <AnimatorGeneralProvider animator={{ duration: { enter: 2500, exit: 100 } }}>
+                <Animator animator={{ animation: true, manager: 'stagger' }}>
+                  <ArwesText className='ml-[1%]'>Tap anywhere to start</ArwesText>
+                </Animator>
+              </AnimatorGeneralProvider>
+            )}
+          </div>
+        </div>
+      </BleepsProvider>
+    </ArwesThemeProvider>
+  )
+}
+
+export default Loader

src/pages/index.js

@@ -1,6 +1,6 @@
 import Head from 'next/head'
 import * as THREE from 'three'
-import React, { Suspense, useRef, useEffect } from 'react'
+import React, { Suspense, useRef, useEffect, useState } from 'react'
 import { Canvas, useThree, useFrame } from '@react-three/fiber'
 import dynamic from 'next/dynamic'
 import { useAspect, Html, PerspectiveCamera } from '@react-three/drei'
@@ -12,6 +12,7 @@ import download from 'react-useanimations/lib/download'
 import { animated, useSpring, config } from '@react-spring/three'
 import { useWindowDimensions } from '../utils/useWindowDimensions'
 import fontUrl from '../assets/font.json' /* three/examples/fonts/helvetiker_bold.typeface.json */
+import { Loader } from '../components/Loader'
 
 // const Effects = dynamic(() => import('../components/Effects'), { suspense: true })
 // const Dots = dynamic(() => import('../components/Dots'), { suspense: true })
@@ -225,6 +226,11 @@ export default function Home() {
     config: config.slow
   }))
 
+  const [startApp, setStartApp] = useState(false)
+
+  const scrollOutSound = useRef()
+  const scrollInSound = useRef()
+
   const handleScroll = (measure, thr, to = pos.animation.to[2], from = cam.current.position.z) => {
     let r = ((to - startZ) * Math.PI) / 8
     if (1 - Math.cos(r) < 0.3) {
@@ -234,18 +240,27 @@ export default function Home() {
     }
 
     if (measure < thr) {
+      scrollInSound.current.play()
       set.start(() => ({
         pos: [0, 0, from - 2],
         rotation: [0, 0, r]
       }))
     } else {
+      if (!('ontouchstart' in window)) {
+        scrollOutSound.current.play()
+      } else {
+        scrollInSound.current.play()
+      }
       set.start(() => ({
         pos: [0, 0, from + 2],
         rotation: [0, 0, r]
       }))
     }
   }
   useEffect(() => {
+    scrollInSound.current = new Audio('/sound/spaceship-passing.mp3')
+    scrollOutSound.current = new Audio('/sound/sfx.wav')
+
     // Your code here
     if (!('ontouchstart' in window)) {
       window.addEventListener('wheel', (e) => {
@@ -327,8 +342,31 @@ export default function Home() {
           ]}
           dom={dom}
           handleScroll={handleScroll}>
-          <Suspense fallback={<Html center>loading..</Html>}>
+          <Suspense
+            fallback={
+              <Html center wrapperClass='z-50'>
+                <Loader />
+              </Html>
+            }>
             <Page startZ={startZ} distance={distance} />
+            {!startApp && (
+              <Html center wrapperClass='z-50'>
+                <Loader
+                  startText
+                  onClick={() => {
+                    setStartApp(true)
+                  }}
+                />
+              </Html>
+            )}
+            <Html>
+              {startApp && (
+                /* eslint-disable-next-line jsx-a11y/media-has-caption */
+                <audio autoPlay>
+                  <source src='/sound/sweetchoff.wav' type='audio/wav' />
+                </audio>
+              )}
+            </Html>
             {/* <Cube /> */}
           </Suspense>
         </Cursor>