ShimmerButton

Preview

Installation

pnpm add fancy-ui-svelte

import { ShimmerButton } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { ShimmerButton } from 'fancy-ui-svelte';
</script>

<ShimmerButton />

Examples

Basic Usage

Shimmer Colors

Change the shimmer highlight color.

svelte

<script lang="ts">
	import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerColor="#ffffff">White</ShimmerButton>
		<span class="text-muted-foreground text-xs">#ffffff</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerColor="#60a5fa">Blue</ShimmerButton>
		<span class="text-muted-foreground text-xs">#60a5fa</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerColor="#f472b6">Pink</ShimmerButton>
		<span class="text-muted-foreground text-xs">#f472b6</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerColor="#4ade80">Green</ShimmerButton>
		<span class="text-muted-foreground text-xs">#4ade80</span>
	</div>
</div>

Animation Speed

Control the shimmer speed.

svelte

<script lang="ts">
	import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerDuration="1.5s">Fast (1.5s)</ShimmerButton>
		<span class="text-muted-foreground text-xs">shimmerDuration="1.5s"</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerDuration="3s">Default (3s)</ShimmerButton>
		<span class="text-muted-foreground text-xs">shimmerDuration="3s"</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerDuration="6s">Slow (6s)</ShimmerButton>
		<span class="text-muted-foreground text-xs">shimmerDuration="6s"</span>
	</div>
</div>

Shimmer Size

Adjust the border thickness.

svelte

<script lang="ts">
	import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerSize="0.03em">Thin</ShimmerButton>
		<span class="text-muted-foreground text-xs">0.03em</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerSize="0.05em">Default</ShimmerButton>
		<span class="text-muted-foreground text-xs">0.05em</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton shimmerSize="0.1em">Thick</ShimmerButton>
		<span class="text-muted-foreground text-xs">0.1em</span>
	</div>
</div>

Custom Background

Set a custom background color.

svelte

<script lang="ts">
	import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<ShimmerButton background="rgba(59, 130, 246, 0.8)" shimmerColor="#93c5fd">Blue</ShimmerButton>
	<ShimmerButton background="rgba(139, 92, 246, 0.8)" shimmerColor="#c4b5fd">Purple</ShimmerButton>
	<ShimmerButton background="rgba(20, 83, 45, 0.9)" shimmerColor="#86efac">Green</ShimmerButton>
</div>

Border Radius

Change the button shape.

svelte

<script lang="ts">
	import { ShimmerButton } from "$lib/fancy-ui/shimmer-button";
</script>

<div class="flex flex-wrap justify-center gap-4">
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton borderRadius="8px">Rounded</ShimmerButton>
		<span class="text-muted-foreground text-xs">8px</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton borderRadius="100px">Pill (default)</ShimmerButton>
		<span class="text-muted-foreground text-xs">100px</span>
	</div>
	<div class="flex flex-col items-center gap-2">
		<ShimmerButton borderRadius="0px">Square</ShimmerButton>
		<span class="text-muted-foreground text-xs">0px</span>
	</div>
</div>

Props

Prop	Type	Default	Description
`shimmerColor`	string	`"#ffffff"`	Shimmer highlight color
`shimmerSize`	string	`"0.05em"`	Thickness of the shimmer border
`borderRadius`	string	`"100px"`	Button border radius
`shimmerDuration`	string	`"3s"`	Duration of the shimmer animation cycle
`background`	string	`"rgba(0, 0, 0, 1)"`	Button background color