Components
Loading preview...
Renders a globe-based orbital path with an elevated satellite marker, ground track, and optional animated motion for space or telecom visualizations.
npx shadcn@latest add https://21st.dev/r/ridemountainpig/flightcn-satellite-orbit"use client";
import { SatelliteOrbit, Map } from "@/components/ui/flightcn-satellite-orbit";
export default function DefaultSatelliteOrbitDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="h-[520px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm">
<Map projection={{ type: "globe" }} center={[8, 16]} zoom={1.05}>
<SatelliteOrbit
inclination={51.6}
ascendingNode={-28}
altitudePx={28}
orbitWidth={2.2}
groundTrackWidth={1.4}
showGlow={true}
showConnector={true}
orbitLineStyle="solid"
groundTrackLineStyle="dash"
connectorLineStyle="dash"
animate={{ duration: 12000 }}
satelliteIconRotationOffset={0}
name="ISS"
showLabel={true}
labelPosition="right"
/>
</Map>
</div>
</div>
);
}
export { DefaultSatelliteOrbitDemo };