Orbital Flow

The Orbital Flow component is a compact and interactive orbital flow, ideal for responsive navigation. It offers a toggleable design with smooth animations, making it a versatile choice for modern web applications.

Messages

Substack

Recordings

Spotify

Instagram

Slack

Notion

Discord

Youtube

Usage

Follow the steps below to add the Orbital Flow Component to your project.

Add the import statement for the component

import OrbitalFlow from "@/components/elixir-ui/orbital-flow";

Add the inner and outer tags props to the component

const innerTags = [
  { name: "Slack", icon: <FaSlack /> },
  { name: "Notion", icon: <SiNotion /> },
  { name: "Discord", icon: <FaDiscord /> },
  { name: "Youtube", icon: <FaYoutube /> },
];

const outerTags = [
{ name: "Messages", icon: <FaEnvelope /> },
{ name: "Substack", icon: <FaRss /> },
{ name: "Recordings", icon: <FaMicrophone /> },
{ name: "Spotify", icon: <FaSpotify /> },
{ name: "Instagram", icon: <FaInstagram /> },
];

Import the component in your project and use it

<div className="h-full w-full flex items-center justify-center">
    <OrbitalFlow
          outerTags={outerTags}
          innerTags={innerTags}
          centerImageSrc="/components/john-lennon.jpg"
          outerOrbitDiameter={850}
          innerOrbitDiameter={550}
          outerRotationSpeed={32}
          innerRotationSpeed={30}
    />
</div>

Props

Prop	Type	Default	Description
outerTags	OrbitTag[]	-	The outer tags to be displayed
outerTags.name	string	-	The name of the outer tag
outerTags.icon	React.ReactNode	-	The icon of the outer tag
innerTags	OrbitTag[]	-	The inner tags to be displayed
innerTags.name	string	-	The name of the inner tag
innerTags.icon	React.ReactNode	-	The icon of the inner tag
centerImageSrc	string	-	The source of the center image
outerOrbitDiameter	number	850	The diameter of the outer orbit
innerOrbitDiameter	number	550	The diameter of the inner orbit
outerRotationSpeed	number	32	The speed of the outer rotation
innerRotationSpeed	number	30	The speed of the inner rotation
className	string	-	Additional CSS classes