Animated Divider

Draws outward from the middle on arrival, with an optional label and a dot running along it now and then.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add animated-divider

Example

import { AnimatedDivider } from "@/components/galactrex/animated-divider";

<AnimatedDivider label="Chapter 2" />

Installs to components/galactrex/animated-divider.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`label`	`ReactNode`	—	Middle label.
`traveler`	`boolean`	`true`	Running dot.
`line`	`"solid" \| "dashed" \| "dotted"`	`"solid"`	Line style.
`className`	`string`	—	Extra classes for the outer element.