Loading…

Radial Intro

beta

An intro that spins a stack of avatars out along a spiral into a ring on staggered springs, then lets the ring orbit slowly with every face upright.

Display
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add radial-intro

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { RadialIntro } from "@/components/ui/radial-intro";

Examples

Every example the tests run, live and operable, side by side.

Default
Sizes
No Orbit
In View
Playground

API

Generated from the component's own types, so a prop cannot appear here without existing.

<RadialIntro>

Prop	Type	Default
`items` (required)	`RadialIntroItem[]`	—
`handleRef` Receives `{ replay }`.	`Ref<RadialIntroHandle>`	—
`onSettled` Called once every avatar has landed.	`() => void`	—
`orbit` After landing, rotate the ring slowly. Avatars stay upright.	`boolean`	`true`
`orbitDuration` Seconds per orbit.	`number`	`40`
`pauseLabel` The orbit pause toggle's accessible name.	`string`	`"Pause rotation"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`stagger` Milliseconds between one avatar setting off and the next.	`number`	`80`
`trigger` `mount` plays at once; `inView` waits until the ring first scrolls into view.	`"mount" \| "inView"`	`"mount"`
`children` Rendered in the centre of the ring, fading in once the avatars have spread.	`ReactNode`	—

Plus every attribute of <div> except children.

Accessibility

A list (role="list") of images, each with its alt text; the names that float above an avatar on hover are aria-hidden duplicates of the alt. The track and the motion are decoration. Because the orbit runs indefinitely, an orbiting ring has a toggle button ("Pause rotation", aria-pressed) to stop it (WCAG 2.2.2), and the orbit also pauses while an avatar is hovered or the ring is off screen. The intro plays on mount or when first scrolled into view. Springs run through motion inside MotionConfig reducedMotion="user"; under reduced motion the finished ring renders at once and never orbits, and the pause toggle is not shown.