style: reduce noise opacity

src/app/components/discordstatus.tsx

@@ -98,18 +98,22 @@ interface DiscordActivity {
     };
 }
 
-function resolveDiscordAsset(image: string | undefined): string {
+function resolveDiscordAsset(applicationId: string | undefined, image: string | undefined): string {
     if (!image) return "";
 
     if (image.startsWith("mp:external/")) {
         const httpsIndex = image.indexOf("/https/");
         if (httpsIndex !== -1) {
-            const after = image.slice(httpsIndex + "/https/".length);
+            return `https://${image.slice(httpsIndex + "/https/".length)}`;
-            return `https://${after}`;
         }
     }
 
-    if (/^\d+$/.test(image) || image.startsWith("spotify:")) return "";
+    if (image.startsWith("spotify:"))
+        return "";
+
+
+    if (applicationId && image)
+        return `https://cdn.discordapp.com/app-assets/${applicationId}/${image}.png`;
 
     return image;
 }
@@ -130,13 +134,14 @@ export function DiscordStatus({ userId }: DiscordStatusParams) {
     const [loading, setLoading] = useState<boolean>(true);
 
     useEffect(() => {
+        let interval: NodeJS.Timeout | null = null;
+
         async function fetchRichPresence() {
             try {
                 const response = await fetch(`https://api.lanyard.rest/v1/users/${userId}`);
                 const json: LanyardResponse = await response.json();
-                if (json.success) {
+                if (json.success)
                     setPresence(json.data);
-                }
             } catch (error) {
                 console.error("Failed to fetch Lanyard presence:", error);
             } finally {
@@ -144,9 +149,39 @@ export function DiscordStatus({ userId }: DiscordStatusParams) {
             }
         }
 
-        fetchRichPresence();
+        const startPolling = () => {
-        const interval = setInterval(fetchRichPresence, 30000);
+            if (!interval) {
-        return () => clearInterval(interval);
+                fetchRichPresence();
+                interval = setInterval(fetchRichPresence, 30000);
+            }
+        };
+
+        const stopPolling = () => {
+            if (interval) {
+                clearInterval(interval);
+                interval = null;
+            }
+        };
+
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible')
+                startPolling();
+            else
+                stopPolling();
+
+        };
+
+        if (document.visibilityState === 'visible')
+            startPolling();
+        else
+            setLoading(false);
+
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            stopPolling();
+        };
     }, [userId]);
 
     if (loading)
@@ -177,9 +212,10 @@ export function DiscordStatus({ userId }: DiscordStatusParams) {
         if (gameActivity.details)
             activityText += ` • ${gameActivity.details}`;
 
-        activityImage = gameActivity.assets
+        if (gameActivity.assets) {
-            ? resolveDiscordAsset(gameActivity.assets.small_image || gameActivity.assets.large_image)
+            const targetImage = gameActivity.assets.small_image || gameActivity.assets.large_image;
-            : "";
+            activityImage = resolveDiscordAsset(gameActivity.application_id, targetImage);
+        }
     }
     else if (isListeningToSpotify && presence.spotify) {
         primaryActivity = { name: "Spotify" } as DiscordActivity;

src/app/fear/page.css

@@ -0,0 +1,10 @@
+.canvas {
+	width: 100vw !important;
+	height: 100vh !important;
+	position: absolute;
+	top: 0;
+	left: 0;
+	outline: none;
+	user-select: none;
+	touch-action: none;
+}

src/app/fear/page.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import './page.css';
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { BrightnessContrast, EffectComposer, HueSaturation, Noise, Pixelation, Vignette } from "@react-three/postprocessing";
+import { Suspense, useEffect, useState } from "react";
+
+import { AmbientSound } from './scene-components/ambient-sound';
+
+import { FEAR_SETTINGS, fearState } from './state';
+
+import TheCreature from './scene-components/creature';
+import Player from './scene-components/player';
+import Hallway from './scene-components/hallway';
+
+import { AudioListener } from 'three';
+import FinaleText from './scene-components/finale-text';
+
+function PostProcessing() {
+    const [wasCaught, setWasCaught] = useState(fearState.wasCaught);
+
+    useEffect(() => {
+        const unsubscribe = fearState.subscribe(() => {
+            setWasCaught(fearState.wasCaught);
+        });
+        return () => unsubscribe();
+    }, []);
+
+    return (<EffectComposer>
+        <Pixelation granularity={wasCaught ? 18 : 10} />
+        <Vignette />
+        <Noise opacity={wasCaught ? 0.01 : 0.003} />
+        <BrightnessContrast
+            brightness={-0.01}
+            contrast={0.05}
+        />
+        <HueSaturation saturation={wasCaught ? 1 : 0} />
+    </EffectComposer>)
+}
+
+function ListenerCreator() {
+    const { camera } = useThree();
+
+    useEffect(() => {
+        const listener = new AudioListener();
+        camera.add(listener);
+
+        return () => {
+            camera.remove(listener);
+        };
+    }, [camera]);
+
+    return null;
+}
+
+function FearStateUpdater() {
+    useFrame((state, delta) => {
+        fearState.update(delta);
+    });
+    return null;
+}
+
+export default function Fear() {
+    const [isRustActive, setIsRustActive] = useState(fearState.isRustActive);
+    const [wasCaught, setWasCaught] = useState(fearState.isRustActive);
+
+    useEffect(() => {
+        const unsubscribe = fearState.subscribe(() => {
+            setIsRustActive(fearState.isRustActive);
+            setWasCaught(fearState.wasCaught)
+        });
+        return () => unsubscribe();
+    }, []);
+
+    return (<>
+        <Canvas
+            shadows
+            gl={{ antialias: true }}
+            className='canvas'
+            camera={{ position: [0, 3, -5], fov: 55, far: 100 }}
+        >
+            <FearStateUpdater />
+
+            <ListenerCreator />
+
+            <color attach="background" args={['#050505']} />
+
+            {FEAR_SETTINGS.TEST_MODE ? <ambientLight intensity={2} /> : <ambientLight intensity={0.0225} />}
+            {FEAR_SETTINGS.TEST_MODE ? null : <fogExp2 attach='fog' args={[0x050505, 0.035]} />}
+            {FEAR_SETTINGS.TEST_MODE ? null : < PostProcessing />}
+
+            <Suspense fallback={null}>
+                <Hallway />
+                <TheCreature />
+                <Player />
+            </Suspense>
+
+            <AmbientSound
+                key="ambient-1"
+                url='fear/snd/ambience.mp3'
+                volume={isRustActive ? 0 : 0.5}
+            />
+
+            <AmbientSound
+                key="ambient-2"
+                url='fear/snd/ambience2.mp3'
+                volume={isRustActive ? 1 : 0}
+            />
+
+            {wasCaught ? <AmbientSound
+                key="ambient-glitch"
+                url='fear/snd/glitch.mp3'
+                volume={1}
+            /> : null}
+        </Canvas>
+
+        <FinaleText />
+    </>)
+}

src/app/fear/scene-components/ambient-sound.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react'
+
+interface AmbientSoundProps {
+    url: string
+    volume?: number
+}
+
+export function AmbientSound({ url, volume = 0.5 }: AmbientSoundProps) {
+    const audioRef = useRef<HTMLAudioElement | null>(null)
+    const targetVolumeRef = useRef<number>(volume)
+
+    targetVolumeRef.current = volume
+
+    useEffect(() => {
+        const audio = new Audio(url)
+        audio.loop = true
+        audio.volume = 0 
+        audioRef.current = audio
+
+        let componentsMounted = true
+
+        const attemptPlay = () => {
+            if (!audioRef.current || !componentsMounted) return
+            
+            audio.volume = targetVolumeRef.current
+
+            if (audio.volume > 0 && audio.paused) {
+                audio.play().catch((err) => {
+                    console.warn('Autoplay management holding clip playback execution.', err)
+                })
+            }
+        }
+
+        attemptPlay()
+
+        window.addEventListener('click', attemptPlay)
+        window.addEventListener('keydown', attemptPlay)
+
+        return () => {
+            componentsMounted = false
+            window.removeEventListener('click', attemptPlay)
+            window.removeEventListener('keydown', attemptPlay)
+            audio.pause()
+            audio.src = ''
+            audioRef.current = null
+        }
+    }, [url])
+
+    useEffect(() => {
+        const audio = audioRef.current
+        if (!audio) return
+
+        if (volume === 0) {
+            if (!audio.paused) audio.pause()
+        } else {
+            audio.volume = volume
+            if (audio.paused) {
+                audio.play().catch(() => {})
+            }
+        }
+    }, [volume]) 
+
+    return null
+}

src/app/fear/scene-components/creature.tsx

@@ -0,0 +1,196 @@
+import { useTexture, PositionalAudio } from "@react-three/drei";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import * as THREE from "three";
+import { FEAR_SETTINGS, fearState } from "../state";
+import { ShaderPatch } from "../shader-patch";
+
+useTexture.preload('fear/img/creature.png');
+
+export default function TheCreature() {
+    const baseTexture = useTexture('fear/img/creature.png');
+
+    const texture = useMemo(() => {
+        const t = baseTexture.clone();
+        t.needsUpdate = true;
+        return t;
+    }, [baseTexture]);
+
+    const meshRef = useRef<THREE.Mesh>(null);
+    const audioRef = useRef<THREE.PositionalAudio>(null);
+    const { camera } = useThree();
+
+    const [hasTriggered, setHasTriggered] = useState(false);
+    const [isSpawned, setIsSpawned] = useState(false);
+
+    const globalDistance = useRef<number>(32);
+    const [finaleTriggered, setFinaleTriggered] = useState(fearState.finaleTriggered);
+
+    const audioPlaying = useRef<boolean>(false);
+
+    const movePhase = useRef<'frozen' | 'lurching'>('frozen');
+    const phaseTimer = useRef<number>(1.5);
+
+    const glitchCooldown = useRef<number>(0);
+    const isGlitchSpiking = useRef<boolean>(false);
+    const flickerCooldown = useRef<number>(0);
+
+    useEffect(() => {
+        const unsubscribe = fearState.subscribe(() => {
+            setFinaleTriggered(fearState.finaleTriggered);
+
+            if (!fearState.finaleTriggered) {
+                setIsSpawned(false);
+                setHasTriggered(false);
+                globalDistance.current = 32;
+                audioPlaying.current = false;
+                movePhase.current = 'frozen';
+                phaseTimer.current = 1.5;
+
+                if (audioRef.current && audioRef.current.isPlaying)
+                    audioRef.current.stop();
+            }
+        });
+        return () => unsubscribe();
+    }, []);
+
+    useFrame((state, delta) => {
+        if (!fearState.finaleTriggered) return;
+
+        const creature = meshRef.current;
+        if (!creature) return;
+
+        if (!isSpawned) {
+            setIsSpawned(true);
+            globalDistance.current = 32;
+            movePhase.current = 'frozen';
+            phaseTimer.current = 1.0 + Math.random() * 1.5;
+        }
+
+        if (!hasTriggered) {
+            if (globalDistance.current < 40)
+                setHasTriggered(true);
+
+        }
+
+        if (hasTriggered) {
+            phaseTimer.current -= delta;
+
+            if (phaseTimer.current <= 0) {
+                if (movePhase.current === 'frozen') {
+                    movePhase.current = 'lurching';
+                    phaseTimer.current = 0.05 + Math.random() * 0.2;
+                } else {
+                    movePhase.current = 'frozen';
+                    const proximityFactor = Math.max(0.05, globalDistance.current / 32);
+                    phaseTimer.current = (0.2 + Math.random() * 1.0) * proximityFactor;
+                }
+            }
+
+            if (movePhase.current === 'lurching') {
+                globalDistance.current -= FEAR_SETTINGS.CREATURE_SPEED * 3 * delta;
+            }
+
+            if (audioRef.current && !audioPlaying.current) {
+                audioPlaying.current = true;
+                if (audioRef.current.context.state === 'suspended')
+                    audioRef.current.context.resume();
+                audioRef.current.play();
+            }
+
+            const shakeIntensity = Math.max(0, 1 - (globalDistance.current / 32)) * 0.22;
+            camera.position.x += (Math.random() - 0.5) * shakeIntensity;
+            camera.position.y += (Math.random() - 0.5) * shakeIntensity;
+
+            if (globalDistance.current <= 0.1) {
+                window.location.href = '/';
+                fearState.registerCaught();
+                return;
+            }
+        }
+
+        const forwardVector = new THREE.Vector3();
+        camera.getWorldDirection(forwardVector);
+        const lookDirZ = forwardVector.z < 0 ? -1 : 1;
+
+        const calculatedZ = camera.position.z + (lookDirZ * globalDistance.current);
+
+        creature.position.set(0, 1.6, calculatedZ);
+        creature.lookAt(camera.position.x, creature.position.y, camera.position.z);
+
+        if (!hasTriggered) return;
+
+        const proximity = 1 - Math.max(0, Math.min(1, globalDistance.current / 32));
+        const jitterX = 1.0 + (Math.random() - 0.5) * 0.04 * proximity;
+        let jitterY = 1.0 + (Math.random() - 0.5) * 0.06 * proximity;
+
+        glitchCooldown.current -= delta;
+        if (glitchCooldown.current <= 0) {
+            if (Math.random() < 0.25 + proximity * 0.35) {
+                isGlitchSpiking.current = true;
+                glitchCooldown.current = 0.03 + Math.random() * 0.08;
+            } else {
+                isGlitchSpiking.current = false;
+                glitchCooldown.current = 0.08 + Math.random() * 0.4 * (1 - proximity * 0.7);
+            }
+        }
+
+        if (isGlitchSpiking.current) {
+            const spike = 0.15 + Math.random() * 0.35;
+            jitterY += Math.random() > 0.5 ? spike : -spike * 0.6;
+        }
+
+        creature.scale.set(jitterX, jitterY, 1.0);
+
+        flickerCooldown.current -= delta;
+        if (flickerCooldown.current <= 0) {
+            if (creature.visible && Math.random() < 0.12 + proximity * 0.08) {
+                creature.visible = false;
+                flickerCooldown.current = 0.02 + Math.random() * 0.05;
+            } else {
+                creature.visible = true;
+                flickerCooldown.current = 0.05 + Math.random() * 0.3 * (1 - proximity * 0.5);
+            }
+        }
+
+        texture.offset.set(
+            (Math.random() - 0.5) * 0.025 * proximity,
+            (Math.random() - 0.5) * 0.025 * proximity
+        );
+
+        if (proximity > 0.2) {
+            creature.position.x += (Math.random() - 0.5) * 0.12 * proximity;
+            creature.position.y += (Math.random() - 0.5) * 0.06 * proximity;
+        }
+    });
+
+    return (
+        <mesh
+            ref={meshRef}
+            visible={finaleTriggered}
+        >
+            <planeGeometry args={[3.0, 4.8]} />
+            <meshStandardMaterial
+                map={texture}
+                transparent={true}
+                depthWrite={false}
+                side={THREE.DoubleSide}
+                onBeforeCompile={ShaderPatch}
+                emissive="#ffffff"
+                emissiveMap={texture}
+                emissiveIntensity={0.15}
+            />
+
+            {finaleTriggered && (
+                <PositionalAudio
+                    url="fear/snd/riser.mp3"
+                    ref={audioRef}
+                    distance={25}
+                    loop={false}
+                    autoplay={false}
+                />
+            )}
+        </mesh>
+    );
+}

src/app/fear/scene-components/finale-text.css

@@ -0,0 +1,84 @@
+@font-face {
+    font-family: 'VCR';
+    src: url('/fear/fonts/vcr.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+.finale-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0vh;
+
+    display: grid;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: hidden;
+
+    /* filter: invert(100%); */
+    backdrop-filter: brightness(100%);
+
+    grid-auto-rows: 5vh;
+    /* grid-template-columns: 0; */
+    grid-template-rows: repeat(auto-fit, max-content);
+
+    user-select: none;
+
+    will-change: filter;
+    animation: invertFlicker 0.07s infinite alternate;
+
+}
+
+@keyframes invertFlicker {
+
+    0%,
+    43%,
+    45%,
+    88%,
+    92% {
+        filter: invert(0%) contrast(100%) brightness(100%);
+        backdrop-filter: brightness(100%) hue-rotate(0deg);
+    }
+
+    44%,
+    46%,
+    89%,
+    93%,
+    100% {
+        filter: invert(100%) contrast(300%) brightness(150%);
+        backdrop-filter: brightness(30%) hue-rotate(180deg) saturate(500%);
+    }
+}
+
+.finale-text {
+    font-family: 'VCR', sans-serif;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.1em;
+
+    height: 0px;
+    width: 100%;
+    color: rgb(255, 255, 255);
+    font-size: 8vh;
+
+    text-align: center;
+    white-space: nowrap;
+
+}
+
+.scanlines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 900;
+    background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px,
+            rgba(0, 0, 0, 0) 2px,
+            rgba(0, 0, 0, 0.3) 2px,
+            rgba(0, 0, 0, 0.3) 4px);
+
+}

src/app/fear/scene-components/finale-text.tsx

@@ -0,0 +1,56 @@
+import { JSX, useEffect, useState } from "react"
+import { fearState } from "../state"
+
+import './finale-text.css';
+
+const BLOCKS = [
+    "▀", "▂", "▃", "▄", "▅", "▆", "▇",
+    "█", "▉", "▊", "▋", "▌", "▍", "▎", "▏",
+    "▐", "░", "▒", "▓", "▔", "▕", "▖", "▗",
+    "▘", "▙", "▚", "▛", "▜", "▝", "▞", "▟"
+];
+
+export default function FinaleText() {
+    const [wasCaught, setWasCaught] = useState(fearState.wasCaught);
+    const [elements, setElements] = useState<JSX.Element[]>([]);
+
+    useEffect(() => {
+        const unsubscribe = fearState.subscribe(() => {
+            setWasCaught(fearState.wasCaught)
+        });
+        return () => unsubscribe();
+    }, []);
+
+
+    useEffect(() => {
+        if (!wasCaught)
+            return;
+
+        const interval = setInterval(() => {
+            if (Math.random() > 0.9) return;
+
+            const baseText = "bwaaaaaaaaa";
+            const corrupted = baseText
+                .split("")
+                .map((char) => (Math.random() > 0.98 ? BLOCKS[Math.floor(Math.random() * BLOCKS.length)] : char))
+                .join("");
+
+            setElements((prev) => [...prev.slice(-30),
+            <span className="finale-text" key={crypto.randomUUID()}>
+                {corrupted}
+            </span>
+            ]);
+        }, 10);
+
+        return () => clearInterval(interval);
+    }, [wasCaught]);
+
+    if (!wasCaught) return null;
+
+    return (<>
+        <div className="finale-container">
+            {elements}
+        </div>
+        <div className="scanlines" />
+    </>)
+}

src/app/fear/scene-components/hallway.tsx

@@ -0,0 +1,401 @@
+import { useEffect, useRef, useState } from "react";
+import { FEAR_SETTINGS, fearState } from "../state";
+import { useTexture, PositionalAudio } from "@react-three/drei";
+
+import * as THREE from "three";
+import { useFrame } from "@react-three/fiber";
+import { ShaderPatch } from "../shader-patch";
+
+interface DoorProps {
+    position: [number, number, number];
+    rotation: [number, number, number];
+}
+function Door({ position, rotation }: DoorProps) {
+    const [soundUrl, setSoundUrl] = useState<string | null>(null);
+    const currentSound = useRef<string | null>(null);
+    const steelTex = useTexture('fear/img/steel.png');
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (Math.random() < 0.02) {
+                const chosenSound = Math.random() < 0.5 ? "fear/snd/knock1.mp3" : "fear/snd/knock2.mp3";
+
+                setSoundUrl(chosenSound);
+                currentSound.current = chosenSound;
+            }
+        }, 5000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const handleAudioEnded = () => {
+        setSoundUrl(null);
+        currentSound.current = null;
+    };
+
+    return (
+        <group position={position} rotation={rotation}>
+            {/* frame */}
+            <mesh position={[0, 2, -0.1]}>
+                <boxGeometry args={[2.4, 4.0, 0.2, 4, 4, 1]} />
+                <meshStandardMaterial map={steelTex} color="#8d8d8d" onBeforeCompile={ShaderPatch} />
+            </mesh>
+
+            {/* panel */}
+            <mesh position={[0, 1.95, -0.0]}>
+                <boxGeometry args={[2.1, 3.8, 0.1, 4, 4, 1]} />
+                <meshStandardMaterial map={steelTex} color="#4e4a4a" onBeforeCompile={ShaderPatch} />
+            </mesh>
+
+            {/* handle */}
+            <mesh position={[0.75, 1.8, .085]}>
+                <boxGeometry args={[0.3, 0.08, 0.1]} />
+                <meshStandardMaterial map={steelTex} color="#ffffff" onBeforeCompile={ShaderPatch} />
+            </mesh>
+
+            {soundUrl && (
+                <PositionalAudio
+                    url={soundUrl}
+                    distance={25}
+                    loop={false}
+                    autoplay={true}
+                    onEnded={handleAudioEnded}
+                />
+            )}
+        </group>
+    );
+}
+
+export default function Hallway() {
+    const [width, setWidth] = useState(fearState.currentWidth);
+    const [floorTex, wallTex, rustWallTex, rustFloorTex] = useTexture([
+        'fear/img/concrete-floor.png',
+        'fear/img/concrete-wall.png',
+        'fear/img/rust.png',
+        'fear/img/rust.png'
+    ]);
+
+    useEffect(() => {
+        [floorTex, wallTex, rustWallTex, rustFloorTex].forEach((tex) => {
+            tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+            tex.minFilter = tex.magFilter = THREE.NearestFilter;
+            tex.colorSpace = THREE.SRGBColorSpace;
+        });
+    }, [floorTex, wallTex, rustWallTex, rustFloorTex]);
+
+
+    const segmentPool = [0, 1, 2, 3, 4];
+    const segmentCount = segmentPool.length;
+
+    const lightRefs = useRef<(THREE.PointLight | null)[]>([]);
+    const matRefs = useRef<(THREE.MeshStandardMaterial | null)[]>([]);
+
+    const lightState = useRef<'normal' | 'flickering' | 'dead'>('normal');
+    const stateEndTime = useRef<number>(0);
+    const nextEventTime = useRef<number>(5);
+
+    const segmentsRef = useRef<THREE.Group[]>([]);
+    const wallMaterialsRef = useRef<THREE.MeshStandardMaterial[]>([]);
+    const floorMaterialsRef = useRef<THREE.MeshStandardMaterial[]>([]);
+    const pipeMaterialsRef = useRef<THREE.MeshStandardMaterial[]>([]);
+    const bracketMaterialsRef = useRef<THREE.MeshStandardMaterial[]>([]);
+
+    wallMaterialsRef.current = [];
+    floorMaterialsRef.current = [];
+    pipeMaterialsRef.current = [];
+    bracketMaterialsRef.current = [];
+
+    const [isRustActive, setIsRustActive] = useState(fearState.isRustActive);
+
+    useEffect(() => {
+        const unsubscribe = fearState.subscribe(() => {
+            setWidth(fearState.currentWidth);
+            setIsRustActive(fearState.isRustActive);
+        });
+        return () => unsubscribe();
+    }, []);
+
+    useFrame((state, delta) => {
+        const time = state.clock.elapsedTime;
+
+        /*
+           lights
+        */
+        let intensity1 = 0.85 + Math.sin(time * 2) * 0.03;
+        if (time > nextEventTime.current && lightState.current === 'normal') {
+            lightState.current = 'flickering';
+            stateEndTime.current = time + 1.5 + Math.random() * 2;
+        }
+        if (lightState.current === 'flickering') {
+            if (time > stateEndTime.current) {
+                if (Math.random() > 0.4) {
+                    lightState.current = 'dead';
+                    stateEndTime.current = time + 1.0 + Math.random() * 2.5;
+                } else {
+                    lightState.current = 'normal';
+                    nextEventTime.current = time + 10 + Math.random() * 20;
+                }
+            } else {
+                const baseWave = Math.sin(time * 45) * 0.4 + Math.sin(time * 90) * 0.3;
+                intensity1 = 0.5 + baseWave;
+                if (Math.sin(time * 150) + Math.cos(time * 220) > 1.2) intensity1 *= Math.random() > 0.5 ? 0.0 : 0.15;
+            }
+        }
+        if (lightState.current === 'dead') {
+            if (time > stateEndTime.current) {
+                lightState.current = 'normal';
+                nextEventTime.current = time + 12 + Math.random() * 15;
+            } else {
+                intensity1 = Math.random() > 0.98 ? 0.08 : 0.0;
+            }
+        }
+
+        /*
+            objects
+        */
+        const length = FEAR_SETTINGS.HALLWAY_LENGTH;
+        const playerSegmentZ = Math.floor(state.camera.position.z / length);
+
+        const horizontalTexRepeat = width / FEAR_SETTINGS.HALLWAY_WIDTH;
+        floorTex.repeat.set(horizontalTexRepeat, 10);
+        wallTex.repeat.set(10, 1);
+        rustWallTex.repeat.set(10, 1);
+        rustFloorTex.repeat.set(horizontalTexRepeat, 10);
+
+        floorTex.needsUpdate = true;
+        wallTex.needsUpdate = true;
+        rustWallTex.needsUpdate = true;
+        rustFloorTex.needsUpdate = true;
+
+        let closestPoolIndex = 0;
+        let minDistance = Infinity;
+
+        segmentsRef.current.forEach((segGroup, poolIndex) => {
+            if (!segGroup) return;
+
+            let segmentZIndex = poolIndex - Math.floor(segmentCount / 2) + playerSegmentZ;
+            segGroup.position.z = segmentZIndex * length;
+
+            const distance = Math.abs(segGroup.position.z - state.camera.position.z);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestPoolIndex = poolIndex;
+            }
+
+            const leftWallGroup = segGroup.getObjectByName("left-wall-group");
+            if (leftWallGroup) leftWallGroup.position.x = -width / 2;
+
+            const rightWallGroup = segGroup.getObjectByName("right-wall-group");
+            if (rightWallGroup) rightWallGroup.position.x = width / 2;
+
+            const floorMesh = segGroup.getObjectByName("floor-mesh");
+            if (floorMesh) floorMesh.scale.x = width / FEAR_SETTINGS.HALLWAY_WIDTH;
+
+            const ceilingMesh = segGroup.getObjectByName("ceiling-mesh");
+            if (ceilingMesh) ceilingMesh.scale.x = width / FEAR_SETTINGS.HALLWAY_WIDTH;
+
+            for (let i = 0; i < 3; i++) {
+                const pipe = segGroup.getObjectByName(`pipe-${i}`);
+                if (pipe) pipe.position.x = -width / 2 + 0.4 + (i * 0.20);
+            }
+            const bracketGroup = segGroup.getObjectByName("brackets-group");
+            if (bracketGroup) {
+                bracketGroup.children.forEach(b => {
+                    b.position.x = -width / 2 + 0.6;
+                });
+            }
+        });
+
+        /*
+            dyn light
+        */
+        segmentPool.forEach((poolIndex) => {
+            const light = lightRefs.current[poolIndex];
+            const mat = matRefs.current[poolIndex];
+
+            if (poolIndex === closestPoolIndex) {
+                if (light) light.intensity = intensity1 * 1.2;
+                if (mat) {
+                    mat.emissiveIntensity = intensity1 * 2.5;
+                    if (lightState.current !== 'normal') mat.emissive.setHSL(0.07, 0.4, Math.min(intensity1, 0.7));
+                    else mat.emissive.setHex(0xa8a1a1);
+                }
+            } else {
+                if (light) light.intensity = 0.9;
+                if (mat) {
+                    mat.emissiveIntensity = 0.8;
+                    mat.emissive.setHex(0xa8a1a1);
+                }
+            }
+        });
+
+        /*
+            materials
+        */
+        const updateMaterials = (materials: THREE.MeshStandardMaterial[], defaultTex: THREE.Texture, targetRustTex: THREE.Texture, activeColor: string, defaultColor: string, activeRough: number, defaultRough: number, activeMetal: number, defaultMetal: number) => {
+            materials.forEach(mat => {
+                if (!mat) return;
+                const targetTex = isRustActive ? targetRustTex : defaultTex;
+                if (mat.map !== targetTex) {
+                    mat.map = targetTex;
+                    mat.needsUpdate = true;
+                }
+                mat.color.set(isRustActive ? activeColor : defaultColor);
+                mat.roughness = isRustActive ? activeRough : defaultRough;
+                mat.metalness = isRustActive ? activeMetal : defaultMetal;
+            });
+        };
+
+        updateMaterials(wallMaterialsRef.current, wallTex, rustWallTex, "#c5c0be", "#ffffff", 0.95, 0.7, 0.05, 0.1);
+        updateMaterials(floorMaterialsRef.current, floorTex, rustFloorTex, "#cabdb9", "#ffffff", 0.95, 0.8, 0.05, 0.2);
+
+        pipeMaterialsRef.current.forEach(mat => {
+            if (!mat) return;
+            mat.color.set(isRustActive ? "#3d1b0f" : "#a5aca8");
+            mat.roughness = isRustActive ? 0.95 : 0.0;
+            mat.metalness = isRustActive ? 0.05 : 0.4;
+        });
+
+        bracketMaterialsRef.current.forEach(mat => {
+            if (!mat) return;
+            mat.color.set(isRustActive ? "#1b0b05" : "#a5aca8");
+            mat.roughness = isRustActive ? 0.95 : 0.0;
+            mat.metalness = isRustActive ? 0.05 : 0.4;
+        });
+    });
+
+    return (
+        <>
+            {segmentPool.map((poolIndex) => (
+                <group
+                    key={poolIndex}
+                    ref={(el) => { if (el) segmentsRef.current[poolIndex] = el; }}
+                    position={[0, 0, 0]}
+                >
+                    {/* lights */}
+                    <group position={[0, FEAR_SETTINGS.HALLWAY_HEIGHT - 0.1, -FEAR_SETTINGS.HALLWAY_LENGTH / 4]}>
+                        <pointLight
+                            ref={(el) => { lightRefs.current[poolIndex] = el; }}
+                            intensity={0.9}
+                            distance={15}
+                            color="#a8a1a1"
+                        />
+                        <mesh position={[0, 0.09, 0]}>
+                            <boxGeometry args={[0.3, 0.01, 0.3]} />
+                            <meshStandardMaterial
+                                ref={(el) => { matRefs.current[poolIndex] = el; }}
+                                color="#111111"
+                                emissive="#a8a1a1"
+                                emissiveIntensity={0.8}
+                                roughness={0.9}
+                                onBeforeCompile={ShaderPatch}
+                            />
+                        </mesh>
+                    </group>
+
+                    {/* floor */}
+                    <mesh
+                        name="floor-mesh"
+                        rotation={[-Math.PI / 2, 0, 0]}
+                        position={[0, 0, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}
+                    >
+                        <planeGeometry args={[FEAR_SETTINGS.HALLWAY_WIDTH, FEAR_SETTINGS.HALLWAY_LENGTH, 4, 10]} />
+                        <meshStandardMaterial
+                            ref={(el) => { if (el) floorMaterialsRef.current.push(el); }}
+                            map={floorTex}
+                            onBeforeCompile={ShaderPatch}
+                        />
+                    </mesh>
+
+                    {/* ceiling */}
+                    <mesh
+                        name="ceiling-mesh"
+                        rotation={[Math.PI / 2, 0, 0]}
+                        position={[0, FEAR_SETTINGS.HALLWAY_HEIGHT, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}
+                    >
+                        <planeGeometry args={[FEAR_SETTINGS.HALLWAY_WIDTH, FEAR_SETTINGS.HALLWAY_LENGTH, 4, 10]} />
+                        <meshStandardMaterial
+                            ref={(el) => { if (el) floorMaterialsRef.current.push(el); }}
+                            map={floorTex}
+                            onBeforeCompile={ShaderPatch}
+                        />
+                    </mesh>
+
+                    {/* left wall */}
+                    <group name="left-wall-group">
+                        <mesh rotation={[0, Math.PI / 2, 0]} position={[0, FEAR_SETTINGS.HALLWAY_HEIGHT / 2, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}>
+                            <planeGeometry args={[FEAR_SETTINGS.HALLWAY_LENGTH, FEAR_SETTINGS.HALLWAY_HEIGHT, 10, 4]} />
+                            <meshStandardMaterial
+                                ref={(el) => { if (el) wallMaterialsRef.current.push(el); }}
+                                map={wallTex}
+                                onBeforeCompile={ShaderPatch}
+                            />
+                        </mesh>
+                        {!isRustActive && (
+                            <>
+                                <Door position={[0.05, 0, -FEAR_SETTINGS.HALLWAY_LENGTH * 0.25]} rotation={[0, Math.PI / 2, 0]} />
+                                <Door position={[0.05, 0, -FEAR_SETTINGS.HALLWAY_LENGTH * 0.85]} rotation={[0, Math.PI / 2, 0]} />
+                            </>
+                        )}
+                    </group>
+
+                    {/* right wall */}
+                    <group name="right-wall-group">
+                        <mesh rotation={[0, -Math.PI / 2, 0]} position={[0, FEAR_SETTINGS.HALLWAY_HEIGHT / 2, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}>
+                            <planeGeometry args={[FEAR_SETTINGS.HALLWAY_LENGTH, FEAR_SETTINGS.HALLWAY_HEIGHT, 10, 4]} />
+                            <meshStandardMaterial
+                                ref={(el) => { if (el) wallMaterialsRef.current.push(el); }}
+                                map={wallTex}
+                                onBeforeCompile={ShaderPatch}
+                            />
+                        </mesh>
+                        {!isRustActive && (
+                            <Door position={[-0.05, 0, -FEAR_SETTINGS.HALLWAY_LENGTH * 0.65]} rotation={[0, -Math.PI / 2, 0]} />
+                        )}
+                    </group>
+
+                    {/* pipes */}
+                    {Array.from({ length: 3 }).map((_, idx) => (
+                        <mesh
+                            key={idx}
+                            name={`pipe-${idx}`}
+                            rotation={[Math.PI / 2, 0, 0]}
+                            position={[-FEAR_SETTINGS.HALLWAY_WIDTH / 2 + 0.4 + (idx * 0.20), FEAR_SETTINGS.HALLWAY_HEIGHT - 0.2, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}
+                        >
+                            <cylinderGeometry args={[0.06, 0.06, FEAR_SETTINGS.HALLWAY_LENGTH, 4]} />
+                            <meshStandardMaterial
+                                ref={(el) => el && pipeMaterialsRef.current.push(el)}
+                                color="#a5aca8"
+                                roughness={0.0}
+                                metalness={0.4}
+                                onBeforeCompile={ShaderPatch}
+                            />
+                        </mesh>
+                    ))}
+
+                    {/* brackets */}
+                    <group name="brackets-group">
+                        {Array.from({ length: 5 }).map((_, idx) => {
+                            const zOffset = -(idx * 8 + 4);
+                            return (
+                                <mesh
+                                    key={`bracket-${idx}`}
+                                    position={[-FEAR_SETTINGS.HALLWAY_WIDTH / 2 + 0.6, FEAR_SETTINGS.HALLWAY_HEIGHT - 0.15, zOffset]}
+                                >
+                                    <boxGeometry args={[0.7, 0.3, 0.15]} />
+                                    <meshStandardMaterial
+                                        ref={(el) => el && bracketMaterialsRef.current.push(el)}
+                                        color="#a5aca8"
+                                        roughness={0.0}
+                                        metalness={0.4}
+                                        onBeforeCompile={ShaderPatch}
+                                    />
+                                </mesh>
+                            );
+                        })}
+                    </group>
+                </group>
+            ))}
+        </>
+    );
+}

src/app/fear/scene-components/player.tsx

@@ -0,0 +1,194 @@
+import { useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useRef } from "react";
+import { FEAR_SETTINGS, fearState } from "../state";
+import { PointerLockControls } from "@react-three/drei";
+import * as THREE from "three";
+
+const forward = new THREE.Vector3();
+const side = new THREE.Vector3();
+const viewDirection = new THREE.Vector3();
+const targetDest = new THREE.Vector3();
+
+const playerRoot = new THREE.Vector3(0, FEAR_SETTINGS.PLAYER_HEIGHT, 0);
+const targetVelocity = new THREE.Vector3();
+const currentVelocity = new THREE.Vector3();
+
+function usePlayerControls() {
+    const keys = useRef({ Forward: false, Backward: false, Left: false, Right: false });
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.code === 'KeyW' || e.code === 'ArrowUp') keys.current.Forward = true;
+            if (e.code === 'KeyS' || e.code === 'ArrowDown') keys.current.Backward = true;
+            if (e.code === 'KeyA' || e.code === 'ArrowLeft') keys.current.Left = true;
+            if (e.code === 'KeyD' || e.code === 'ArrowRight') keys.current.Right = true;
+        };
+
+        const handleKeyUp = (e: KeyboardEvent) => {
+            if (e.code === 'KeyW' || e.code === 'ArrowUp') keys.current.Forward = false;
+            if (e.code === 'KeyS' || e.code === 'ArrowDown') keys.current.Backward = false;
+            if (e.code === 'KeyA' || e.code === 'ArrowLeft') keys.current.Left = false;
+            if (e.code === 'KeyD' || e.code === 'ArrowRight') keys.current.Right = false;
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+
+    return keys.current;
+}
+
+export default function Player() {
+    const { camera } = useThree();
+    const controls = usePlayerControls();
+
+    const flashlightRef = useRef<THREE.SpotLight>(null);
+    const movementCounter = useRef<number>(0);
+    const bobIntensity = useRef<number>(0);
+
+    const confirmedSegment = useRef<number>(0);
+    const hasTriggeredThisSegment = useRef<boolean>(false);
+
+    const footstepAudio = useRef<HTMLAudioElement[]>([]);
+    const hasStepped = useRef<boolean>(false);
+
+
+
+    useEffect(() => {
+        playerRoot.set(camera.position.x, FEAR_SETTINGS.PLAYER_HEIGHT, camera.position.z);
+        footstepAudio.current = Array.from({ length: 6 }, (_, i) => {
+            const audio = new Audio(`fear/snd/footstep${i + 1}.mp3`);
+            audio.volume = 0.4;
+            return audio;
+        });
+    }, []);
+
+    const playRandomFootstep = () => {
+        if (footstepAudio.current.length === 0) return;
+
+        const randomIndex = Math.floor(Math.random() * footstepAudio.current.length);
+        const audio = footstepAudio.current[randomIndex];
+
+        audio.currentTime = 0;
+        audio.play().catch((err) => {
+            console.warn("Footstep playback blocked by browser autocomplete/interaction rules.", err);
+        });
+    };
+
+    useFrame((state, delta) => {
+        const dt = Math.min(delta, 0.1);
+
+        camera.getWorldDirection(forward);
+        forward.y = 0;
+        forward.normalize();
+        side.crossVectors(forward, THREE.Object3D.DEFAULT_UP).normalize();
+
+        const moveForward = Number(controls.Forward) - Number(controls.Backward);
+        const moveSide = Number(controls.Right) - Number(controls.Left);
+
+        targetVelocity.set(0, 0, 0);
+        if (moveForward !== 0) targetVelocity.addScaledVector(forward, moveForward);
+        if (moveSide !== 0) targetVelocity.addScaledVector(side, moveSide);
+
+        if (targetVelocity.lengthSq() > 0)
+            targetVelocity.normalize().multiplyScalar(FEAR_SETTINGS.PLAYER_SPEED);
+
+        currentVelocity.lerp(targetVelocity, 10 * dt);
+
+        playerRoot.x += currentVelocity.x * dt;
+        playerRoot.z += currentVelocity.z * dt;
+
+        const minX = -fearState.currentWidth / 2 + FEAR_SETTINGS.WALL_BUFFER;
+        const maxX = fearState.currentWidth / 2 - FEAR_SETTINGS.WALL_BUFFER;
+        playerRoot.x = THREE.MathUtils.clamp(playerRoot.x, minX, maxX);
+
+        const isMoving = controls.Forward || controls.Backward || controls.Left || controls.Right;
+
+        bobIntensity.current = THREE.MathUtils.lerp(bobIntensity.current, isMoving ? 1 : 0, 8 * dt);
+
+        if (isMoving)
+            movementCounter.current += dt * 12;
+
+        const sinWave = Math.sin(movementCounter.current);
+        const moveBobY = sinWave * 0.06 * bobIntensity.current;
+        const moveBobX = Math.cos(movementCounter.current / 2) * 0.04 * bobIntensity.current;
+
+        if (isMoving && sinWave < -0.9) {
+            if (!hasStepped.current) {
+                playRandomFootstep();
+                hasStepped.current = true;
+            }
+        } else if (sinWave > 0) {
+            hasStepped.current = false;
+        }
+
+        const breatheTime = state.clock.elapsedTime * 1.8;
+        const breatheBobY = Math.sin(breatheTime) * 0.03 * (1 - bobIntensity.current * 0.5);
+
+        camera.position.copy(playerRoot);
+        camera.position.y += moveBobY + breatheBobY;
+        camera.position.addScaledVector(side, moveBobX);
+
+        if (flashlightRef.current) {
+            flashlightRef.current.position.lerp(camera.position, 7 * dt);
+            camera.getWorldDirection(viewDirection);
+
+            targetDest
+                .copy(camera.position)
+                .addScaledVector(viewDirection, 10);
+
+            flashlightRef.current.target.position.lerp(targetDest, 12 * dt);
+            flashlightRef.current.target.updateMatrixWorld();
+
+            flashlightRef.current.intensity =
+                FEAR_SETTINGS.FLASHLIGHT_INTENSITY_BASE +
+                Math.sin(state.clock.elapsedTime * 30) * 0.15 * Math.cos(state.clock.elapsedTime * 3);
+        }
+
+        const length = FEAR_SETTINGS.HALLWAY_LENGTH;
+        const absoluteZ = -playerRoot.z;
+        const rawSegmentIndex = Math.floor(absoluteZ / length);
+        const progressZ = ((absoluteZ % length) + length) % length / length;
+
+        if (rawSegmentIndex > confirmedSegment.current && progressZ > 0.25) {
+            if (!hasTriggeredThisSegment.current) {
+                fearState.registerLoop('forward');
+                hasTriggeredThisSegment.current = true;
+            }
+            confirmedSegment.current = rawSegmentIndex;
+        }
+        else if (rawSegmentIndex < confirmedSegment.current && progressZ < 0.75) {
+            if (!hasTriggeredThisSegment.current) {
+                fearState.registerLoop('backward');
+                hasTriggeredThisSegment.current = true;
+            }
+            confirmedSegment.current = rawSegmentIndex;
+        }
+
+        if (rawSegmentIndex === confirmedSegment.current && progressZ > 0.35 && progressZ < 0.65) {
+            hasTriggeredThisSegment.current = false;
+        }
+    });
+
+    return (
+        <>
+            <PointerLockControls />
+            <spotLight
+                ref={flashlightRef}
+                distance={25}
+                angle={0.35}
+                penumbra={0.8}
+                intensity={0}
+                color="#fffaed"
+                decay={2}
+                castShadow
+                shadow-bias={-0.001}
+            />
+        </>
+    );
+}

src/app/fear/shader-patch.ts

@@ -0,0 +1,57 @@
+export function ShaderPatch(shader: { vertexShader: string, fragmentShader: string, uniforms: Object }) {
+    shader.vertexShader = `
+        varying float vDepth;
+        #ifdef USE_MAP
+            varying vec2 vAffineUv;
+        #endif
+        ${shader.vertexShader}
+    `;
+
+    shader.vertexShader = shader.vertexShader.replace(
+        `#include <project_vertex>`,
+        `
+        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+        gl_Position = projectionMatrix * mvPosition;
+        
+        float precisionModifier = 200.0;
+        gl_Position.xy /= gl_Position.w;
+        gl_Position.xy = floor(gl_Position.xy * precisionModifier) / precisionModifier;
+        gl_Position.xy *= gl_Position.w;
+
+        vDepth = gl_Position.w;
+        
+        #ifdef USE_MAP
+            vAffineUv = vMapUv * gl_Position.w; 
+        #endif
+        `
+    );
+
+    shader.fragmentShader = `
+        varying float vDepth;
+        #ifdef USE_MAP
+            varying vec2 vAffineUv;
+        #endif
+        ${shader.fragmentShader}
+    `;
+
+    shader.fragmentShader = shader.fragmentShader.replace(
+        `#include <map_fragment>`,
+        `
+        #ifdef USE_MAP
+            vec2 flatAffineUV = vAffineUv / max(vDepth, 0.001);
+            
+            vec2 warpDiff = flatAffineUV - vMapUv;
+            float warpDist = length(warpDiff);
+            
+            float maxDistortion = 0.25; 
+            
+            float falloff = maxDistortion / (maxDistortion + warpDist);
+            
+            vec2 finalUV = vMapUv + (warpDiff * falloff);
+            
+            vec4 texelColor = texture2D( map, finalUV );
+            diffuseColor *= texelColor;
+        #endif
+        `
+    );
+}

src/app/fear/state.ts

@@ -0,0 +1,74 @@
+import * as THREE from 'three';
+
+export const FEAR_SETTINGS = {
+    HALLWAY_LENGTH: 40,
+    HALLWAY_WIDTH: 6,
+    HALLWAY_HEIGHT: 5,
+    PLAYER_HEIGHT: 3,
+    PLAYER_SPEED: 4,
+    FLASHLIGHT_INTENSITY_BASE: 8,
+    WALL_BUFFER: 0.6,
+    CREATURE_SPEED: 8,
+
+    EVENT_NARROW_LOOP_COUNT: 2,
+    EVENT_RUST_LOOP_COUNT: 4,
+    EVENT_FINALE_LOOP_COUNT: 5,
+
+    EVENT_FINALE_DURATION: 1,
+
+    TEST_MODE: false
+};
+
+const listeners = new Set<() => void>();
+
+export const fearState = {
+    loopCount: 0,
+    currentWidth: FEAR_SETTINGS.HALLWAY_WIDTH,
+    isRustActive: false,
+    finaleTriggered: false,
+    wasCaught: false,
+    finaleProgression: 0,
+
+    subscribe(listener: () => void) {
+        listeners.add(listener);
+        return () => { listeners.delete(listener); };
+    },
+
+    emit() {
+        listeners.forEach((listener) => listener());
+    },
+
+    update(delta: number) {
+        const targetWidth = this.loopCount >= FEAR_SETTINGS.EVENT_NARROW_LOOP_COUNT ? 2.5 : FEAR_SETTINGS.HALLWAY_WIDTH;
+        const newWidth = THREE.MathUtils.lerp(this.currentWidth, targetWidth, 2 * delta);
+
+        if (Math.abs(this.currentWidth - newWidth) > 0.001) {
+            this.currentWidth = newWidth;
+        }
+
+        if (this.wasCaught) {
+            if (this.finaleProgression < FEAR_SETTINGS.EVENT_FINALE_DURATION) {
+
+                this.finaleProgression = Math.min(this.finaleProgression + delta, FEAR_SETTINGS.EVENT_FINALE_DURATION);
+            } else {
+                window.location.href = '/';
+            }
+        }
+
+        this.emit();
+    },
+
+    registerLoop(direction: 'forward' | 'backward') {
+        this.loopCount += 1;
+
+        this.isRustActive = this.loopCount >= FEAR_SETTINGS.EVENT_RUST_LOOP_COUNT;
+        this.finaleTriggered = this.loopCount >= FEAR_SETTINGS.EVENT_FINALE_LOOP_COUNT;
+
+        this.emit();
+    },
+
+    registerCaught() {
+        this.wasCaught = true;
+        this.emit();
+    }
+};

src/app/layout.tsx

@@ -5,11 +5,11 @@ export const metadata: Metadata = {
 	title: '⛧',
 	// description: '',
 	openGraph: {
-		title: '⛧',
+		// title: '⛧',
 		// description: '',
 		images: [
 			{
-				url: 'https://neru.rip/ok.jpg',
+				url: 'https://neru.rip/img/ok.jpg',
 				width: 734,
 				height: 1104,
 			},

src/app/niko/page.css

@@ -0,0 +1,46 @@
+.canvas {
+	width: 100vw !important;
+	height: 100vh !important;
+}
+
+.loader {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: black;
+	z-index: 4444;
+	transition: opacity 1s ease-in-out;
+	pointer-events: none;
+
+	opacity: 1;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	will-change: opacity;
+}
+
+.loader.hidden {
+	opacity: 0;
+}
+
+.niko-spin {
+	width: 50vw;
+	height: auto;
+	display: block;
+	animation: spin 3s ease-in-out infinite;
+	will-change: transform;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}

src/app/niko/page.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import './page.css';
+
+import { Environment, OrbitControls, useProgress } from "@react-three/drei";
+import { Canvas, useLoader } from '@react-three/fiber';
+import { Bloom, BrightnessContrast, DepthOfField, EffectComposer, HueSaturation, LUT, Noise, SMAA, SSAO, Vignette } from '@react-three/postprocessing';
+import { useLayoutEffect, useState } from "react";
+import { folder, useControls, Leva } from 'leva';
+import SealCube from './scene-components/sealcube';
+import Terrain from './scene-components/terrain';
+import { LUTCubeLoader } from 'three/examples/jsm/Addons.js';
+import { AmbientSound } from './scene-components/ambient-sound';
+
+function Loader() {
+  const { progress, active } = useProgress();
+  const [visible, setVisible] = useState(true);
+
+  useLayoutEffect(() => {
+    if (!active && progress === 100) {
+      const timeout = setTimeout(() => setVisible(false), 500);
+      return () => clearTimeout(timeout);
+    }
+  }, [progress, active]);
+
+  return (
+    <div className={`loader ${!visible ? 'loader hidden' : ''}`}>
+      <picture>
+        <img src='niko/img/niko.jpg' className='niko-spin' />
+      </picture>
+    </div>
+  );
+}
+
+function Scene() {
+  const {
+    terrainDryColor,
+    terrainLushColor,
+    chunks,
+    chunkSize,
+    resolution,
+    hillScale,
+    hillHeight,
+    detailScale,
+    detailHeight,
+    grassDryColor,
+    grassLushColor,
+    grassCount,
+    grassSize,
+    grassLOD,
+    grassBlades,
+    grassSegments,
+    grassLODStart,
+    grassLODExponent
+  } = useControls('Environment', {
+    Terrain: folder({
+      terrainDryColor: '#232a0c',
+      terrainLushColor: '#142a14',
+      chunks: { value: 16, min: 4, max: 24, step: 2 },
+      chunkSize: { value: 10.0, min: 5.0, max: 40.0, step: 1.0 },
+      resolution: { value: 8.0, min: 4.0, max: 30.0, step: 1.0 },
+      hillScale: { value: 0.15, min: 0.01, max: 0.5, step: 0.01 },
+      hillHeight: { value: 4.0, min: 0.0, max: 20.0, step: 0.5 },
+      detailScale: { value: 1.0, min: 0.1, max: 5.0, step: 0.1 },
+      detailHeight: { value: 0.3, min: 0.0, max: 2.0, step: 0.05 },
+    }),
+    Grass: folder({
+      grassDryColor: '#495a17',
+      grassLushColor: '#255825',
+      grassCount: { value: 8000, min: 1000, max: 30000, step: 500 },
+      grassSize: { value: 0.85, min: 0.1, max: 2.0, step: 0.05 },
+      grassLOD: { value: 60, min: 10, max: 200, step: 5 },
+      grassBlades: { value: 3, min: 1, max: 5, step: 1 },
+      grassSegments: { value: 4, min: 1, max: 5, step: 1 },
+      grassLODStart: { value: 0.15, min: 0.0, max: 0.9, step: 0.05 },
+      grassLODExponent: { value: 1.8, min: 0.5, max: 3.0, step: 0.1 },
+    })
+  });
+
+  return (<>
+    <Environment
+      files={'niko/hdr/sky.hdr'}
+      environmentIntensity={0.85}
+      background
+    />
+
+    <fogExp2 attach='fog' args={[0xa3a5ba, 0.0125]} />
+
+    <ambientLight intensity={0.5} />
+    <directionalLight
+      position={[15, 25, 15]}
+      intensity={1}
+    />
+
+    <Terrain
+      chunks={chunks}
+      chunkSize={chunkSize}
+      resolution={resolution}
+      scale={1}
+      hillScale={hillScale}
+      hillHeight={hillHeight}
+      detailScale={detailScale}
+      detailHeight={detailHeight}
+      grassCount={grassCount}
+      grassSize={grassSize}
+      grassLOD={grassLOD}
+      terrainDryColor={terrainDryColor}
+      terrainLushColor={terrainLushColor}
+      grassDryColor={grassDryColor}
+      grassLushColor={grassLushColor}
+      grassBlades={grassBlades}
+      grassSegments={grassSegments}
+      grassLODStart={grassLODStart}
+      grassLODExponent={grassLODExponent}
+    />
+
+    <SealCube />
+  </>)
+}
+
+function LutEffect() {
+  const lutTexture = useLoader(LUTCubeLoader, 'niko/lut/Landscape6.cube');
+  return <LUT lut={lutTexture.texture3D} />;
+}
+
+function PostProcessing() {
+  return (<EffectComposer>
+    <DepthOfField target={[0, 3, 0]} focalLength={10} bokehScale={5} />
+    <Vignette />
+    <Noise opacity={0.05} />
+    <Bloom
+      intensity={0.8}
+      luminanceThreshold={0.4}
+      luminanceSmoothing={0.5}
+    />
+    <SMAA />
+    <HueSaturation saturation={0.3} />
+    <BrightnessContrast brightness={0.05} contrast={-0.1} />
+    <LutEffect />
+  </EffectComposer>)
+}
+
+export default function Seal() {
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  return (
+    <>
+      <Leva hidden={isProduction} />
+
+      <Loader />
+      <Canvas
+        shadows
+        camera={{ position: [0, 5, 15], fov: 50, far: 100 }}
+        gl={{ antialias: false, powerPreference: "high-performance" }}
+        className='canvas'
+      >
+        <AmbientSound url="niko/snd/wind.mp3" volume={0.4} />
+        <AmbientSound url="niko/snd/birds.mp3" volume={0.1} />
+
+        <Scene />
+        <PostProcessing />
+
+        <OrbitControls
+          target={[0, 3, 0]}
+          enablePan={false}
+          makeDefault
+          minDistance={2}
+          maxDistance={6}
+        />
+      </Canvas>
+    </>
+  );
+}

src/app/niko/scene-components/ambient-sound.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react'
+
+interface AmbientSoundProps {
+    url: string
+    volume?: number
+}
+
+export function AmbientSound({ url, volume = 0.5 }: AmbientSoundProps) {
+    const audioRef = useRef<HTMLAudioElement | null>(null)
+
+    useEffect(() => {
+        const audio = new Audio(url)
+        audio.loop = true
+        audio.volume = volume
+        audioRef.current = audio
+
+        const startAudio = () => {
+            audio.play().catch((err) => {
+                console.warn('Autoplay blocked. Waiting for user interaction.', err)
+            })
+        }
+
+        startAudio()
+
+        window.addEventListener('click', startAudio, { once: true })
+        window.addEventListener('keydown', startAudio, { once: true })
+
+        return () => {
+            window.removeEventListener('click', startAudio)
+            window.removeEventListener('keydown', startAudio)
+            audio.pause()
+            audioRef.current = null
+        }
+    }, [url])
+
+    useEffect(() => {
+        if (audioRef.current) {
+            audioRef.current.volume = volume
+        }
+    }, [volume])
+
+    return null
+}

src/app/niko/scene-components/grass.tsx

@@ -0,0 +1,312 @@
+import { useFrame, useLoader } from "@react-three/fiber";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { BufferAttribute, BufferGeometry, Color, DoubleSide, InstancedMesh, MeshStandardMaterial, Object3D, TextureLoader } from "three";
+import { getTerrainHeight, Shader } from "./helpers";
+
+import grassVert from './shaders/grass.vert';
+import grassFrag from './shaders/grass.frag';
+
+interface GrassProps {
+	x: number;
+	y: number;
+	size: number;
+	count: number;
+	grassSize: number;
+	scale: number;
+	hillScale: number;
+	hillHeight: number;
+	detailScale: number;
+	detailHeight: number;
+	noise2D: (x: number, y: number) => number;
+	grassLOD: number;
+	dryColor: string;
+	lushColor: string;
+	grassBlades?: number;
+	grassSegments?: number;
+	grassLODStart?: number;
+	grassLODExponent?: number;
+}
+
+export default function Grass({
+	x,
+	y,
+	size,
+	count,
+	grassSize,
+	scale,
+	hillScale,
+	hillHeight,
+	detailScale,
+	detailHeight,
+	noise2D,
+	grassLOD,
+	dryColor = '#556b19',
+	lushColor = '#348a34',
+	grassBlades = 3,
+	grassSegments = 4,
+	grassLODStart = 0.5,
+	grassLODExponent = 1.0
+}: GrassProps) {
+	const meshRef = useRef<InstancedMesh>(null);
+	const dummyRef = useRef<Object3D>(new Object3D());
+
+	const [alphaMap, normalMap] = useLoader(TextureLoader, [
+		'niko/img/grass_alpha.png',
+		'niko/img/grass_normal.png'
+	]);
+
+	const materialRef = useRef<
+		MeshStandardMaterial & { userData: { shader: Shader } }
+	>(null);
+
+	useFrame((state) => {
+		if (
+			materialRef.current &&
+			materialRef.current.userData &&
+			materialRef.current.userData.shader
+		) {
+			(materialRef.current.userData.shader as Shader).uniforms.uTime.value =
+				state.clock.getElapsedTime();
+		}
+	});
+
+	const geometry = useMemo(() => {
+		const geo = new BufferGeometry();
+
+		const w = 0.5;
+		const h = 2;
+		const segments = grassSegments;
+		const bladesCount = grassBlades;
+
+		const positions: number[] = [];
+		const uvs: number[] = [];
+		const indices: number[] = [];
+
+		for (let i = 0; i < bladesCount; i++) {
+			const angle = (Math.PI / bladesCount) * i;
+			const sinA = Math.sin(angle);
+			const cosA = Math.cos(angle);
+
+			const offset = positions.length / 3;
+
+			for (let y = 0; y <= segments; y++) {
+				const v = y / segments;
+				const yPos = v * h;
+
+				positions.push(-w * cosA, yPos, -w * sinA);
+				uvs.push(0, v);
+
+				positions.push(w * cosA, yPos, w * sinA);
+				uvs.push(1, v);
+			}
+
+			for (let y = 0; y < segments; y++) {
+				const row1 = offset + y * 2;
+				const row2 = offset + (y + 1) * 2;
+
+				indices.push(row1, row1 + 1, row2);
+				indices.push(row1 + 1, row2 + 1, row2);
+			}
+		}
+
+		geo.setAttribute(
+			'position',
+			new BufferAttribute(new Float32Array(positions), 3)
+		);
+		geo.setAttribute('uv', new BufferAttribute(new Float32Array(uvs), 2));
+		geo.setIndex(indices);
+		geo.computeVertexNormals();
+
+		return geo;
+	}, [grassBlades, grassSegments]);
+
+	useLayoutEffect(() => {
+		if (!meshRef.current) return;
+		const dummy = dummyRef.current;
+
+		const worldXBase = x * size;
+		const worldZBase = y * size;
+
+		const color = new Color();
+		const lushColorObj = new Color(lushColor);
+		const dryColorObj = new Color(dryColor);
+
+		let instanceIndex = 0;
+
+		for (let i = 0; i < count; i++) {
+			const localX = (Math.random() - 0.5) * size;
+			const localZ = (Math.random() - 0.5) * size;
+
+			const globalX = worldXBase + localX;
+			const globalZ = worldZBase + localZ;
+
+			const dist = Math.sqrt(globalX * globalX + globalZ * globalZ);
+
+			const maxDist = grassLOD;
+
+			const falloffStart = maxDist * grassLODStart;
+			const falloffEnd = maxDist;
+
+			let fallofFactor = (dist - falloffStart) / (falloffEnd - falloffStart);
+			fallofFactor = Math.max(0, Math.min(1, fallofFactor));
+
+			const density = Math.pow(1.0 - fallofFactor, grassLODExponent);
+
+			if (Math.random() > density) continue;
+
+			const localY = getTerrainHeight(
+				localX,
+				localZ,
+				worldXBase,
+				worldZBase,
+				scale,
+				hillScale,
+				hillHeight,
+				detailScale,
+				detailHeight,
+				noise2D
+			);
+
+			dummy.position.set(localX, localY, localZ);
+
+			dummy.rotation.y = Math.random() * Math.PI * 2;
+			dummy.rotation.x = (Math.random() - 0.5) * 0.2;
+			dummy.rotation.z = (Math.random() - 0.5) * 0.2;
+
+			const noiseVal = noise2D(globalX * 0.02, globalZ * 0.02);
+			const t = (noiseVal + 1) / 2;
+			const randomInternal = (Math.random() - 0.5) * 0.2;
+			const finalT = Math.max(0, Math.min(1, t + randomInternal));
+			color.lerpColors(dryColorObj, lushColorObj, finalT);
+			meshRef.current.setColorAt(instanceIndex, color);
+
+			const heightNoise = noise2D(globalX * 0.08, globalZ * 0.08);
+			const macroHeight = (heightNoise + 1.0) * 0.5; // 0..1
+			const microNoise = noise2D(globalX * 0.3, globalZ * 0.3);
+			const microHeight = (microNoise + 1.0) * 0.25; // 0..0.5
+			const perBladeRandom = Math.random() * 0.4;
+
+			const grassWidth = grassSize * (0.7 + Math.random() * 0.5);
+			const grassHeight = grassSize * (0.4 + macroHeight * 0.8 + microHeight + perBladeRandom);
+
+			dummy.scale.set(grassWidth, grassHeight, grassWidth);
+
+			dummy.updateMatrix();
+			meshRef.current.setMatrixAt(instanceIndex, dummy.matrix);
+
+			instanceIndex++;
+		}
+		meshRef.current.count = instanceIndex;
+
+		meshRef.current.instanceMatrix.needsUpdate = true;
+		if (meshRef.current.instanceColor)
+			meshRef.current.instanceColor.needsUpdate = true;
+	}, [
+		x,
+		y,
+		size,
+		count,
+		grassSize,
+		scale,
+		hillScale,
+		hillHeight,
+		detailScale,
+		detailHeight,
+		noise2D,
+		grassLOD,
+		dryColor,
+		lushColor,
+		grassLODStart,
+		grassLODExponent
+	]);
+
+	const onBeforeCompile = useMemo(
+		() => (shader: Shader) => {
+			shader.uniforms.uTime = { value: 0 };
+
+			shader.vertexShader = `
+            uniform float uTime;
+            varying vec2 vGrassUv;
+            varying vec3 vWorldPos;
+            
+            float hash(vec2 p) {
+                return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+            }
+            
+            float noise(vec2 p) {
+                vec2 i = floor(p);
+                vec2 f = fract(p);
+                f = f * f * (3.0 - 2.0 * f);
+                float a = hash(i);
+                float b = hash(i + vec2(1.0, 0.0));
+                float c = hash(i + vec2(0.0, 1.0));
+                float d = hash(i + vec2(1.0, 1.0));
+                return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+            }
+            
+            float fbm(vec2 p) {
+                float value = 0.0;
+                float amplitude = 0.5;
+                float frequency = 1.0;
+                for(int i = 0; i < 4; i++) {
+                    value += amplitude * noise(p * frequency);
+                    frequency *= 2.0;
+                    amplitude *= 0.5;
+                }
+                return value;
+            }
+            
+            ${shader.vertexShader}
+        `;
+
+			shader.vertexShader = shader.vertexShader.replace(
+				'#include <begin_vertex>',
+				`
+            #include <begin_vertex>
+            ${grassVert}
+            `
+			);
+
+			shader.fragmentShader = `
+            uniform float uTime;
+            varying vec2 vGrassUv;
+            varying vec3 vWorldPos;
+            ${shader.fragmentShader}
+        `;
+
+			shader.fragmentShader = shader.fragmentShader.replace(
+				'#include <color_fragment>',
+				`
+            #include <color_fragment>
+            ${grassFrag}
+            `
+			);
+
+			if (materialRef.current) {
+				materialRef.current.userData.shader = shader;
+			}
+		},
+		[]
+	);
+
+	return (
+		<instancedMesh
+			ref={meshRef}
+			args={[undefined, undefined, count]}
+			position={[x * size, 0, y * size]}
+			geometry={geometry}
+		>
+			<meshStandardMaterial
+				ref={materialRef}
+				color='#ffffff'
+				side={DoubleSide}
+				alphaMap={alphaMap}
+				alphaTest={0.5}
+				normalMap={normalMap}
+				roughness={0.8}
+				metalness={0.1}
+				onBeforeCompile={onBeforeCompile}
+			/>
+		</instancedMesh>
+	);
+}

src/app/niko/scene-components/helpers.tsx

@@ -0,0 +1,28 @@
+export function getTerrainHeight(
+    localX: number,
+    localZ: number,
+    worldXBase: number,
+    worldZBase: number,
+    scale: number,
+    hillScale: number,
+    hillHeight: number,
+    detailScale: number,
+    detailHeight: number,
+    noise2D: (x: number, y: number) => number
+) {
+    const worldX = (worldXBase + localX) * 0.1;
+    const worldZ = (worldZBase + localZ) * 0.1;
+
+    const noiseHill =
+        noise2D(worldX * hillScale, worldZ * hillScale) * hillHeight;
+    const noiseDetail =
+        noise2D(worldX * detailScale, worldZ * detailScale) * detailHeight;
+
+    return (noiseHill + noiseDetail) * scale;
+}
+
+export interface Shader {
+	uniforms: { [key: string]: { value: unknown } };
+	vertexShader: string;
+	fragmentShader: string;
+}

src/app/niko/scene-components/sealcube.tsx

@@ -0,0 +1,33 @@
+import { useFrame, useLoader } from "@react-three/fiber";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { Mesh, TextureLoader } from "three";
+
+const SealCube = forwardRef<Mesh>((props, ref) => {
+    const texture = useLoader(TextureLoader, 'niko/img/niko.jpg');
+    const meshRef = useRef<Mesh>(null);
+
+    useImperativeHandle(ref, () => meshRef.current!, []);
+
+    useFrame((state, delta) => {
+        if (meshRef.current) {
+            meshRef.current.rotation.x += delta * 0.5;
+            meshRef.current.rotation.y += delta * 0.5;
+            meshRef.current.position.y = 3 + Math.sin(state.clock.getElapsedTime() * 1) * 0.15;
+        }
+    });
+
+    return (
+        <mesh ref={meshRef} position={[0, 3, 0]} castShadow receiveShadow>
+            <boxGeometry args={[0.85, 0.85, 0.85]} />
+            <meshStandardMaterial
+                map={texture}
+                roughness={0.4}
+                metalness={0.1}
+                envMapIntensity={1.2}
+            />
+        </mesh>
+    );
+});
+SealCube.displayName = 'SealCube';
+
+export default SealCube;

src/app/niko/scene-components/shaders/grass.frag

@@ -0,0 +1,31 @@
+float ao = smoothstep(0.0, 0.7, vGrassUv.y);
+ao = mix(0.05, 1.0, pow(ao, 1.6));
+
+vec3 rootColor = diffuseColor.rgb * 0.15;
+vec3 midColor = diffuseColor.rgb;
+vec3 tipColor = diffuseColor.rgb * 1.3 + vec3(0.06, 0.08, 0.0);
+
+float heightParam = vGrassUv.y;
+vec3 grassColor;
+if (heightParam < 0.4) {
+    float t = smoothstep(0.0, 0.4, heightParam);
+    grassColor = mix(rootColor, midColor, t);
+} else {
+    float t = smoothstep(0.4, 1.0, heightParam);
+    grassColor = mix(midColor, tipColor, t);
+}
+
+vec3 viewDir = normalize(cameraPosition - vWorldPos);
+vec3 lightDir = normalize(vec3(15.0, 25.0, 15.0));
+
+float VdotL = max(0.0, dot(viewDir, -lightDir));
+float sss = pow(VdotL, 3.0) * smoothstep(0.2, 0.9, vGrassUv.y);
+
+vec3 sssColor = diffuseColor.rgb * vec3(0.6, 1.0, 0.15) * 1.8;
+grassColor += sssColor * sss * 2.0;
+
+float NdotV = 1.0 - max(0.0, dot(normalize(vNormal), viewDir));
+float rim = pow(NdotV, 3.0) * smoothstep(0.3, 1.0, vGrassUv.y) * 0.15;
+grassColor += vec3(0.3, 0.5, 0.1) * rim;
+
+diffuseColor.rgb = grassColor * ao;

src/app/niko/scene-components/shaders/grass.vert

@@ -0,0 +1,52 @@
+vGrassUv = uv;
+
+vec4 worldPos = modelMatrix * instanceMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+float gx = worldPos.x;
+float gz = worldPos.z;
+
+vec2 mainWindDir = normalize(vec2(1.0, 0.6));
+float windSpeed = 1.5;
+
+float windTime = uTime * windSpeed;
+vec2 windSamplePos = (worldPos.xz * 0.05) - (mainWindDir * windTime * 0.2);
+
+float windBase = fbm(windSamplePos * 0.8) * 0.4 + 0.2;
+float gustNoise = fbm(windSamplePos * 0.4);
+float gust = pow(gustNoise, 3.0) * 1.8;
+float totalWind = windBase + gust;
+
+float phase = gx * 0.5 + gz * 0.3;
+float spring = sin(uTime * 2.0 + phase) * 0.06 + sin(uTime * 4.5 + phase * 1.5) * 0.03;
+
+float angleNoise = fbm(windSamplePos * 2.0 + uTime * 0.1) - 0.5;
+vec2 windDir = normalize(mainWindDir + vec2(-mainWindDir.y, mainWindDir.x) * angleNoise * 0.4);
+
+// taper (fade)
+float taperFactor = uv.y * uv.y * uv.y;
+float taper = 1.0 - taperFactor * 0.85;
+transformed.x *= taper;
+transformed.z *= taper;
+
+// curve
+float curveVal = fbm(vec2(gx, gz) * 0.5);
+float curveStrength = 1.5 + curveVal * 2.5; 
+float curveAmount = uv.y * uv.y * curveStrength; 
+vec2 curveDir = normalize(vec2(curveVal, fbm(vec2(gz, gx))) - 0.5);
+transformed.x += curveAmount * curveDir.x * 0.4;
+transformed.z += curveAmount * curveDir.y * 0.4;
+
+// sway
+float swayAmount = (totalWind + spring) * uv.y * uv.y;
+transformed.x += swayAmount * windDir.x;
+transformed.z += swayAmount * windDir.y;
+transformed.y -= abs(swayAmount) * 0.2;
+
+// normal comp
+vec2 totalBend = curveDir * curveAmount * 0.4 + windDir * swayAmount;
+float bendMag = length(totalBend);
+vec3 bentNormal = normalize(vec3(-totalBend.x * 0.5, 1.0, -totalBend.y * 0.5));
+
+// normal mix
+objectNormal = normalize(mix(vec3(0.0, 1.0, 0.0), bentNormal, uv.y));
+
+vWorldPos = (modelMatrix * instanceMatrix * vec4(transformed, 1.0)).xyz;

src/app/niko/scene-components/terrain.tsx

@@ -0,0 +1,279 @@
+import { useMemo, useRef } from "react";
+import { BufferAttribute, BufferGeometry, Color, Mesh } from "three";
+import { getTerrainHeight } from "./helpers";
+import Grass from "./grass";
+import { createNoise2D } from "simplex-noise";
+
+interface TerrainChunkProps {
+	x: number;
+	y: number;
+	size: number;
+	resolution: number;
+	scale: number;
+	hillScale: number;
+	hillHeight: number;
+	detailScale: number;
+	detailHeight: number;
+	noise2D: (x: number, y: number) => number;
+	grassCount: number;
+	grassSize: number;
+	grassLOD: number;
+	terrainDryColor: string;
+	terrainLushColor: string;
+	grassDryColor: string;
+	grassLushColor: string;
+	grassBlades: number;
+	grassSegments: number;
+	grassLODStart: number;
+	grassLODExponent: number;
+}
+function TerrainChunk({
+	x,
+	y,
+	size,
+	resolution,
+	scale,
+	hillScale,
+	hillHeight,
+	detailScale,
+	detailHeight,
+	noise2D,
+	grassCount,
+	grassSize,
+	grassLOD,
+	terrainDryColor,
+	terrainLushColor,
+	grassDryColor,
+	grassLushColor,
+	grassBlades,
+	grassSegments,
+	grassLODStart,
+	grassLODExponent
+}: TerrainChunkProps) {
+	const halfSize = size / 2;
+	const worldXBase = x * size;
+	const worldZBase = y * size;
+
+	const minX = Math.abs(worldXBase) <= halfSize ? 0 : Math.abs(worldXBase) - halfSize;
+	const minZ = Math.abs(worldZBase) <= halfSize ? 0 : Math.abs(worldZBase) - halfSize;
+	const chunkMinDist = Math.sqrt(minX * minX + minZ * minZ);
+
+	const shouldRenderGrass = chunkMinDist < grassLOD;
+
+	const meshRef = useRef<Mesh>(null);
+
+	const geometry = useMemo(() => {
+		const geo = new BufferGeometry();
+
+		const vertices: Array<number> = [];
+		const indices: Array<number> = [];
+
+		const step = size / (resolution - 1);
+		const halfSize = size / 2;
+		const worldXBase = x * size;
+		const worldZBase = y * size;
+
+		/*
+			vtx gen
+		*/
+		for (let iz = 0; iz < resolution; iz++) {
+			for (let ix = 0; ix < resolution; ix++) {
+				const localX = ix * step - halfSize;
+				const localZ = iz * step - halfSize;
+
+				const localY = getTerrainHeight(
+					localX,
+					localZ,
+					worldXBase,
+					worldZBase,
+					scale,
+					hillScale,
+					hillHeight,
+					detailScale,
+					detailHeight,
+					noise2D
+				);
+
+				vertices.push(localX, localY, localZ);
+			}
+		}
+
+		/*
+			idx gen
+		*/
+		for (let iz = 0; iz < resolution - 1; iz++) {
+			for (let ix = 0; ix < resolution - 1; ix++) {
+				const topLeft = iz * resolution + ix;
+				const topRight = topLeft + 1;
+				const bottomLeft = (iz + 1) * resolution + ix;
+				const bottomRight = bottomLeft + 1;
+
+				indices.push(topLeft, bottomLeft, topRight);
+				indices.push(topRight, bottomLeft, bottomRight);
+			}
+		}
+		geo.setAttribute(
+			'position',
+			new BufferAttribute(new Float32Array(vertices), 3)
+		);
+
+		const colors: Array<number> = [];
+		for (let iz = 0; iz < resolution; iz++) {
+			for (let ix = 0; ix < resolution; ix++) {
+				const localX = ix * step - halfSize;
+				const localZ = iz * step - halfSize;
+				const globalX = worldXBase + localX;
+				const globalZ = worldZBase + localZ;
+				const colorNoise = noise2D(globalX * 0.02, globalZ * 0.02);
+				const t = (colorNoise + 1) / 2;
+
+				const dryGreen = new Color(terrainDryColor);
+				const lushGreen = new Color(terrainLushColor);
+
+				const r = dryGreen.r + (lushGreen.r - dryGreen.r) * t;
+				const g = dryGreen.g + (lushGreen.g - dryGreen.g) * t;
+				const b = dryGreen.b + (lushGreen.b - dryGreen.b) * t;
+
+				colors.push(r, g, b);
+			}
+		}
+		geo.setAttribute('color', new BufferAttribute(new Float32Array(colors), 3));
+
+		geo.setIndex(indices);
+		geo.computeVertexNormals();
+
+		return geo;
+	}, [
+		x,
+		y,
+		size,
+		resolution,
+		scale,
+		hillScale,
+		hillHeight,
+		detailScale,
+		detailHeight,
+		noise2D,
+		terrainDryColor,
+		terrainLushColor
+	]);
+
+	return (
+		<group>
+			<mesh
+				ref={meshRef}
+				geometry={geometry}
+				position={[x * size, 0, y * size]}
+			>
+				<meshStandardMaterial vertexColors roughness={1.0} metalness={0.0} />
+			</mesh>
+			{shouldRenderGrass && (
+				<Grass
+					x={x}
+					y={y}
+					size={size}
+					count={grassCount}
+					grassSize={grassSize}
+					scale={scale}
+					hillScale={hillScale}
+					hillHeight={hillHeight}
+					detailScale={detailScale}
+					detailHeight={detailHeight}
+					noise2D={noise2D}
+					grassLOD={grassLOD}
+					dryColor={grassDryColor}
+					lushColor={grassLushColor}
+					grassBlades={grassBlades}
+					grassSegments={grassSegments}
+					grassLODStart={grassLODStart}
+					grassLODExponent={grassLODExponent}
+				/>
+			)}
+		</group>
+	);
+}
+
+interface TerrainProps {
+	chunks?: number;
+	chunkSize?: number;
+	resolution?: number;
+	scale?: number;
+	hillScale: number;
+	hillHeight: number;
+	detailScale: number;
+	detailHeight: number;
+	grassCount?: number;
+	grassSize?: number;
+	grassLOD?: number;
+	terrainDryColor?: string;
+	terrainLushColor?: string;
+	grassDryColor?: string;
+	grassLushColor?: string;
+	grassBlades?: number;
+	grassSegments?: number;
+	grassLODStart?: number;
+	grassLODExponent?: number;
+}
+export default function Terrain({
+	chunks = 5,
+	chunkSize = 10,
+	resolution = 8,
+	scale = 1,
+	hillScale = 0.2,
+	hillHeight = 3,
+	detailScale = 3,
+	detailHeight = 0.1,
+	grassCount = 6000,
+	grassSize = 0.6,
+	grassLOD = 40,
+	terrainDryColor = '#010100',
+	terrainLushColor = '#000800',
+	grassDryColor = '#556b19',
+	grassLushColor = '#348a34',
+	grassBlades = 2,
+	grassSegments = 2,
+	grassLODStart = 0.5,
+	grassLODExponent = 1.0
+}: TerrainProps) {
+	const noise2D = useMemo(() => createNoise2D(), []);
+	const offset = -Math.floor(chunks / 2);
+
+	const chunkPositions = useMemo(() => {
+		const positions: [number, number][] = [];
+		for (let x = 0; x < chunks; x++)
+			for (let y = 0; y < chunks; y++) positions.push([x + offset, y + offset]);
+
+		return positions;
+	}, [chunks, offset]);
+
+	return (
+		<group>
+			{chunkPositions.map(([x, y], index) => (
+				<TerrainChunk
+					key={`${x}-${y}-${index}`}
+					x={x}
+					y={y}
+					size={chunkSize}
+					resolution={resolution}
+					scale={scale}
+					hillScale={hillScale}
+					hillHeight={hillHeight}
+					detailScale={detailScale}
+					detailHeight={detailHeight}
+					noise2D={noise2D}
+					grassCount={grassCount}
+					grassSize={grassSize}
+					grassLOD={grassLOD}
+					terrainDryColor={terrainDryColor}
+					terrainLushColor={terrainLushColor}
+					grassDryColor={grassDryColor}
+					grassLushColor={grassLushColor}
+					grassBlades={grassBlades}
+					grassSegments={grassSegments}
+					grassLODStart={grassLODStart}
+					grassLODExponent={grassLODExponent}
+				/>
+			))}
+		</group>
+	);
+}

src/app/page.css

@@ -22,7 +22,7 @@
 }
 
 * {
-	cursor: url('https://cdn.cursors-4u.net/previews/my-custom-cursor-8-957a5617-32.webp') 32 32, auto;
+	cursor: url('/cur/kuromi.webp') 32 32, auto;
 }
 
 body {
@@ -64,7 +64,7 @@ body {
 	padding: 35px 25px 25px 25px;
 	position: relative;
 	max-width: 400px;
-	width: 100%;
+	width: calc(100% - 30px);
 
 	border: 1px solid var(--pink-accent);
 	outline: 4px solid #fff;
@@ -74,24 +74,24 @@ body {
 	animation: float 5s ease-in-out infinite;
 }
 
-
+.decorative-sparkle {
-.main-frame::before,
-.main-frame::after {
-	content: "✧";
 	position: absolute;
-	color: var(--sparkle);
+	top: 10px;
 	font-size: 1.5rem;
-	text-shadow: 0 0 20px var(--sparkle-glow), 0 0 15px var(--sparkle-glow), 0 0 10px var(--sparkle-glow), 0 0 5px var(--sparkle-glow)
+	color: var(--sparkle);
+	text-shadow: 0 0 20px var(--sparkle-glow), 0 0 15px var(--sparkle-glow), 0 0 10px var(--sparkle-glow), 0 0 5px var(--sparkle-glow);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+	height: 24px;
+	width: 24px;
+	cursor: url('/cur/kuromi-hearts.webp') 0 0, auto !important;
+	transition: transform 0.2s ease;
 }
 
-.main-frame::before {
+.decorative-sparkle:hover {
-	top: 10px;
+	transform: scale(1.15) rotate(15deg);
-	left: 10px;
-}
-
-.main-frame::after {
-	top: 10px;
-	right: 10px;
 }
 
 .content-box {
@@ -115,7 +115,7 @@ body {
 }
 
 /*
-	text stuffs
+	text stuff
 */
 h1 {
 	font-size: 1.8rem;
@@ -156,6 +156,23 @@ h1 {
 	border-bottom: 1px dashed var(--pink-accent);
 }
 
+.social-links button {
+	background: none;
+	border: none;
+	font-family: inherit;
+	font-size: 0.8rem;
+	color: var(--text-main);
+	padding: 2px 6px;
+	margin: 0 6px;
+	border-bottom: 1px dashed transparent;
+	transition: all 0.3s ease;
+}
+
+.social-links button:hover {
+	color: var(--pink-accent);
+	border-bottom: 1px dashed var(--pink-accent);
+}
+
 .title {
 	font-size: 0.95rem;
 	font-style: italic;
@@ -172,22 +189,17 @@ h1 {
 	justify-content: center;
 	gap: 8px;
 	margin: 5px 0;
+	flex-wrap: wrap;
 }
 
 .directory a {
 	text-decoration: none;
 	background: #fff;
-
-	padding: 3px 8px;
 	font-size: 0.73rem;
 	color: var(--text-main);
-	border: 1px solid #fff;
-
 	padding: 3px 10px;
-
 	border: 1px solid var(--accent);
 	box-shadow: 2px 2px 0px var(--pink-accent);
-
 	transition: 0.2s ease;
 }
 
@@ -196,16 +208,19 @@ h1 {
 }
 
 .directory a::after {
-	content:" ›"
+	content: " ›"
 }
 
 .directory a:hover {
-	cursor: url('https://cdn.cursors-4u.net/previews/my-custom-cursor-8-1-e2eeed6e-preview-32.webp') 0 0, auto !important;
+	cursor: url('/cur/kuromi-hearts.webp') 0 0, auto !important;
 	color: var(--text-header);
 	box-shadow: 1px 1px 0px var(--pink-accent);
 	background: var(--pink-accent);
 }
 
+/*
+	marquee stuff at the bottom
+*/
 .marquee {
 	width: 100%;
 	overflow: hidden;
@@ -222,19 +237,23 @@ h1 {
 	background: linear-gradient(to right, transparent, rgba(255, 214, 245, 0.3), transparent);
 }
 
-.marquee span {
+.marquee-track {
-	display: inline-block;
+	display: flex;
-	padding-left: 100%;
+	width: max-content;
-	animation: marquee 25s linear infinite;
+	animation: marquee-loop 10s linear infinite;
 }
 
-@keyframes marquee {
+.marquee-track span {
+	padding-right: 2rem;
+}
+
+@keyframes marquee-loop {
 	0% {
-		transform: translate(0, 0);
+		transform: translate3d(0, 0, 0);
 	}
 
 	100% {
-		transform: translate(-100%, 0);
+		transform: translate3d(-50%, 0, 0);
 	}
 }
 

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './page.css';
 import { DiscordStatus } from './components/discordstatus';
 
@@ -14,18 +14,32 @@ function Content() {
 
 	const toggleModal = () => setIsOpen(!isOpen);
 
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape' && isOpen)
+				setIsOpen(false);
+		};
+		window.addEventListener('keydown', handleKeyDown);
+		return () => window.removeEventListener('keydown', handleKeyDown);
+	}, [isOpen]);
+
+	const marqueeText = "✧ ꒰ა˵• ﻌ •˵ა꒱ ✧ ฅ^•ﻌ•^ฅ ✧ ᶻ 𝗓 𐰁 /ᐠ. ｡ .ᐟ\\ ✧ ฅ/ᐠ. ̫ .ᐟ\\ฅ ✧ ꒰ა≽^•⩊•^≼໒꒱ ✧ ₍˄·͈༝·͈˄₎ ✧ /ᐠ. ⩊ .ᐟ\\ﾉ ✧ 𓏲ּ ֶָ ࣪ /ᐠ .ᆺ. ᐟ\\ﾉ ✧";
+
 	return (
 		<>
 			<div className="main-frame">
+				<a href="/niko" className="decorative-sparkle" title="✧" style={{ left: '10px' }}>✧</a>
+				<a href="/fear" className="decorative-sparkle" title="✧" style={{ right: '10px' }}>✧</a>
+
 				<header>
 					<h1>neru</h1>
 					<p className="motto">˚₊‧꒰ა 𓂋 ໒꒱ ‧₊˚</p>
 				</header>
 
 				<nav className="social-links">
-					<a href={TWITTER_LINK}>twitter</a> •
+					<a href={TWITTER_LINK} target="_blank" rel="noopener noreferrer">twitter</a> •
-					<a onClick={toggleModal}>discord</a> •
+					<button onClick={toggleModal}>discord</button> •
-					<a href={STEAM_LINK} style={{ cursor: 'pointer' }}>steam</a>
+					<a href={STEAM_LINK} target="_blank" rel="noopener noreferrer">steam</a>
 				</nav>
 
 				<section className="content-box">
@@ -36,18 +50,18 @@ function Content() {
 				<section className="content-box">
 					<h2 className="title">✧ projects im currently working on ✧</h2>
 					<ul className="directory">
-						<li><a href="https://git.neru.rip/neru/seallib">seallib</a></li>
+						<li><a href="https://git.neru.rip/neru/seallib" target="_blank" rel="noopener noreferrer">seallib</a></li>
-						<li><a href="https://git.neru.rip/neru/tinymitm">tinymitm</a></li>
+						<li><a href="https://git.neru.rip/neru/tinymitm" target="_blank" rel="noopener noreferrer">tinymitm</a></li>
-						<li><a href="https://git.neru.rip/neru/luma">luma</a></li>
+						<li><a href="https://git.neru.rip/neru/luma" target="_blank" rel="noopener noreferrer">luma</a></li>
 					</ul>
 				</section>
 
 				<section className="content-box">
 					<h2 className="title">✧ sites ✧</h2>
 					<ul className="directory">
-						<li><a href="https://git.neru.rip">gitea</a></li>
+						<li><a href="https://git.neru.rip" target="_blank" rel="noopener noreferrer">gitea</a></li>
-						<li><a href="https://zl.neru.rip">zipline</a></li>
+						<li><a href="https://zl.neru.rip" target="_blank" rel="noopener noreferrer">zipline</a></li>
-						<li><a href="https://files.neru.rip">files</a></li>
+						<li><a href="https://files.neru.rip" target="_blank" rel="noopener noreferrer">files</a></li>
 					</ul>
 				</section>
 
@@ -61,9 +75,11 @@ function Content() {
 
 				<footer>
 					<div className="marquee">
-						<span>✧ ꒰ა˵• ﻌ •˵ა꒱ ✧ ฅ^•ﻌ•^ฅ ✧ ᶻ 𝗓 𐰁 /ᐠ. ｡ .ᐟ\ ✧ ฅ/ᐠ. ̫ .ᐟ\ฅ ✧ ꒰ა≽^•⩊•^≼໒꒱ ✧ ₍˄·͈༝·͈˄₎ ✧ /ᐠ. ⩊ .ᐟ\ﾉ ✧ 𓏲ּ ֶָ ࣪ /ᐠ .ᆺ. ᐟ\ﾉ ✧</span>
+						<div className="marquee-track">
+							<span>{marqueeText}</span>
+							<span>{marqueeText}</span>
+						</div>
 					</div>
-					{/* <p style={{ fontSize: '0.65rem', opacity: 0.5 }}>✼　 ҉ 　✼　 ҉ 　✼　 ҉ 　✼</p> */}
 				</footer>
 
 				{isOpen && (