proNew323 lines · framer-motion

CTA Orbit

Every integration, orbiting one hub. A centred call-to-action card acting as a hub, with five hand-drawn icon tokens (connect, build, ship, launch, sync) slowly circling it on an elliptical path, dipping behind and in front of the card for a light sense of depth.

Use it for: A platform or integrations page section that wants to show 'everything connects to one place' without a literal diagram.
Themes: Light + dark
License: Commercial use

Live

Platform

One hub, every integration orbiting it

Connect your stack once. Each piece stays in sync on its own, so the centre is the only thing your team has to watch.

Get started →View the docs

tsx

"use client";

import * as React from "react";
import { useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * A centred CTA with abstract icon tokens slowly orbiting a central hub on
 * elliptical paths. Positions are computed each animation frame from
 * elapsed wall-clock time (device-independent, no per-frame randomness) via
 * a `requestAnimationFrame` loop, then written straight to each token's
 * inline transform. The loop pauses — freezing tokens exactly where they
 * are — on hover, when the block scrolls offscreen (`IntersectionObserver`)
 * or the tab is hidden, and never starts at all under
 * `prefers-reduced-motion`, which instead renders one fixed, evenly spaced

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Token positions are recomputed every animation frame from elapsed wall-clock time (performance.now() deltas accumulated in a ref, not frame count), fed through fixed-phase sine/cosine so the five tokens stay evenly spaced on the ellipse — no Math.random() anywhere in the loop.
→Each token's vertical phase also drives a depth value that scales its size/opacity and swaps its z-index above or below the central card, so tokens visibly pass behind the hub on one half of the orbit and in front on the other.
→The requestAnimationFrame loop skips its position update (freezing all tokens in place) while the pointer is hovering the orbit area, the block is scrolled offscreen per IntersectionObserver, or the tab is hidden per visibilitychange; it resumes the moment any of those clears.
→prefers-reduced-motion never starts the loop — positions are computed once for a fixed elapsed value, giving a still, evenly spaced arrangement instead of a frozen mid-motion frame.
→duration sets how many seconds one full orbit takes; tokens controls which icons appear and their labels.

Accessibility

✓Every orbiting token is a single `aria-hidden` decorative layer; the hub's headline, subcopy and two CTAs are the only content in the accessibility tree.
✓Both CTAs are real `<a href="#">` elements with `preventDefault` (no page jump) and visible focus rings, not `<div onClick>`.
✓Headline is a real `<h2>`; body copy keeps `card-foreground`/`muted-foreground` contrast against `bg-card` in both themes.
✓No native browser dialogs or `<select>` are used anywhere in the block.
✓Honours prefers-reduced-motion.