✨ ShineBorder Component

Wrap your content in an animated border with a smooth horizontal shine effect. Perfect for highlighting important cards, CTAs, or featured content.

Basic Example

The default ShineBorder with standard settings. Clean, subtle animation that draws attention without overwhelming your content.

Featured Content

This card is wrapped in a ShineBorder component with default settings. The subtle animation adds visual interest without distraction.

View Code Example

<script>
  import ShineBorder from '$lib/components/ShineBorder.svelte';
</script>

<ShineBorder>
  <div class="content">
    Your content here
  </div>
</ShineBorder>

Colour Variations

Customise the border colour to match your brand or design system. Any CSS colour value is supported.

Blue

#146ef5

Green

#10b981

Purple

#8b5cf6

Orange

#f59e0b

View Code Example

<ShineBorder color="#146ef5">
  <div>Blue border</div>
</ShineBorder>

<ShineBorder color="#10b981">
  <div>Green border</div>
</ShineBorder>

Animation Speed

Control the animation speed with the duration prop (in seconds). Choose between fast, medium, and slow animations.

Fast

duration=1.5

Quick, energetic animation

Medium

duration=3

Balanced, standard speed

Slow

duration=6

Subtle, gentle animation

View Code Example

<ShineBorder duration={1.5}>
  <div>Fast animation</div>
</ShineBorder>

<ShineBorder duration={6}>
  <div>Slow animation</div>
</ShineBorder>

Border Styling

Customise the border width and corner radius to match your design needs.

Thin Border

borderWidth=1

Subtle, minimal outline

Thick Border

borderWidth=4

Bold, prominent frame

Sharp Corners

borderRadius=0

Square, modern look

Round Corners

borderRadius=32

Soft, friendly style

View Code Example

<ShineBorder borderWidth={4} borderRadius={16}>
  <div>Thick border with rounded corners</div>
</ShineBorder>

Component Features

🎨

Customisable Colours

Use any CSS colour value - hex, RGB, HSL, or named colours.

⚡

CSS Animations

Smooth, performant animations using native CSS with no JavaScript overhead.

🎯

Flexible Sizing

Automatically adapts to content size with configurable border width and radius.

🔧

Easy Integration

Simply wrap any content - works as a container component with Svelte snippets.

📦

Zero Dependencies

Pure Svelte and CSS implementation with no external libraries required.

♿

Accessible

Decorative element that doesn't interfere with screen readers or keyboard navigation.

Quick Start Guide

Copy the Component

Copy ShineBorder.svelte from src/lib/components/ to your project.

Import and Use

Import the component and wrap your content. All props are optional with sensible defaults.

Customise

Adjust colour, duration, border width, and radius to match your design requirements.

Props Reference

Prop	Type	Default	Description
`color`	string	'#146ef5'	CSS colour value for the border shine
`duration`	number	3	Animation duration in seconds
`borderWidth`	number	2	Border width in pixels
`borderRadius`	number	8	Corner radius in pixels