Moving Border
Button or container with a continuously moving gradient border animation.
Preview
Moving Border
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Featured actions and highlighted interactive elements.
Why this component matters
The moving border draws attention through persistent, subtle motion — ideal for the single most important action on a page.
Usage guidance
Use for ONE primary CTA per page. The motion makes it the loudest element — pair it with understated surrounding content. Set speed to 3-5 seconds per loop.
Installation
bash
npx shadcn@latest add @aceternity/moving-borderUsage
example.tsxtsx
import { MovingBorder } from "@/components/ui/moving-border";
export default function Example() {
return (
<MovingBorder>
{/* Your content here */}
</MovingBorder>
);
}Source
moving-border.tsx
components/ui/moving-border.tsx