Orbiting Items 3D — component for diagrams & flows (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Glassy icon bubbles circle a glowing purple orb on a tilted ellipse, growing as they swing to the front

• Install: npx shadcn@latest add https://animata.design/r/list/orbiting-items-3-d.json
• Registry: animata · Framework: react · License: MIT
• Docs and preview: https://animata.design/docs/list/orbiting-items-3-d
• Source: https://github.com/codse/animata/blob/main/animata/list/orbiting-items-3-d.tsx
• Example: https://skills.varg.ai/previews/lib-animata-orbiting-items-3-d.mp4?v=88060 (Captured from the library’s own demo page (Animata))
• Time: Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
• Runs: local render, free
• Aspect: any

Prompt that renders it frame-exact

Use Orbiting Items 3D from Animata (https://animata.design/docs/list/orbiting-items-3-d, MIT) around a product icon or logo in the centre of the frame, with partner or feature icons on the orbit. Each item advances one degree per setInterval tick and eases its position with CSS transitions, so the speed depends on timers. For a render, compute the angle from time, angle = startAngle + 360 * t / period, then apply the component's own maths (ellipse radiusX/radiusY, tiltAngle rotation, bigger scale and higher z-index on the front half) without transitions; t is frame / fps in Remotion or the timeline time in HyperFrames. Set radiusX, radiusY, tiltAngle, duration and the centre element.

Used in

• API & docs explainer
• Math animation
• Diagram explainer
• Science what-if explainer

More diagrams & flows

• Constellation Hub — npx hyperframes add constellation-hub
• Decision Tree — npx hyperframes init my-video --example decision-tree
• Exploded Stack — npx hyperframes add exploded-stack
• Flowchart — npx hyperframes add flowchart
• Flowchart Vertical — npx hyperframes add flowchart-vertical
• Hand-Drawn Flowchart — npx hyperframes add hw-pipeline