Tailwind UI Pattern Registry for humans and agents

orbit integration rotation animation icons stack works-with features orbit integration animation rotating icons logos stack technology works-with integration showcase section orbiting logos around a product icon works-with-your-stack section technology ecosystem visualization

Orbit Feature Base

Fetch pattern JSON: curl https://webspire.de/patterns/orbit-feature/base.json

Details

Family
orbit-feature
Tier
base
Kind
section
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
orbitintegrationrotationanimationiconsstackworks-withfeatures

Slots

Name Required Description
heading Yes Section headline
subheading No One-line description below the headline
center-icon Yes Central hub icon representing your product
inner-items Yes Four items on the inner ring (language/framework icons)
outer-items Yes Four items on the outer ring (service/tool icons)
tag-list No Pill tags listing all integrations below the orbit

Two concentric orbit rings rotate in opposite directions around a central product icon. Each ring holds four items that counter-rotate at the same speed, keeping them upright while visually orbiting. The pattern uses Tailwind’s built-in spin keyframe with arbitrary duration and direction overrides — no custom CSS needed.

Animation technique

  • Inner ring: animate-[spin_14s_linear_infinite] (clockwise)
  • Inner items: animate-[spin_14s_linear_infinite_reverse] (counter, upright)
  • Outer ring: animate-[spin_22s_linear_infinite_reverse] (counter-clockwise)
  • Outer items: animate-[spin_22s_linear_infinite] (forward, upright)