Integrations Orbit

Files:

• index.html: the demo page. The section is everything from <section class="orbit-int" data-orbit …> to its closing </section>.
• assets/style.css: all styles, scoped to .orbit-int.
• assets/script.js: the behaviour (readable source).

Dependencies: GSAP 3.15.0 core (no plugins) and two Google Fonts, Onest and Red Hat Mono. No build step.

In your downloadThe working code for this step, in index.html.

The script mounts every [data-orbit] on the page when the DOM is ready. The <style> block in the demo's <head> only colours the demo page and is not needed.

The one-line inline <script> just inside the section adds orbit-int--pending, which hides the orbit stage until the main script has laid it out, so the tools never flash as a grid first. It removes itself after four seconds if the main script or GSAP never arrives, leaving the full directory. Keep it if you can; without it the section still works, with a brief grid-to-orbit jump on load.

Copy and actions

The heading, paragraph, the two action links and the note are plain HTML at the top of the section. Point the two https://example.com/... links at your integration directory and API docs, and delete the "fictional" note. The heading is an h2; change the tag freely, but keep its id matching the section's aria-labelledby.

The eyebrow count (<span data-orbit-count>) is filled in from the number of tools, so it never drifts.

Tools

Each tool is one <li> in <ul data-orbit-tools>:

In your downloadThe working code for this step, in index.html.

• Add, remove or reorder tools by copying, deleting or moving whole <li> blocks. Order inside a ring is markup order.
• data-ring puts the tool on a ring: 1 is the innermost. The rings are built from whatever numbers you use, so 1, 2 and 3 give three rings; two or three rings read best, four is the most that fits. Inner rings hold fewer tiles: about 4 on ring 1, 5 or 6 on ring 2 and 6 to 8 on ring 3 at the default size. A single tool on a ring is fine.
• data-category must match one chip's data-orbit-filter value.
• --tool is the tile colour. The glyph is white, so choose a mid-to-dark colour.
• The mark is decorative (aria-hidden); the name in the card is what screen readers announce. To use a real logo, replace the <svg> with your own inline SVG or an <img src="logos/fernpay.svg" alt="" width="26" height="26">. Logos are shown at 26px in the orbit and 22px in the directory.
• The Connect link is the tool's keyboard stop. Keep the hidden tool name inside it so every link has a distinct label.

Categories

The chips live in <div data-orbit-filters>. Each <button data-orbit-filter="crm"> matches tools with data-category="crm"; keep the all chip first. Add or remove chips freely. The status line under the chips reads its wording from data-orbit-status-all and data-orbit-status-some, where {count} and {category} (the chip's text) are filled in.

Brand variables

All on .orbit-int in assets/style.css:

A light rebrand, for example: --orbit-ground:#f6f5f2; --orbit-ink:#16171a; --orbit-muted:#55595f; --orbit-quiet:#61656b; --orbit-panel:#ffffff; --orbit-line:rgba(0,0,0,.1); --orbit-line-strong:rgba(0,0,0,.2); --orbit-accent:#3048d9; --orbit-on-accent:#ffffff; and set color-scheme:light on the same rule. Check text contrast after any colour change.

The centre mark is the inline SVG in .orbit-int__hub-mark, with the product name in .orbit-int__hub-name; replace both with your own.

• Layout switch: at 620px of section width and wider the tools orbit; below it they read as a two-row swipe row of cards. Without JavaScript, or if GSAP fails to load, the tools read as a directory grid at every width.
• Speed: data-orbit-speed="0.5" on the section halves the rotation speed; 2 doubles it. Ring periods are 60, 85 and 120 seconds per turn at speed 1 (RING_PERIODS near the top of the script).
• Pause: the round icon button pauses and resumes all rings. Rotation also stops whenever the section is off screen.
• Reveal: the first time the section is 15% visible, the rings draw in and the tools spiral out onto their orbits.
• API: window.IntegrationsOrbit has mount(root), mountAll(scope), destroy(root) and get(root). get(root) returns { filter(category), pause(), play(), destroy() }. destroy stops the ticker and observers, removes listeners and the generated SVG, and returns the section to the plain directory layout.

• Every tool's details are real text in the markup at all times; the orbit only positions them.
• Keyboard: Tab reaches each tool's Connect link, which opens that tool's card, stops its ring and draws the connector. Escape closes the card. Chips are buttons with aria-pressed; the status line announces the highlight politely.
• Touch: tap a tile to open its card, tap it again or anywhere else to close it.
• Reduced motion: the rings start still with no reveal, and filter changes jump into place. The play button lets a visitor opt in to rotation. Changing the setting while the page is open is followed.
• Dimmed tools stay reachable and readable; the filter highlights, it never hides.
• The section never installs smooth scrolling or changes the host page's scrolling. The phone swipe row is an ordinary horizontal scroller.
• Each section instance runs independently; several can share a page. A duplicated heading id is made unique automatically.
• The section sets overflow:hidden on its root so the orbit never causes sideways page scroll.

• GSAP 3.15.0 core, loaded from jsDelivr.
• Onest and Red Hat Mono, SIL Open Font License, from Google Fonts.
• All tool names, glyphs and the Quarry mark are original placeholders drawn for this section. They are not real products or brands.