AtHeartEngineer/MetaFest2
1
0
Fork 0
mirror of https://github.com/AtHeartEngineer/MetaFest2.git synced 2026-01-08 04:33:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

tidying mobile & adding glitch

Browse Source 
- 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.
This commit is contained in:
luxumbra
2022-04-29 15:49:01 +01:00
parent 3456609860
commit b0f4f19fed
26 changed files with 411 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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",

BIN
public/assets/textures/particles/seed_logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
public/assets/textures/particles/seed_logo_alpha_map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

6
src/components/canvas/BabyEarth.jsx
View File

@@ -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

2
src/components/canvas/EasterEgg.jsx
View File

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

33
src/components/canvas/Galaxy.jsx
View File

@@ -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) {
console.log(i, branchAngle)
}
// if (i < 20) {
// 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) {
console.log(i, branchAngle)
}
// if (i < 20) {
// 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) {
console.log(i, branchAngle)
}
// if (i < 20) {
// 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) {
console.log(i, branchAngle)
}
// if (i < 20) {
// 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) {
console.log(i, branchAngle)
}
// if (i < 20) {
// 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

47
src/components/canvas/Jetsetter.jsx
View File

@@ -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)}
onPointerOver={(e) => setHover(true)}
onPointerOut={(e) => setHover(false)}
onClick={(e) => handleClick(route, isExternal)}
// onPointerOver={(e) => setHover(true)}
// onPointerOut={(e) => setHover(false)}
/>
</group>
);

4
src/components/canvas/Loader.jsx
View File

@@ -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})`
}

2
src/components/canvas/Nomad.jsx
View File

@@ -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;

2
src/components/canvas/Starfield.jsx
View File

@@ -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))

2
src/components/canvas/musashi/Ilb.jsx
View File

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

2
src/components/canvas/musashi/MolochPet1.jsx
View File

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

2
src/components/canvas/musashi/Robe.jsx
View File

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

2
src/components/canvas/musashi/Robe2.jsx
View File

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

6
src/components/dom/AlphaNotice.jsx
View File

@@ -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">
Alpha
<Text as="span" color="cyan" fontWeight="700">
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}
/>

10
src/components/dom/EasterEgg.jsx
View File

@@ -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 claimRef = useRef(null);
const ee1Ref = 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}

210
src/components/dom/EasterEggGlitch.jsx Normal file
View File

@@ -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>
);
};

15
src/components/dom/HeadComponent.jsx
View File

@@ -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" />

4
src/components/dom/Header.jsx
View File

@@ -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"

2
src/components/dom/models.jsx
View File

@@ -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)

17
src/components/dom/page-sections/ScheduleSection.jsx
View File

@@ -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!!`
},
{

87
src/components/layout/canvas.jsx
View File

@@ -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>
)
}

2
src/components/layout/dom.jsx
View File

@@ -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>
)
}

29
src/pages/_app.jsx
View File

@@ -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",
fontWeight: 500,
fontSize: { base: "3vmin", md: "1.1vmax", '2xl': "1vmax" },
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>
</>
)
}

15
src/pages/index.jsx
View File

@@ -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;

22
yarn.lock
View File

@@ -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==