Radial Intro

Items fly out from the center and orbit. Pro · Animated components › Radial menus

An intro scene: items fly out from the centre onto a ring one after another, then keep orbiting — a circle of supported games, integrations or classes. The items stay upright as the ring turns; only transforms animate. The orbit pauses off screen, in a hidden tab and (optionally) under the pointer; reduced motion shows the still ring.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add radial-intro

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { RadialIntro } from 'valyro-ui-pro';

Props

Prop	Type	Default
`orbitItems` *	`readonly RadialIntroItem[]`		Logos, heroes or classes placed around the circle, clockwise from the top.
`stageSize`	`number`	`320`	Width and height of the stage, px (default 320).
`imageSize`	`number`	`60`	Size of each orbiting item, px (default 60).
`duration`	`number`	`30`	Seconds per full turn (default 30).
`direction`	`'cw' \| 'ccw'`	`'cw'`	`cw` (default) or `ccw`.
`pauseOnHover`	`boolean`	`true`	Halt the orbit while the pointer is over the stage (default true).
`children`	`ReactNode`		Content of the middle of the stage (a logo, a title).

Related components

Radial Menu — Ring-shaped context menu on right-click
Radial Nav — Circular navigation with an arrow that turns to the section
Toggle — Toggle button with a springy response
Flip Button — Two-sided button that flips on a spring
Liquid Button — Button that fills with “liquid” on hover
Theme Toggler — Light/dark switch with a View Transitions reveal
GitHub Stars Button — Repository link with a rolling star count
Share Button — Button that fans out social icons
Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
Number Wheel — Number on a spinning wheel with neighboring values
Pin List — Pinnable list: items glide between groups
Notification Stack — Notification stack that expands into a list

Previous: Radial Nav · Next: Link Preview · All Animated components