This component no longer exists. It was in Svelte Animations’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-05 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Shine Border
svelte-animations/shine-borderRemovedBlock
A component that adds a shining animated border effect with customizable colors, duration, and border width.
Install it
npx shadcn@latest add https://sv-animations.vercel.app/r/shine-border.jsonSource
1<script lang="ts">2 import { cn } from "$UTILS$";3 import type { HTMLAttributes } from "svelte/elements";45 interface Props extends HTMLAttributes<HTMLDivElement> {6 borderWidth?: number;7 duration?: number;8 shineColor?: string | string[];9 }1011 let {12 borderWidth = 1,13 duration = 14,14 shineColor = "#000000",15 class: className,16 style,17 ...restProps18 }: Props = $props();1920 let computedStyle = $derived.by(() => {21 const shineColorValue = Array.isArray(shineColor) ? shineColor.join(",") : shineColor;2223 const baseStyles = `24 --border-width: ${borderWidth}px;25 --duration: ${duration}s;26 background-image: radial-gradient(transparent,transparent, ${shineColorValue},transparent,transparent);27 background-size: 300% 300%;28 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);29 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);30 -webkit-mask-composite: xor;31 mask-composite: exclude;32 padding: var(--border-width);33 `;3435 return style ? `${baseStyles} ${style}` : baseStyles;36 });37</script>3839<!-- svelte-ignore element_invalid_self_closing_tag -->40<div41 style={computedStyle}42 class={cn(43 "motion-safe:animate-shine pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position]",44 className45 )}46 {...restProps}47/>
