magic-ui
components
ui

shine-border

Shine border is an animated background border effect.

animated
effect
gradient
positioning
text
View Docs

Source Code

Files
shine-border
1import { ShineBorder } from "@/components/magicui/shine-border";
2 
3export function ShineBorderDemo() {
4  return (
5    <ShineBorder
6      className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl"
7      color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
8    >
9      <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
10        Shine Border
11      </span>
12    </ShineBorder>
13  );
14}