I just build a 3D Solar System Portfolio with Antigrafity using Next.js & React Three Fiber

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export type PlanetType = 'SUN' | 'MERCURY' | 'VENUS' | 'EARTH' | 'MARS' | 'JUPITER' | 'SATURN' | 'URANUS' | 'NEPTUNE' | 'PLUTO';

interface CosmosState {
  activePlanet: PlanetType;
  setActivePlanet: (planet: PlanetType) => void;
  scrollProgress: number;
  setScrollProgress: (progress: number) => void;
}

export const useCosmosStore = create<CosmosState>()(
  persist(
    (set) => ({
      activePlanet: 'SUN',
      setActivePlanet: (planet) => set({ activePlanet: planet }),
      scrollProgress: 0,
      setScrollProgress: (progress) => set({ scrollProgress: progress }),
    }),
    {
      name: 'cosmos-store',
    }
  )
);

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export type SiteMode = 'normal' | 'universe';

interface SiteSettingState {
  mode: SiteMode;
  setMode: (mode: SiteMode) => void;
  toggleMode: () => void;
  openDrawer: boolean;
  setOpenDrawer: (open: boolean) => void;
}

export const useSiteSettingStore = create<SiteSettingState>()(
  persist(
    (set) => ({
      mode: 'universe',
      setMode: (mode) => set({ mode }),
      toggleMode: () => set((state) => ({
        mode: state.mode === 'normal' ? 'universe' : 'normal',
      })),
      openDrawer: false,
      setOpenDrawer: (open) => set({ openDrawer: open }),
    }),
    {
      name: 'site-setting-store',
      partialize: (state) => ({ mode: state.mode }), // openDrawer always resets on reload
    }
  )
);

import type { PlanetType } from '@/shared/stores/use-cosmos-store';

export type PlanetConfig = {
  radius: number;
  color: string;
  label: string;
  section: string;
  description: string;
  bio: string;
};

export const PLANET_CONFIG: Record<PlanetType, PlanetConfig> = {
  SUN: {
    radius: 0,
    color: '#ffcc33',
    label: 'About Me',
    section: 'MyUniverse',
    description: 'A star at the center, providing energy to the entire system.',
    bio: "Hey, i'm Tan — i build things for the web and lowkey obsess over clean code and good UX."
  },
  MERCURY: {
    radius: 15,
    color: '#A5A5A5',
    label: 'Tech Stack',
    section: 'MyTechStack',
    description: 'Smallest planet, closest to the Sun, with extreme temperatures.',
    bio: 'My go-to stack. not gatekeeping — this is literally what i use to ship.'
  },
  VENUS: {
    radius: 24,
    color: '#E3BB76',
    label: 'Core Values',
    section: 'PersonalValuation',
    description: 'Hottest planet due to a dense, greenhouse-gas-filled atmosphere.',
    bio: 'The stuff I actually care about. No corporate fluff, just real values I live by.'
  },
  EARTH: {
    radius: 36,
    color: '#2271B3',
    label: 'Experiences',
    section: 'ExperienceTimeline',
    description: 'Our home, the only planet known to support life with liquid water.',
    bio: "Places I've been, things I've built. The full arc, no cap."
  },
  MARS: {
    radius: 48,
    color: '#E27B58',
    label: 'Contact Me',
    section: 'ContactSection',
    description: 'The "Red Planet," known for its thin atmosphere, deserts, and extinct volcanoes.',
    bio: 'Slide into my inbox fr. collabs, opportunities, or just vibes — all welcome.'
  },
  JUPITER: {
    radius: 68,
    color: '#D39C7E',
    label: 'Comming Soon',
    section: 'CommingSoon',
    description: 'The largest planet, a gas giant with 95+ moons and a famous "Great Red Spot" storm.',
    bio: 'Something big is cooking here. Stay tuned fr fr.'
  },
  SATURN: {
    radius: 90,
    color: '#C5AB6E',
    label: 'Comming Soon',
    section: 'CommingSoon',
    description: 'Famous for its extensive, bright ring system and 146+ moons.',
    bio: "Still loading... but trust, it's gonna hit different."
  },
  URANUS: {
    radius: 110,
    color: '#B5E3E3',
    label: 'Comming Soon',
    section: 'CommingSoon',
    description: 'An ice giant that rotates on its side, with a faint ring system.',
    bio: 'Doing its own thing, unbothered. New content incoming, no rush.'
  },
  NEPTUNE: {
    radius: 130,
    color: '#6081FF',
    label: 'Comming Soon',
    section: 'CommingSoon',
    description: 'The coldest and farthest planet, known for high-speed winds and deep blue color.',
    bio: "Deep in the sauce rn. Launching when it's ready, not before."
  },
  PLUTO: {
    radius: 150,
    color: '#CFA78E',
    label: 'Comming Soon',
    section: 'CommingSoon',
    description: 'A dwarf planet in the Kuiper belt, known for its icy surface.',
    bio: "Yeah Pluto's a dwarf planet, and this section is still a wip. Respect the process."
  }
};

export const PLANET_ORDER: PlanetType[] = [
  'SUN',
  'MERCURY',
  'VENUS',
  'EARTH',
  'MARS',
  'JUPITER',
  'SATURN',
  'URANUS',
  'NEPTUNE',
  'PLUTO'
];

export const ZOOM_MIN = 0.3;
export const ZOOM_MAX = 3.0;

const SolarSystemScene = dynamic(
  () => import('./solar-system-scene').then((mod) => mod.SolarSystemScene),
  { ssr: false }   // ← no loading: prop here
);

<Suspense fallback={<LoadingScreen />}>
  <SolarSystemScene locked={isDrawerOpen} />
</Suspense>
Inside the canvas, SolarSystemScene renders:

// src/containers/experience-orbit/solar-system-scene.tsx (simplified)
export const SolarSystemScene = ({ locked }: { locked: boolean }) => {
  const { containerRef, fov, zoomLevel, targetProgress,
          dragOffset, pointerHandlers, handlePlanetFocus } = useSceneControls(locked);

  return (
    <div ref={containerRef} className="w-full h-full" {...pointerHandlers}>
      <PlanetNav onFocus={handlePlanetFocus} />
      <Canvas>
        <PerspectiveCamera makeDefault fov={fov} position={[0, 20, 60]} />
        <Stars radius={300} depth={60} count={5000} factor={4} />
        <ambientLight intensity={0.3} />

        {/* Sun at origin */}
        <Planet type="SUN" onClick={() => handlePlanetFocus(0)} />

        {/* All other planets */}
        {PLANET_ORDER.slice(1).map((type, i) => (
          <Planet key={type} type={type} onClick={() => handlePlanetFocus(i + 1)} />
        ))}

        {/* Orbit rings */}
        {PLANET_ORDER.slice(1).map((type) => (
          <OrbitPath key={type} radius={PLANET_CONFIG[type].radius} color="#ffffff" />
        ))}

        <AsteroidBelt />
        <CameraRig targetProgress={targetProgress} zoomLevel={zoomLevel} dragOffset={dragOffset} />
        <VirtualPilot targetProgress={targetProgress} />
        <EffectComposer>
          <Bloom luminanceThreshold={1.2} mipmapBlur intensity={0.8} radius={0.4} />
        </EffectComposer>
      </Canvas>
    </div>
  );
};

float noise(vec3 p) {
  return sin(p.x * 10.0 + uTime)
       * sin(p.y * 10.0 + uTime * 0.7)
       * sin(p.z * 10.0 + uTime * 0.5);
}

void main() {
  float n = noise(vPosition * 0.5);
  vec4 texColor = texture2D(sunTexture, vUv);
  vec3 color1 = vec3(1.0, 0.9, 0.2); // yellow core
  vec3 color2 = vec3(1.0, 0.4, 0.0); // orange flares
  vec3 noiseColor = mix(color1, color2, n * 0.5 + 0.5);
  vec3 finalColor = texColor.rgb + (noiseColor * 0.8);
  float fresnel = pow(1.0 - dot(vNormal, vec3(0, 0, 1.0)), 2.0);
  finalColor += vec3(1.0, 0.6, 0.2) * fresnel * 2.0;
  gl_FragColor = vec4(finalColor * 1.5, 1.0);
}

useFrame((state) => {
  if (materialRef.current) {
    materialRef.current.uniforms.uTime.value = state.clock.getElapsedTime();
  }
  if (meshRef.current) {
    meshRef.current.rotation.y += 0.003;
  }
});
Planet Bodies — Textures, Clouds, and Rings
PlanetBody handles all non-sun planets. Every planet loads its own HD texture map from public/images/textures/. Earth gets a second cloud layer, Saturn gets a ring.

// planet-components.tsx
const TEXTURE_URLS: Record<PlanetType, string> = {
  SUN:     '/images/textures/sunmap.jpg',
  MERCURY: '/images/textures/mercurymap.jpg',
  VENUS:   '/images/textures/venusmap.jpg',
  EARTH:   '/images/textures/earthmap1k.jpg',
  MARS:    '/images/textures/mars_1k_color.jpg',
  JUPITER: '/images/textures/jupitermap.jpg',
  SATURN:  '/images/textures/saturnmap.jpg',
  URANUS:  '/images/textures/uranusmap.jpg',
  NEPTUNE: '/images/textures/neptunemap.jpg',
  PLUTO:   '/images/textures/plutomap1k.jpg',
};

// Earth: cloud layer at scale 1.01, AdditiveBlending
{type === 'EARTH' && (
  <mesh scale={[1.01, 1.01, 1.01]}>
    <sphereGeometry args={[1.505, 64, 64]} />
    <meshStandardMaterial map={cloud} transparent opacity={0.5}
      blending={THREE.AdditiveBlending} />
  </mesh>
)}

// Saturn: ring rotated -Math.PI / 2.2
{type === 'SATURN' && (
  <mesh rotation={[-Math.PI / 2.2, 0, 0]}>
    <ringGeometry args={[2.2, 5, 128]} />
    <meshStandardMaterial transparent opacity={0.6} side={THREE.DoubleSide} color="#dfd195" />
  </mesh>
)}

export const AsteroidBelt = ({ count = 600 }: { count?: number }) => {
  const { dummy, particles } = useMemo(() => {
    const dummy = new THREE.Object3D();
    const particles = [];
    for (let i = 0; i < count; i++) {
      const angle = Math.random() * Math.PI * 2;
      const radius = 55 + Math.random() * 8;    // between Mars and Jupiter
      particles.push({
        x: Math.cos(angle) * radius,
        y: (Math.random() - 0.5) * 2,
        z: Math.sin(angle) * radius,
        scale: 0.05 + Math.random() * 0.15,
      });
    }
    return { dummy, particles };
  }, [count]);

  // Rotates the belt every frame
  useFrame((state) => {
    const time = state.clock.getElapsedTime() * 0.1;
    particles.forEach((p, i) => {
      // each asteroid maintains its relative angle + slow rotation
      dummy.position.set(p.x, p.y, p.z);
      dummy.scale.setScalar(p.scale);
      dummy.updateMatrix();
      meshRef.current!.setMatrixAt(i, dummy.matrix);
    });
    meshRef.current!.instanceMatrix.needsUpdate = true;
  });

  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <dodecahedronGeometry args={[1, 0]} />
      <meshStandardMaterial color="#888888" roughness={0.9} metalness={0.1} />
    </instancedMesh>
  );
};

useFrame((state) => {
  if (groupRef.current) {
    const time = state.clock.getElapsedTime();
    const orbitalSpeed = 0.5 / (radius + 2);
    const angle = time * orbitalSpeed + radius * 10.5;  // offset prevents all planets lining up
    groupRef.current.position.set(
      Math.cos(angle) * (type === 'SUN' ? 0 : radius),
      0,
      Math.sin(angle) * (type === 'SUN' ? 0 : radius)
    );
  }
});

const CameraRig = ({ targetProgress, zoomLevel, dragOffset }) => {
  const { camera } = useThree();

  useFrame(() => {
    const progress = useCosmosStore.getState().scrollProgress;  // no stale closure
    const azimuth = progress * Math.PI * 2 + dragOffset.current.x;
    const elevation = 0.3 + dragOffset.current.y;
    const r = 60 * zoomLevel.current;
    camera.position.set(
      r * Math.sin(azimuth) * Math.cos(elevation),
      r * Math.sin(elevation),
      r * Math.cos(azimuth) * Math.cos(elevation)
    );
    camera.lookAt(0, 0, 0);
  });
  return null;
};

const VirtualPilot = ({ targetProgress }) => {
  useFrame(() => {
    const { scrollProgress, setScrollProgress, setActivePlanet } = useCosmosStore.getState();
    const next = scrollProgress + (targetProgress.current - scrollProgress) * 0.05; // lerp
    setScrollProgress(next);

    // Snap to nearest planet
    const idx = Math.round(next * (PLANET_ORDER.length - 1));
    const snapped = PLANET_ORDER[Math.max(0, Math.min(idx, PLANET_ORDER.length - 1))];
    if (snapped !== useCosmosStore.getState().activePlanet) setActivePlanet(snapped);
  });
  return null;
};

// Plain wheel scroll = navigate planets; Ctrl/Meta wheel = zoom
const handleWheel = (e: WheelEvent) => {
  if (e.ctrlKey || e.metaKey) {
    e.preventDefault();
    zoomLevel.current = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX,
      zoomLevel.current - e.deltaY * 0.002));
  } else {
    targetProgress.current = Math.max(0, Math.min(1,
      targetProgress.current + e.deltaY * 0.00025));
  }
};

// Planet focus: snap both scrollProgress and activePlanet simultaneously
const handlePlanetFocus = useCallback((index: number) => {
  const snapped = index / (PLANET_ORDER.length - 1);
  targetProgress.current = snapped;
  useCosmosStore.getState().setScrollProgress(snapped);
  useCosmosStore.getState().setActivePlanet(PLANET_ORDER[index]);
}, []);

export const ExperienceOrbit = () => {
  const openDrawer = useSiteSettingStore((s) => s.openDrawer);
  const isDrawerOpen = openDrawer !== null;
  useDrawerLock(isDrawerOpen);

  return (
    <div className="relative w-full h-screen overflow-hidden">
      {/* 3D Canvas — sole loading gate via Suspense */}
      <Suspense fallback={<LoadingScreen />}>
        <SolarSystemScene locked={isDrawerOpen} />
      </Suspense>

      {/* HUD overlays — absolute, not fixed */}
      <TopControls />
      <PlanetInfoPanel />
      <StatusBar />
      <PlanetDrawer />
    </div>
  );
};

<AnimatePresence mode="wait">
  <motion.div
    key={activePlanet}
    initial={{ opacity: 0, y: 14 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -14 }}
    transition={{ duration: 0.35 }}
  >
    <span className="font-orbitron text-xs text-white/40">
      {String(currentIndex + 1).padStart(2, '0')} / {String(PLANET_ORDER.length).padStart(2, '0')}
    </span>
    <h2 className="text-4xl font-black text-white">{label}</h2>
    <p className="text-white/60">{bio}</p>
    <button onClick={() => setOpenDrawer(activePlanet)}>Explore</button>
  </motion.div>
</AnimatePresence>

// ✅ Each item is a component, so the hook call is legal
const PlanetNavItem = ({ type, index, onFocus }) => {
  const isActive = useCosmosStore((s) => s.activePlanet === type);
  return (
    <button onClick={() => onFocus(index)} className="flex items-center gap-3 group py-2">
      {/* Index number */}
      <span className={cn('text-[8px] tabular-nums w-4 text-right',
        isActive ? 'text-blue-400' : 'text-white/20')}>
        {String(index + 1).padStart(2, '0')}
      </span>

      {/* Tick line — active glows blue */}
      <div className={cn('h-px rounded-full transition-all duration-500',
        isActive
          ? 'w-6 bg-blue-400 shadow-[0_0_8px_2px_rgba(96,165,250,0.6)]'
          : 'w-2 bg-white/20 group-hover:w-4 group-hover:bg-white/40')} />

      {/* Planet name */}
      <span className={cn('text-[10px] font-black uppercase tracking-[0.25em]',
        isActive ? 'text-white' : 'text-white/25 group-hover:text-white/60')}>
        {type}
      </span>
    </button>
  );
};

export const PlanetNav = ({ onFocus }) => (
  <div className="absolute top-10 md:top-1/2 left-6 md:left-8 md:-translate-y-1/2 z-50
    pointer-events-auto font-orbitron! flex flex-col mix-blend-difference">
    {/* Vertical track line */}
    <div className="absolute left-[1.1rem] top-0 bottom-0 w-px bg-white/5" />
    {PLANET_ORDER.map((type, i) => (
      <PlanetNavItem key={type} type={type} index={i} onFocus={onFocus} />
    ))}
  </div>
);

const scrollProgress = useCosmosStore((s) => s.scrollProgress);
const pct = Math.round(scrollProgress * 100);

<motion.div
  className="h-0.5 bg-blue-400 origin-left"
  style={{ scaleX: scrollProgress }}
/>
<span className="text-white/40 text-xs font-orbitron">{pct}%</span>

const SECTION_MAP: Record<string, React.ComponentType> = {
  MyUniverse:        MyUniverse,
  MyTechStack:       MyTechStack,
  PersonalValuation: PersonalValuation,
  ExperienceTimeline:ExperienceTimeline,
  ContactSection:    ContactSection,
  CommingSoon:       CommingSoon,
};

<Drawer direction="right" open={isOpen} onOpenChange={(o) => !o && setOpenDrawer(null)}>
  <DrawerContent className="max-w-4xl ml-auto h-full backdrop-blur-xl border-l border-white/10">
    {SectionComponent && <SectionComponent />}
  </DrawerContent>
</Drawer>