Moving Border

Source: Aceternity UI ↗
Author: Aceternity UI
Licence: Aceternity UI licence (free component)

Loading…

A glowing dot travels around the rounded border of a button.

Code

"use client";
import React from "react";
import { Button } from "@/lab/aceternity/ui/moving-border";

export default function MovingBorderDemo() {
  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <Button
        borderRadius="1.75rem"
        className="border-neutral-200 bg-white text-black dark:border-slate-800 dark:bg-slate-900 dark:text-white"
      >
        Borders are cool
      </Button>
    </div>
  );
}

Prompt

Build "Moving Border", a button animation. What it does: A glowing dot travels around the rounded border of a button. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library, inline SVG. It sits on a dark background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/moving-border (Aceternity UI, Aceternity UI licence (free component)).