Componentsstable

Orbit images

A scroll-activated orbit animation that places images around concentric circles and keeps them rotating once fully visible.

Build trust and highlight your community with a dynamic orbit.

Installation

Install the component directly into your project using the Pittaya CLI.

npx pittaya@latest add orbit-images

When to use

Use this orbit animation to showcase testimonials, team avatars, or brand logos in a dynamic way that reacts to the user's scroll position.

It is ideal for hero sections where you want to highlight motion and visual storytelling without relying on heavy video assets.

Best practices

Provide at least four images to ensure the orbit feels balanced and avoid uneven clustering.
Prefer square assets with generous borders to preserve clarity in smaller device breakpoints.
Combine the component with contrasting background colors so the animated borders remain visible in both light and dark mode.

Accessibility

Ensure that every orbit image includes descriptive alternative text so screen readers can communicate who or what is represented in the animation.

The call-to-action button inherits focus styles from the design system. Keep the contrast ratio high and verify that keyboard users can reach the button without interference from the animated layers.

Avoid relying solely on motion to convey meaning. Pair the orbit with supporting copy that clarifies the intent of the showcased community or logos.

Examples

Combine variants and sizes to meet your needs.

Basic orbit

Scroll until the orbit reaches 80% of the viewport to expand the circles and trigger the rotation.