Geodesic Sphere

Saved configuration

Click Save to store the current settings in this browser. Any page that uses GeodesicSphere with the shared hook will use those saved settings, so the animation stays consistent across the site.

Features

• Spherical point distribution (Fibonacci sphere) with triangulated connectivity
• Thin, low-opacity lines and subtle node accents
• Canvas-based, no DOM nodes — performant and responsive
• Configurable density, speed, colors, and size
• Default plus three presets; settings persist across pages

Usage

Use the shared config hook so the animation reflects saved settings everywhere:

import GeodesicSphere from "@/components/animations/GeodesicSphere";
import { useGeodesicSphereConfig } from "@/lib/use-geodesic-sphere-config";

export default function HeroSection() {
  const { config } = useGeodesicSphereConfig();
  return (
    <section className="relative flex items-center justify-center py-24">
      <GeodesicSphere {...config} />
    </section>
  );
}

You can also pass props directly to override the saved config: <GeodesicSphere size={520} pointCount={180} />

Presets