my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	import { Canvas, useFrame } from "@react-three/fiber";
#2	import { Float, Stars } from "@react-three/drei";
#3	import { useMemo, useRef } from "react";
#4	import type { Group } from "three";
#5
#6	function LobsterGlyphs() {
#7	const group = useRef<Group>(null);
#8	const nodes = useMemo(
#9	() =>
#10	Array.from({ length: 42 }, (_, i) => ({
#11	key: i,
#12	position: [
#13	(Math.random() - 0.5) * 16,
#14	(Math.random() - 0.5) * 9,
#15	(Math.random() - 0.5) * 6,
#16	] as [number, number, number],
#17	scale: 0.06 + Math.random() * 0.14,
#18	})),
#19	[],
#20	);
#21
#22	useFrame((state) => {
#23	if (!group.current) return;
#24	group.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.06) * 0.08;
#25	});
#26
#27	return (
#28	<group ref={group}>
#29	{nodes.map((node) => (
#30	<Float key={node.key} speed={1.2} rotationIntensity={0.25} floatIntensity={0.55}>
#31	<mesh position={node.position} scale={node.scale}>
#32	<boxGeometry args={[1, 1, 1]} />
#33	<meshStandardMaterial
#34	color={node.key % 3 === 0 ? "#cc2200" : node.key % 2 === 0 ? "#003344" : "#ff4400"}
#35	emissive={node.key % 3 === 0 ? "#550800" : "#001a22"}
#36	transparent
#37	opacity={0.72}
#38	/>
#39	</mesh>
#40	</Float>
#41	))}
#42	</group>
#43	);
#44	}
#45
#46	function LobsterCore() {
#47	const ref = useRef<Group>(null);
#48	useFrame((state) => {
#49	if (!ref.current) return;
#50	ref.current.rotation.y = state.clock.elapsedTime * 0.25;
#51	});
#52
#53	return (
#54	<group ref={ref} position={[3.4, -0.6, -0.5]}>
#55	<mesh>
#56	<icosahedronGeometry args={[0.72, 0]} />
#57	<meshStandardMaterial color="#ff3300" emissive="#8b0000" metalness={0.45} roughness={0.3} />
#58	</mesh>
#59	<mesh position={[0.92, 0.12, 0]}>
#60	<torusGeometry args={[0.28, 0.06, 14, 28]} />
#61	<meshStandardMaterial color="#00d4ff" emissive="#003344" />
#62	</mesh>
#63	<mesh position={[-0.92, 0.12, 0]}>
#64	<torusGeometry args={[0.28, 0.06, 14, 28]} />
#65	<meshStandardMaterial color="#00d4ff" emissive="#003344" />
#66	</mesh>
#67	</group>
#68	);
#69	}
#70
#71	export function SceneBackdrop() {
#72	return (
#73	<div className="scene-backdrop" aria-hidden="true">
#74	<Canvas camera={{ position: [0, 0, 7], fov: 50 }}>
#75	<color attach="background" args={["#000000"]} />
#76	<fog attach="fog" args={["#000000", 5, 14]} />
#77	<ambientLight intensity={0.65} />
#78	<pointLight position={[4, 3, 2]} intensity={18} color="#cc2200" />
#79	<pointLight position={[-5, -3, 1]} intensity={12} color="#00d4ff" />
#80	<Stars radius={80} depth={40} count={2500} factor={3.4} fade speed={1.1} />
#81	<LobsterGlyphs />
#82	<LobsterCore />
#83	</Canvas>
#84	</div>
#85	);
#86	}
#87

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public