Border Trail Demo

1"use client";
2 
3import { BorderTrail } from "@/components/sora-ui/effects/border-trail";
4 
5const BORDER_TRAIL_CARD_GLOW = {
6  boxShadow:
7    "0px 0px 60px 30px rgb(255 255 255 / 50%), 0 0 100px 60px rgb(0 0 0 / 50%), 0 0 140px 90px rgb(0 0 0 / 50%)",
8} as const;
9 
10export interface BorderTrailDemoProps {
11  duration?: number;
12  size?: number;
13}
14 
15/** motion-primitives `border-trail-card-1` */
16export function BorderTrailDemo({
17  duration = 5,
18  size = 100,
19}: BorderTrailDemoProps) {
20  return (
21    <div className="relative flex h-[200px] w-[300px] flex-col items-center justify-center rounded-md bg-zinc-200 px-5 py-2 dark:bg-zinc-800">
22      <BorderTrail
23        size={size}
24        style={BORDER_TRAIL_CARD_GLOW}
25        transition={{
26          duration,
27          ease: "linear",
28          repeat: Number.POSITIVE_INFINITY,
29        }}
30      />
31      <div
32        aria-label="Loading..."
33        className="flex h-full animate-pulse flex-col items-start justify-center space-y-2"
34        role="status"
35      >
36        <div className="h-1 w-4 rounded-[4px] bg-zinc-600" />
37        <div className="h-1 w-10 rounded-[4px] bg-zinc-600" />
38        <div className="h-1 w-12 rounded-[4px] bg-zinc-600" />
39        <div className="h-1 w-12 rounded-[4px] bg-zinc-600" />
40        <div className="h-1 w-12 rounded-[4px] bg-zinc-600" />
41      </div>
42    </div>
43  );
44}
45 
46export default BorderTrailDemo;