tidying mobile & adding glitch

- glitch also has companion easteregg.
- easter egg glitch disabled on mobile to save eyes 😅
- adding alpha map for seed logo for better display
- small tweaks to 1440px displays
- it has been mentioned by some that the font sizes on 1440 were too small.
- also made some text heavier to improve readability.

package.json

@@ -44,6 +44,7 @@
     "next-images": "^1.8.4",
     "next-optimized-images": "^2.6.2",
     "next-seo": "^5.4.0",
+    "postprocessing": "^6.26.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",

src/components/canvas/BabyEarth.jsx

@@ -6,12 +6,12 @@ import gsap from "gsap";
 import useStore from '@/helpers/store'
 
 export default function BabyEarthVox(props) {
-  const router = useStore((s) => s.router)
+  // const router = useStore((s) => s.router)
   const group = useRef();
   const material = useRef();
   const [hovered, setHover] = useState(false)
   const { nodes, materials } = useGLTF("/assets/models/babyearth-vox.glb");
-  const { route, animate } = props
+  const { animate } = props
   const clock = new THREE.Clock();
   let previousTime = 0;
 
@@ -30,7 +30,7 @@ export default function BabyEarthVox(props) {
 
 
   return (
-    <group ref={group} {...props} name="BabyEarthVox" dispose={null}>
+    <group ref={group} {...props} name="VoxelEarth" dispose={null}>
       <mesh
         castShadow
         receiveShadow

src/components/canvas/EasterEgg.jsx

@@ -59,7 +59,7 @@ const OctoEasterEgg = (props) => {
     >
       <planeBufferGeometry attach="geometry" args={[1, 1]} />
       <meshBasicMaterial attach="material" ref={material}  />
-    </mesh>
+      </mesh>
   )
 };
 

src/components/canvas/Galaxy.jsx

@@ -23,7 +23,7 @@ const Galaxy = ({ dof, parameters, nucleus, helper, effects, ...props }) => {
    * Textures
    */
   const planeColorTexture = useLoader(TextureLoader, '/assets/textures/particles/seed_logo.png');
-  const planeAlphaTexture = useLoader(TextureLoader, '/assets/textures/particles/seed_logo.png');
+  const planeAlphaTexture = useLoader(TextureLoader, '/assets/textures/particles/seed_logo_alpha_map.png');
   planeAlphaTexture.minFilter = THREE.NearestFilter;
   planeAlphaTexture.magFilter = THREE.NearestFilter;
   planeAlphaTexture.generateMipmaps = true;
@@ -111,9 +111,9 @@ const Galaxy = ({ dof, parameters, nucleus, helper, effects, ...props }) => {
         colors[i3 + 2] = mixedColor.b
 
 
-        if (i < 20) {
+        // if (i < 20) {
-          console.log(i, branchAngle)
+        //   console.log(i, branchAngle)
-        }
+        // }
       }
     } else if (parameters.type === 2) {
       for (let i = 0; i < parameters.count; i++) {
@@ -138,9 +138,9 @@ const Galaxy = ({ dof, parameters, nucleus, helper, effects, ...props }) => {
         colors[i3 + 2] = mixedColor.b
 
 
-        if (i < 20) {
+        // if (i < 20) {
-          console.log(i, branchAngle)
+        //   console.log(i, branchAngle)
-        }
+        // }
       }
 
     } else if (parameters.type === 3) {
@@ -166,9 +166,9 @@ const Galaxy = ({ dof, parameters, nucleus, helper, effects, ...props }) => {
         colors[i3 + 2] = mixedColor.b
 
 
-        if (i < 20) {
+        // if (i < 20) {
-          console.log(i, branchAngle)
+        //   console.log(i, branchAngle)
-        }
+        // }
       }
     } else if (parameters.type === 4) {
       for (let i = 0; i < parameters.count; i++) {
@@ -193,9 +193,9 @@ const Galaxy = ({ dof, parameters, nucleus, helper, effects, ...props }) => {
         colors[i3 + 2] = mixedColor.b
 
 
-        if (i < 20) {
+        // if (i < 20) {
-          console.log(i, branchAngle)
+        //   console.log(i, branchAngle)
-        }
+        // }
       }
     } else if (parameters.type === 5) {
       for (let i = 0; i < parameters.count; i++) {
@@ -222,9 +222,9 @@ const Galaxy = ({ dof, parameters, nucleus, helper, effects, ...props }) => {
         colors[i3 + 2] = mixedColor.b
 
 
-        if (i < 20) {
+        // if (i < 20) {
-          console.log(i, branchAngle)
+        //   console.log(i, branchAngle)
-        }
+        // }
       }
     }
 
@@ -238,7 +238,6 @@ const Galaxy = ({ dof, parameters, nucleus, helper, effects, ...props }) => {
       material.current.transparent = true
       material.current.sizeAttenuation = true
       material.current.opacity = parameters.opacity
-
     }
     // if (parameters.type === 3) {
     //   material.current.transparent = true

src/components/canvas/Jetsetter.jsx

@@ -11,7 +11,7 @@ export default function JetsetterVox(props) {
   const group = useRef();
   const [hovered, setHover] = useState(false)
   const { nodes, materials } = useGLTF("/assets/models/jetsetter-vox.glb");
-  const { route, animate } = props
+  const { route, animate, isExternal } = props
   const clock = new THREE.Clock();
   let previousTime = 0;
 
@@ -22,6 +22,21 @@ export default function JetsetterVox(props) {
     setOriginalPos(pos)
   }, [originalPos, setOriginalPos])
 
+  const handleClick = (url, isExternal) => {
+    if(!url) return
+    if (url && isExternal) {
+      if (typeof window !== 'undefined') {
+        window.open(url, '_blank')
+      }
+      return
+    }
+    if (url && !isExternal) {
+      () => router.push(url)
+      return
+    }
+
+  }
+
   useFrame((state, delta) => {
     const elapsedTime = clock.getElapsedTime();
     const deltaTime = elapsedTime - previousTime;
@@ -31,30 +46,6 @@ export default function JetsetterVox(props) {
     }
   })
 
-// useEffect(() => {
-//   let z = null;
-//   if (group.current) {
-//     storeOriginalPos(group.current.position)
-
-//     if (hovered) {
-//       console.log('origpos', originalPos.z);
-//       gsap.to(group.current.position, {
-//         duration: 1.5,
-//         ease: "power2.inOut",
-//         z: 1
-//       })
-//     }
-//       console.log(originalPos);
-//       gsap.to(group.current.position, {
-//         duration: 1.5,
-//         ease: "power2.inOut",
-//         z: 0
-//       })
-
-//   }
-
-// }, [group, hovered, originalPos, storeOriginalPos]);
-  // gsap
 
   return (
     <group ref={group} {...props} name="Jetsetter" dispose={null}>
@@ -64,9 +55,9 @@ export default function JetsetterVox(props) {
         geometry={nodes.jetsetter.geometry}
         material={materials.palette}
         rotation={[Math.PI / 2, 0, 0]}
-        onClick={() => router.push(route)}
+        onClick={(e) => handleClick(route, isExternal)}
-        onPointerOver={(e) => setHover(true)}
+        // onPointerOver={(e) => setHover(true)}
-        onPointerOut={(e) => setHover(false)}
+        // onPointerOut={(e) => setHover(false)}
       />
     </group>
   );

src/components/canvas/Loader.jsx

@@ -16,9 +16,9 @@ export const CanvasLoader = () => {
 
   useEffect(() => {
     if (ratioLoaded < 1) {
-      console.log(ratioLoaded);
+      // console.log(ratioLoaded);
       if (loadingBar.current) {
-        console.log(loadingBar.current);
+        // console.log(loadingBar.current);
         // loadingBar.current.style.transform = `scaleX(${ratioLoaded})`
 
       }

src/components/canvas/Nomad.jsx

@@ -13,7 +13,7 @@ export default function NomadVox(props) {
   const { route } = props
   useEffect(() => {
     if (group.current.children) {
-      console.log(group.current.children);
+      // console.log(group.current.children);
       // group.current.children[0].geometry.computeFaceNormals();
       // group.current.children[0].geometry.computeVertextNormals();
       // group.current.children[0].geometry.normalsNeedUpdate = true;

src/components/canvas/Starfield.jsx

@@ -45,7 +45,7 @@ export default function Starfield({ parameters, ...props }) {
       positions[i3 + 2] = (Math.random() - 0.5) * 10;
     }
     // if (particles.current) {
-      console.log('pc:', particles);
+      // console.log('pc:', particles);
       particles.current.geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
       particles.current.geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
 

src/components/canvas/musashi/Ilb.jsx

@@ -55,7 +55,7 @@ export default function ILBVox(props) {
         intensity={0.6}
         distance={3}
         decay={2}
-        color={'0xfff'}
+        color={'0xffffff'}
         castShadow
       />
     </group>

src/components/canvas/musashi/MolochPet1.jsx

@@ -63,7 +63,7 @@ export default function ILBVox(props) {
         intensity={0.6}
         distance={3}
         decay={2}
-        color={'0xfff'}
+        color={'0xffffff'}
         castShadow
       />
     </group>

src/components/canvas/musashi/Robe.jsx

@@ -43,7 +43,7 @@ export default function RobeVox(props) {
         intensity={3}
         distance={3}
         decay={2}
-        color={'0xfff'}
+        color={'0xffffff'}
         castShadow
       />
     </group>

src/components/canvas/musashi/Robe2.jsx

@@ -56,7 +56,7 @@ export default function Robe2Vox(props) {
         intensity={3}
         distance={3}
         decay={2}
-        color={'0xfff'}
+        color={'0xffffff'}
         castShadow
       />
     </group>

src/components/dom/AlphaNotice.jsx

@@ -44,8 +44,8 @@ export function AlphaNotice() {
         {/* <Image src={BabyOctoGif} boxSize="25px" objectFit="cover" /> */}
         <Text fontSize={{base: "2vmin", lg: '0.7vmax'}} fontWeight={700}>
           The site is in{" "}
-          <Text as="span" color="#76EBF2" fontWeight="700">
+          <Text as="span" color="cyan" fontWeight="700">
-            Alpha
+            Beta
           </Text>
           .{" "}
           <span role="img" aria-label="watchful eyes">
@@ -64,7 +64,7 @@ export function AlphaNotice() {
           bottom={3}
           right={{base: 2, lg: 6}}
           size="sm"
-          aria-label="Close easter egg"
+          aria-label="Close notice"
           icon={<CloseIcon />}
           zIndex={2001}
         />

src/components/dom/EasterEgg.jsx

@@ -17,13 +17,13 @@ import BabyOctoGif from "@/static/assets/img/baby_octo_alpha.gif";
 export const EasterEgg = () => {
   const [toggle, setToggle] = useState(false);
   const [openClaim, setOpenClaim] = useState(false);
-  const ref = useRef(null);
+  const ee1Ref = useRef(null);
-  const claimRef = useRef(null);
+  const claim1Ref = useRef(null);
   const responsiveButtonSize = useBreakpointValue({base: 'sm', lg: 'md'})
   const handleToggle = () => {
     if (typeof window !== "undefined") {
       setToggle(!toggle);
-      ref.current.classList.remove("found");
+      ee1Ref.current.classList.remove("found");
     }
   }
 
@@ -31,7 +31,7 @@ export const EasterEgg = () => {
   return (
     <>
       <Box
-        ref={ref}
+        ref={ee1Ref}
         className="ee1"
         bg="rgba(0,0,0,0.3)"
         boxShadow="0 0 15px rgba(0,0,0,0.6)"
@@ -141,7 +141,7 @@ export const EasterEgg = () => {
       </Box>
       {openClaim ? (
         <Box
-          ref={claimRef}
+          ref={claim1Ref}
           position="fixed"
           top="12.5vh"
           left={0}

src/components/dom/EasterEggGlitch.jsx

@@ -0,0 +1,210 @@
+import React, {useState, useRef} from 'react'
+import {
+  Text,
+  Button,
+  Image,
+  IconButton,
+  Container,
+  Box,
+  Link,
+  useBreakpointValue
+} from '@chakra-ui/react'
+import { CloseIcon, ExternalLinkIcon } from '@chakra-ui/icons'
+import { BoxedNextImage } from "@/components/dom/BoxedNextImage";
+
+export const EasterEggGlitch = () => {
+  const [toggle, setToggle] = useState(false);
+  const [openClaim, setOpenClaim] = useState(false);
+  const ee2Ref = useRef(null);
+  const claim2Ref = useRef(null);
+  const responsiveButtonSize = useBreakpointValue({base: 'sm', lg: 'md'})
+  const handleToggle = () => {
+    if (typeof window !== "undefined") {
+      setToggle(false);
+      const el = ee2Ref.current
+      if (el.classList.contains('found')) {
+        el.classList.remove('found')
+      } else {
+        el.classList.add('found')
+      }
+    }
+  }
+
+
+  return (
+    <>
+      <Box
+        ref={ee2Ref}
+        className="ee2"
+        bg="rgba(0,0,0,0.3)"
+        boxShadow="0 0 15px rgba(0,0,0,0.6)"
+        backdropFilter="blur(7px)"
+        color="white"
+        position="fixed"
+        bottom={0}
+        left={0}
+        right={0}
+        maxW="100vw"
+        textAlign="center"
+        height={{base: '150px', md: "auto"}}
+        opacity={toggle ? 1 : 0}
+        transform={toggle ? "translateY(0)" : "translateY(100px)"}
+        transition="transform 0.3s 0.2s ease-in-out, opacity 0.3s 0.3s ease-in-out"
+        zIndex={toggle ? 2003 : 0}
+        overflowX="clip"
+        sx={{
+          h4: {
+            fontSize: "2vmax",
+            fontWeight: 700,
+          },
+          "&.found": {
+            opacity: 1,
+            transform: "translateY(0)",
+            zIndex: 2003,
+          },
+        }}
+      >
+        {openClaim ? (
+          <Button
+            position="absolute"
+            bottom={20}
+            right={6}
+            colorScheme="pink"
+            bg="#FF61E6"
+            boxShadow="0 0 10px rgba(0, 0, 0, 0.6)"
+            size="sm"
+            transition="all 0.3s 0.8s ease"
+            // transform={`translateY(${openClaim ? 0 : "-70px"})`}
+            onClick={() => setOpenClaim(!openClaim)}
+            zIndex={2004}
+          >
+            Close the claimer
+          </Button>
+        ) : null}
+        <Box
+          d="flex"
+          position="relative"
+          alignItems="center"
+          justifyContent="space-around"
+          flexFlow="row nowrap"
+          mx="auto"
+          maxW={{base: '100%', md: "5xl"}}
+          py={3}
+        >
+          <BoxedNextImage src={'assets/img/baby_octo_alpha.gif'} alt="Baby Octo mascot" boxSize={{base: '35px', xl:"100px"}} objectFit="cover" />
+          <Box flex={1}>
+            <Text as="h3">
+              <span role="img" aria-label="Octo emoji">
+                🐙
+              </span>{" "}
+              Nova&apos;s glitchin!!{" "}
+              <span role="img" aria-label="Octo emoji">
+                🐙
+              </span>
+            </Text>
+            <Text as="p" fontWeight={500}>
+              Welcome Anon!{" "}
+              <span role="img" aria-label="Cheers/Clinking glasses emoji">
+                🍻
+              </span>
+              <br />
+              You managed to glitch the site.{" "}
+              <span role="img" aria-label="Loved up emoji">
+                🤖
+              </span>{" "}
+              <br /> You win a MetaFest2 Glitch NFT! Do you wish
+              to accept your prize?
+              <br />
+            </Text>
+            <Button
+              href="#"
+              colorScheme="pink"
+              bg="#FF61E6"
+              size={responsiveButtonSize}
+              mt={5}
+              onClick={() => setOpenClaim(!openClaim)}
+            >
+              Claim your NFT
+            </Button>
+          </Box>
+
+          <BoxedNextImage src={'assets/img/baby_octo_alpha.gif'} alt="Baby Octo mascot" boxSize={{base: '35px', xl:"100px"}} objectFit="cover" />
+          <IconButton
+            onClick={handleToggle}
+            colorScheme="ghost"
+            pos="absolute"
+            top={3}
+            right={0}
+            size="sm"
+            aria-label="Close easter egg"
+            icon={<CloseIcon />}
+            zIndex={2001}
+          />
+        </Box>
+      </Box>
+      {openClaim ? (
+        <Box
+          ref={claim2Ref}
+          position="fixed"
+          top="12.5vh"
+          left={0}
+          height="75vh"
+          minH="75vh"
+          width="100vw"
+          boxShadow="0 0 30px rgba(0,0,0,0.8)"
+          // opacity={onScreen ? 1 : 0}
+          transition="opacity 1.2s 0.8s ease-in-out"
+          zIndex={2003}
+          sx={{
+            bg: "rgba(25,0,50,0.4)",
+            backdropFilter: "blur(7px)",
+          }}
+        >
+          <Container maxW={{base: '100%', md: "2xl"}} height="100%" py={12} align="center">
+            <MinterInstance />
+          </Container>
+          <Box
+            display="flex"
+            position="absolute"
+            bottom={0}
+            right={0}
+            width="100%"
+            textAlign="center"
+          >
+            <Link
+              href="https://testnets.opensea.io/assets?search[query]=0x91BBa1e0EE2DCC8d78Fa017588614f328d6d1885"
+              isExternal
+              fontWeight={700}
+              fontSize="0.7vmax"
+              // d="inline-block"
+              mx="auto"
+              p={3}
+              bg="linear-gradient(90.24deg, #640DFB99 0.3%, rgba(100, 13, 251, 0.9) 80.16%)"
+              borderRadius="5px 5px 0 0"
+              boxShadow="0 0 5px rgba(0,0,0,0.6)"
+              overflow="clip"
+            >
+              <span role="img" aria-label="Attention!">
+                📢
+              </span>{" "}
+              Need more NFTs? View the contract on OpenSea. <ExternalLinkIcon />
+            </Link>
+          </Box>
+        </Box>
+      ):null}
+    </>
+  );
+};
+
+
+export const MinterInstance = () => {
+  return (
+    <iframe
+      title="Claim Easter Egg NFT"
+      src="https://gateway.ipfscdn.io/ipfs/QmQpHkDDWGJPBHFKkpX1DsfzvwZXQYNVoaW4R1Lhenp6T5/bundledrop.html?contract=0x91BBa1e0EE2DCC8d78Fa017588614f328d6d1885&amp;chainId=80001&amp;tokenId=1"
+      width="100%"
+      height="100%"
+      frameBorder="0"
+    ></iframe>
+  );
+};

src/components/dom/HeadComponent.jsx

@@ -33,6 +33,21 @@ export const HeadComponent = (props) => {
 
       <link rel="icon" href="/favicon.ico" />
 
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=G-0YZ0KDRZ7J`}
+          />
+          <script
+            type="text/javascript"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag() { dataLayer.push(arguments) }
+                gtag('js', new Date());
+                gtag('config', 'G-0YZ0KDRZ7J');
+              `,
+            }}
+          />
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
       <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;700&amp;display=swap" rel="stylesheet" />

src/components/dom/Header.jsx

@@ -60,7 +60,7 @@ export function SiteHeader() {
   const disabledGenNotify = useDisabledGeneralNotify();
   const handleToggle = () => (isOpen ? onClose() : onOpen());
   const screenSize = useBreakpoint()
-  console.log('s',screenSize);
+  console.log('Chakra breakpoint: ', screenSize);
 
   const NavLink = ({ href, children, offset }) => (
     <Link
@@ -208,6 +208,7 @@ export function SiteHeader() {
                 px={5}
                 py={2}
                 color={"white"}
+                fontWeight={700}
                 bg="#927CFF"
                 boxShadow="0 0 10px rgba(0, 0, 0, 0.6)"
                 size="sm"
@@ -224,7 +225,6 @@ export function SiteHeader() {
                 py={0}
                 // color={"white"}
                 bg="transparent"
-                boxShadow="0 0 10px rgba(0, 0, 0, 0.6)"
                 size="sm"
                 mr={0}
                 borderRadius="md"

src/components/dom/models.jsx

@@ -26,7 +26,7 @@ const debug = new dat.GUI()
   gltfLoader.load(
     '/models/OCT_02_fileEXPS.gltf',
     (gltf) => {
-      console.log(gltf)
+      // console.log(gltf)
 
       // Create new mixer
       mixer = new THREE.AnimationMixer(gltf.scene)

src/components/dom/page-sections/ScheduleSection.jsx

@@ -53,6 +53,7 @@ export const ScheduleSection = () => {
         transform={`translate3d(${onScreen ? 0 : "-70px"}, 0, 0)`}
         opacity={onScreen ? 1 : 0}
         transition="transform 0.3s 0.4s ease-in-out, opacity 0.6s 0.5s ease-in"
+        pt={{base: 8, lg: 0}}
       >
         <Box
           position="relative"
@@ -196,7 +197,7 @@ export const WeekTabs = ({ blocks }) => {
       isFitted
       onChange={(index) => setTabIndex(index)}
     >
-      <TabList fontSize={{ base: '2.6vmin', lg: '2vmax' }} w="50%" flex="0 0 50%" justifyContent="flex-start" justifyItems="center" borderBottom="none">
+      <TabList fontSize={{ base: '2.6vmin', lg: '2vmax' }} w={{base: '100%', xl: "50%"}} flex={{base: '0 0 100%', xl: "0 0 50%"}} justifyContent="flex-start" justifyItems="center" borderBottom="none">
         <Box p={5} pl={0}>
           <Tab
             borderBottom={tabIndex === 0 ? "4px solid #640DFB99" : "2px solid transparent"}
@@ -210,7 +211,7 @@ export const WeekTabs = ({ blocks }) => {
       </TabList>
 
       <TabPanels>
-        <TabPanel >
+        <TabPanel px={{base: 0, lg: 4}}>
           <Box
             d="flex"
             alignContent="flex-start"
@@ -228,7 +229,7 @@ export const WeekTabs = ({ blocks }) => {
             }
           </Box>
         </TabPanel>
-        <TabPanel>
+        <TabPanel px={{base: 0, lg: 4}}>
           <Box
             d="flex"
             alignContent="flex-start"
@@ -259,12 +260,12 @@ export const DayBlock = ({ day }) => {
     <Box className="time-block"
       sx={{
         flex: {
-          base: '0 0 49%', xl: '0 0 32%'
+          base: '0 0 48%', xl: '0 0 32%'
         },
-        W: { base: '49%', xl: '32%' }
+        W: { base: '48%', xl: '32%' }
       }}
     >
-      <Box d="inline-block">
+      <Box d="flex" flexFlow="column wrap">
         <Text as="span" className="fest-dates">
           <span>{dates}</span>
         </Text>
@@ -272,7 +273,7 @@ export const DayBlock = ({ day }) => {
           <span>{title}</span>
         </Text>
       </Box>
-      <Text fontSize={{ base: "2.6vmin", md: "1vmax" }} fontWeight={500} mb={1}>{strapline}</Text>
+      <Text fontSize={{ base: "2.6vmin", md: "1vmax", '2xl': "1vmax" }} fontWeight={700} mb={1}>{strapline}</Text>
       <Text>{description}</Text>
       {!extra && <Text>{extra}</Text>}
     </Box>
@@ -325,7 +326,7 @@ const timeBlocks = [
     dates: 'Sunday June 19th',
     title: 'Sunday Funday: Live Concerts & Entertainment',
     strapline: 'All work and no play, makes Nova swim in circles.',
-    description: 'Sunday Funday is our weekend day of play and entertainment. Join us for live events in MetaVerse worlds, games, possible Poaps, and more!',
+    description: 'Sunday Funday is our weekend day of play and entertainment. Join us for live events in MetaVerse worlds, games, possible POAPs, and more!',
     extra: `If you missed out last year, I can feel your <span className="gradient">FOMO</span> from here!!`
   },
   {

src/components/layout/canvas.jsx

@@ -1,17 +1,18 @@
 import dynamic from 'next/dynamic'
-import { Canvas } from '@react-three/fiber'
+import { Canvas, useFrame } from '@react-three/fiber'
 import * as THREE from "three";
 import { Environment, OrbitControls, Preload } from '@react-three/drei'
 import {
   Box
 } from '@chakra-ui/react'
 import useStore from '@/helpers/store'
-import { Suspense, useEffect, useRef } from 'react'
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react'
-
+import { EffectComposer, Bloom, Glitch, GodRays, Scanline, DepthOfField, Vignette } from '@react-three/postprocessing';
+import { GlitchMode, BlendFunction } from 'postprocessing'
 // const { OctoEasterEggR3F } = dynamic(() => import('@/components/canvas/EasterEgg.r3f'), {
 //   ssr: false,
 // })
-import {CanvasLoader} from '@/components/canvas/Loader'
+import { CanvasLoader } from '@/components/canvas/Loader'
 
 const LControl = () => {
   const dom = useStore((state) => state.dom)
@@ -29,11 +30,53 @@ const LControl = () => {
 }
 const LCanvas = ({ children }) => {
   const dom = useStore((state) => state.dom)
+  const [on, setOn] = useState(false)
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+  const canvas = useRef();
+  const delay = (() => { });
+  const glitchEgg = dom.current.querySelector('.ee2');
+  const onPointerUp = useCallback(() => {
+
+    if (delay.current) clearTimeout(delay.current)
+    if (on && glitchEgg) {
+      glitchEgg.classList.add('found');
+    }
+
+    setOn(false)
+  }, [glitchEgg, on, setOn]);
+
+  const onPointerDown = useCallback(() => {
+    delay.current = setTimeout(() => {
+      if (!on && glitchEgg) {
+        glitchEgg.classList.remove('found');
+      }
+      setOn(true);
+    }, 1000);
+  }, [glitchEgg, on, setOn]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const el = dom.current
+      if(isMobile) return
+      el.addEventListener('pointerup', onPointerUp)
+      el.addEventListener('pointerdown', onPointerDown)
+
+      return () => {
+        el.removeEventListener('pointerup', onPointerUp)
+        el.removeEventListener('pointerdown', onPointerDown)
+      }
+    }
+
+
+  }, [on, dom, isMobile, onPointerUp, onPointerDown]);
+
 
   return (
     <Canvas
+      ref={canvas}
       mode='concurrent'
-      shadow="true"
+      shadows="PCFSoft"
+      dpr={Math.min(2, isMobile && typeof window !== 'undefined' ? window.devicePixelRatio : 1)}
       style={{
         position: 'fixed',
         top: 0,
@@ -47,8 +90,9 @@ const LCanvas = ({ children }) => {
       {/* <LControl /> */}
       <Preload all />
       <Suspense fallback={<CanvasLoader />}>
-        {children}
         <Environment preset="forest" />
+        {children}
+        <Effect on={on} />
       </Suspense>
     </Canvas>
   )
@@ -56,3 +100,34 @@ const LCanvas = ({ children }) => {
 
 export default LCanvas
 
+export const Effect = ({ on }) => {
+  // console.log('onoff', on);
+  const [material, setMaterial] = useState()
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+  const clock = new THREE.Clock();
+  let previousTime = 0;
+  console.log('mob?', isMobile);
+  if (isMobile) on = false;
+
+  useFrame(() => {
+    const elapsedTime = clock.getElapsedTime();
+    const deltaTime = elapsedTime - previousTime;
+    previousTime = elapsedTime;
+  })
+
+  return (
+    <EffectComposer>
+      <Vignette eskil={false} offset={0.004} darkness={on ? 1.2 : 1} />
+
+      <Glitch active={true} ratio={0.89} delay={[0.5, 35]} duration={[0.1, 0.3]} strength={[0.1, 0.5]} mode={GlitchMode.SPORADIC} />
+      {on && (
+        <Scanline density={on ? 3.5 : 50} blendFunction={BlendFunction.OVERLAY} />,
+        <DepthOfField focusDistance={2} focalLength={0.5} bokehScale={6} />,
+        <Scanline density={on ? 3.5 : 0} blendFunction={on && BlendFunction.OVERLAY} />
+        )}
+
+        <Glitch active={on} ratio={0.89} delay={[0.5, 2]} strength={[0.1, 0.5]} mode={GlitchMode.CONSTANT_WILD} />
+    </EffectComposer>
+
+  )
+}

src/components/layout/dom.jsx

@@ -7,6 +7,7 @@ import {SiteHeader} from "@/components/dom/Header";
 import { SiteFooter } from "@/components/dom/Footer";
 import { AlphaNotice } from '@/components/dom/AlphaNotice';
 import { EasterEgg } from '@/components/dom/EasterEgg';
+import { EasterEggGlitch } from '@/components/dom/EasterEggGlitch';
 
 const Dom = ({ children }) => {
   const ref = useRef(null)
@@ -38,6 +39,7 @@ const Dom = ({ children }) => {
       <SiteFooter />
       <AlphaNotice />
       <EasterEgg />
+      <EasterEggGlitch />
     </Box>
   )
 }

src/pages/_app.jsx

@@ -9,7 +9,7 @@ import dynamic from 'next/dynamic'
 import { settings } from '@/seo.config';
 import SocialImg from "@/static/assets/img/social.png";
 
-import { ChakraProvider, CSSReset, extendTheme } from "@chakra-ui/react";
+import { ChakraProvider, CSSReset, extendTheme, useBreakpointValue } from "@chakra-ui/react";
 
 
 const theme = extendTheme({
@@ -95,22 +95,22 @@ const theme = extendTheme({
       },
       h3: {
         fontSize: { base: "4vmin", md: "1.5vmax" },
-        fontWeight: 500,
+        fontWeight: 700,
         mt: { base: 2, md: 5 },
         "& + p": {
-          fontSize: { base: "2.8vmin", md: "1vmax" },
+          fontSize: { base: "2.8vmin", md: "1.1vmax", '2xl': "1vmax" },
           lineHeight: { base: "1.2", md: "inherit" },
-          fontWeight: 500,
+          fontWeight: 700,
           mt: 0,
           mb: 1,
         },
       },
       h4: {
-        fontSize: "1vmax",
+        fontSize: { base: "3vmin", md: "1.1vmax", '2xl': "1vmax" },
-        fontWeight: 500,
+        fontWeight: 700,
       },
       p: {
-        fontSize: { base: "2.6vmin", md: ".8vmax" },
+        fontSize: { base: "2.6vmin", md: '1vmax', '2xl': ".8vmax" },
         textShadow: "0 0 5px rgba(0, 0, 0, 0.6)",
       },
       section: {
@@ -180,7 +180,7 @@ const theme = extendTheme({
         d: "inline-flex",
         width: "100%",
         color: "#FF61E6",
-        fontSize: { base: "2.2vmin", md: "0.7vmax" },
+        fontSize: { base: "2.2vmin", md: "0.8vmax", '2xl': "0.7vmax" },
         fontWeight: 500,
         justifyContent: "left",
         opacity: 0.8,
@@ -191,6 +191,16 @@ const theme = extendTheme({
           "2xl": "translateY(8px)",
         },
         zIndex: 2001,
+        '& > span': {
+          bg: 'rgba(25,0,50,1)',
+          backdropFilter: 'blur(7px)',
+          borderRadius: 'md',
+          display: 'block',
+          mb: 1,
+          py: 0.5,
+          px: 1,
+          width: 'auto',
+        }
       },
     },
   },
@@ -202,11 +212,12 @@ const LCanvas = dynamic(() => import('@/components/layout/canvas'), {
 
 const Balance = ({ child }) => {
   const [r3f, dom] = partition(child, (c) => c.props.r3f === true)
+  const mobile = useBreakpointValue({ base: true, lg: false });
 
   return (
     <>
       <Dom>{dom}</Dom>
-      <LCanvas>{r3f}</LCanvas>
+      <LCanvas isMobile={mobile}>{r3f}</LCanvas>
     </>
   )
 }

src/pages/index.jsx

@@ -26,6 +26,7 @@ import {
 import { CanvasLoader } from "@/components/canvas/Loader";
 
 
+
 // Dynamic import is used to prevent a payload when the website start that will include threejs r3f etc..
 // WARNING ! errors might get obfuscated by using dynamic import.
 // If something goes wrong go back to a static import to show the error.
@@ -66,6 +67,7 @@ const DOM = () => {
 
 export const objectsDistance = 4;
 
+
 export const R3FSceneSection = ({ name, count, children, ...props }) => {
   const group = useRef(null);
   // const { layers } = props;
@@ -104,14 +106,19 @@ const R3F = () => {
   const rayMousePos = useRef(new THREE.Vector2())
   const mouse = new THREE.Vector2();
   const rayMouse = new THREE.Vector2();
+
+
+
   /**
    * Animate
    */
   const clock = new THREE.Clock();
   let previousTime = 0;
+
   /**
-         * Cursor / Mouse
+   * Cursor / Mouse
-         */
+   */
+
   // const cursor = useMemo({
   //   x: 0,
   //   y: 0
@@ -300,7 +307,9 @@ const R3F = () => {
     // rimLight.current.position.y = (-scrollY.current / sizes.current.height) * objectsDistance;
 
     if (nomad.current) {
-      nomad.current.position.y = -1.5 - Math.cos(elapsedTime * 0.1) * Math.PI * 0.05;
+      // console.log('mob?', isMobile);
+
+        nomad.current.position.y = -1.5 - Math.cos(elapsedTime * 0.1) * Math.PI * 0.05;
 
       // group.current.rotation.y = elapsedTime * 0.03;
       nomad.current.rotation.z = -0.05 - Math.sin(elapsedTime * 0.3) * Math.PI * 0.03;

yarn.lock

@@ -9,15 +9,6 @@
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.0"
 
-"@aws-amplify/cli@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/cli/-/cli-8.0.2.tgz#7dd1e7a1885cc4523223a3f5da08aaa932da08b7"
-  integrity sha512-cAsSdqlyGHAYvbHcmRADWhcEESU5rwwc8R9e0O2Ds6xeUEb4pdlpO7s4cKLOlyosK8szdny2GvI+91ZnzmKA8Q==
-  dependencies:
-    axios "^0.26.0"
-    rimraf "^3.0.2"
-    tar-stream "^2.2.0"
-
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
@@ -3622,13 +3613,6 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
-axios@^0.26.0:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
-  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
-  dependencies:
-    follow-redirects "^1.14.8"
-
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5875,7 +5859,7 @@ focus-lock@^0.9.1:
   dependencies:
     tslib "^2.0.3"
 
-follow-redirects@^1.14.0, follow-redirects@^1.14.8:
+follow-redirects@^1.14.0:
   version "1.14.9"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
@@ -9007,7 +8991,7 @@ postcss@^8.4.12:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postprocessing@6.26.3:
+postprocessing@6.26.3, postprocessing@^6.26.3:
   version "6.26.3"
   resolved "https://registry.yarnpkg.com/postprocessing/-/postprocessing-6.26.3.tgz#456922499e13e02352b3b6b14881ca8186e8a96a"
   integrity sha512-f9VMDQSLngrdJByPjza4pNHZWoEnGFdxj6GsgqGd2+RM3PYFTCZapgpX9W/FspRUg6Is38vkUfjvLxWyfBHbhQ==
@@ -10462,7 +10446,7 @@ tar-fs@^2.0.0, tar-fs@^2.1.1:
     pump "^3.0.0"
     tar-stream "^2.1.4"
 
-tar-stream@^2.1.4, tar-stream@^2.2.0:
+tar-stream@^2.1.4:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
   integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==