OrbitalIconCloud

OrbitalIconCloud showcases ThorAPI ContentMediaLink assets along a rotating orbit—perfect for integrations, partners, or community shoutouts.

When to Use

• Display integration logos near a MagneticFeatureCard bundle.
• Create an animated break between sections on landing pages.
• Highlight contributors beside the AuroraHero hero.

Props

Prop	Type	Description
mediaLinks	ContentMediaLink[]	Media assets for each node; prefers square images.
diameter?	number	Size of the orbit in pixels (default 320).
rotationDuration?	number	Seconds for a full revolution (default 26).
autoRotate?	boolean	Disable to respect reduced-motion contexts.
centerLabel?	string	Text rendered in the glowing core.

Usage

import OrbitalIconCloud from "@valkyr/component-library/OrbitalIconCloud";
import { ContentMediaLink } from "@thorapi/model";

const orbit: ContentMediaLink[] = [
  {
    mediaUrl: "https://cdn.valkyrlabs.com/partners/aws.png",
    contentUse: "AWS",
  },
  {
    mediaUrl: "https://cdn.valkyrlabs.com/partners/google-cloud.png",
    contentUse: "GCP",
  },
  {
    mediaUrl: "https://cdn.valkyrlabs.com/partners/slack.png",
    contentUse: "Slack",
  },
  {
    mediaUrl: "https://cdn.valkyrlabs.com/partners/gitlab.png",
    contentUse: "GitLab",
  },
];

<OrbitalIconCloud
  mediaLinks={orbit}
  centerLabel="ThorAPI Partners"
  rotationDuration={20}
/>;

Implementation Notes

• CSS variables (--orbital-diameter, --orbit-angle) keep layout math in the stylesheet, simplifying theming.
• Each node uses transforms that balance hover lift with the global orbit animation.
• Falls back to Valkyr GitHub avatars when no media is provided, keeping kitchensink demos lively.

Cross Links

• Tie this into a VelocityScrollPanel to list partner updates alongside the orbit.
• See AuroraHero for a matching animated hero.