Svelte 5 component · fractalsvelte-ui · Motion

ShimmerEffect

A continuous diagonal light sweep overlay designed for attention highlights and loading skeleton containers. Accepts customizable angles, cycle durations, and sweep colors.

All components Source

Install

ShimmerEffect is a Svelte 5 shimmer effect component in @fractaldesign/fractalsvelte-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/fractalsvelte-ui

Import

import

import { ShimmerEffect } from '@fractaldesign/fractalsvelte-ui';

Usage

Example

<ShimmerEffect active={true} duration={2} angle={45}>Click me</ShimmerEffect>

Props

Also accepts every attribute of HTMLAttributes, spread onto the root element.

Name	Type	Default
`active`	`boolean`	`true`
`duration`	`number`	`2`
`angle`	`number`	`45`
`color`	`string`	`'rgba(255, 255, 255, 0.12)'`
`class`	`string`	`''`

Snippets

Name	Type	Default
`children`	`Snippet`	`—`

Source

Show the ShimmerEffect.svelte source

ShimmerEffect.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { HTMLAttributes } from 'svelte/elements';

	interface Props extends HTMLAttributes<HTMLDivElement> {
		active?: boolean;
		duration?: number;
		angle?: number;
		color?: string;
		class?: string;
		children?: Snippet;
	}

	let {
		active = true,
		duration = 2,
		angle = 45,
		color = 'rgba(255, 255, 255, 0.12)',
		class: className = '',
		children,
		...restProps
	}: Props = $props();
</script>

<div
	class="f-shimmer-wrap {className}"
	data-active={active ? 'true' : undefined}
	style="--shimmer-duration: {duration}s; --shimmer-angle: {angle}deg; --shimmer-color: {color};"
	{...restProps}
>
	{#if children}
		{@render children()}
	{/if}

	{#if active}
		<div class="f-shimmer-sweep" aria-hidden="true"></div>
	{/if}
</div>

<style>
	@layer fractalsvelte-ui.components {
		.f-shimmer-wrap {
			position: relative;
			overflow: hidden;
			display: inline-block;
			width: 100%;
		}

		.f-shimmer-sweep {
			position: absolute;
			inset: 0;
			pointer-events: none;
			z-index: 5;
			background: linear-gradient(
				var(--shimmer-angle),
				transparent 0%,
				transparent 35%,
				var(--shimmer-color) 50%,
				transparent 65%,
				transparent 100%
			);
			background-size: 250% 250%;
			animation: f-shimmer-anim var(--shimmer-duration) infinite linear;
		}

		@keyframes f-shimmer-anim {
			0% {
				background-position: 200% 0;
			}
			100% {
				background-position: -200% 0;
			}
		}
	}
</style>

SplitReveal A dual-shutter curtain container that parts smoothly along horizontal or vertical axes to uncover underlying…SpotlightCard A presentation card illuminated by a cursor-tracking radial flashlight glow and dual-layer glowing perimeter…StaggerList A sequenced list container that animates children into view with staggered delay increments, slide…TextScramble A cybernetic text decoder that scrambles glyphs through random characters before resolving to the target…AnimatedButton An interactive button engineered with spring physics micro-scaling, an animated sweep light effect, and…AnimatedCard A presentation card featuring smooth elevation lift on hover, an optional mouse-following radial border…