Components

Holographic

Applies an animated holographic spectrum and shimmer over any content.

Preview

Default palette

Holographic

A spectrum shimmer over any content.

Custom colors

Make it yours

Hex, HSL, RGB, named colors, or CSS variables.

More examples

Intensity and speed

Tune the shimmer from barely-there polish to a stronger accent and control its duration.

Whisper

6% · 8s

Balanced

16% · 5s

Vivid

30% · 2.8s

Any shape or content

Apply the effect to interactive controls and cards while owning the shape entirely through Tailwind classes.

Pro plan

$24

Unlimited projects and previews.

Installation

Install directly from the hosted registry with the shadcn-svelte CLI.

Terminal 
npx shadcn-svelte@latest add https://ui.akcodeworks.com/r/holographic.json

Usage

Wrap any content and optionally pass CSS color values. Shape and border radius are controlled through class; no radius is applied by default. Empty color arrays use the built-in spectrum, and reduced-motion preferences are respected.

API reference

PropTypeDefaultDescription
colorsstring[]built-in spectrumColors used by the visual effect.
intensitynumber (0–1)0.16Strength of the visual effect.
durationnumber (milliseconds)5000Duration of the animation in milliseconds.
classstring—Tailwind CSS classes applied to the component root.
childrenSnippetrequiredContent rendered inside the component.

Source

These files are included in the registry item and copied into the consuming project.

holographic.svelte 
<script lang="ts">	import type { Snippet } from 'svelte';	import type { Attachment } from 'svelte/attachments';	import { cn } from '$lib/utils.js';	const defaultColors = ['#22d3ee', '#818cf8', '#e879f9', '#facc15', '#34d399'];	let {		children,		colors = defaultColors,		intensity = 0.16,		duration = 5000,		class: className	}: {		children: Snippet;		colors?: string[];		intensity?: number;		duration?: number;		class?: string;	} = $props();	const palette = $derived(colors.length ? colors : defaultColors);	const gradient = $derived(		`linear-gradient(115deg, transparent 0%, ${palette			.map((color, index) => `${color} ${((index + 1) / (palette.length + 1)) * 100}%`)			.join(', ')}, transparent 100%)`	);	const opacity = $derived(String(Math.min(1, Math.max(0, intensity))));	const animateColors: Attachment<HTMLDivElement> = (element) => {		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;		const animationDuration = Math.max(1000, duration);		const animation = element.animate(			[				{ backgroundPosition: '0% 50%', transform: 'rotate(-4deg) scale(1.15)' },				{ backgroundPosition: '100% 50%', transform: 'rotate(4deg) scale(1.25)' },				{ backgroundPosition: '0% 50%', transform: 'rotate(-4deg) scale(1.15)' }			],			{ duration: animationDuration, iterations: Infinity, easing: 'ease-in-out' }		);		return () => animation.cancel();	};	const animateShimmer: Attachment<HTMLDivElement> = (element) => {		if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;		const animation = element.animate(			[				{ transform: 'translateX(-180%) skewX(-18deg)' },				{ transform: 'translateX(380%) skewX(-18deg)' }			],			{ duration: Math.max(1000, duration) * 0.8, iterations: Infinity, easing: 'ease-in-out' }		);		return () => animation.cancel();	};</script><div	data-slot="holographic"	class={cn('holographic-clip relative isolate overflow-hidden', className)}	style:--holographic-gradient={gradient}	style:--holographic-opacity={opacity}>	<div class="relative z-10">{@render children()}</div>	<div		{@attach animateColors}		aria-hidden="true"		class="pointer-events-none absolute -inset-1/2 z-20 bg-[image:var(--holographic-gradient)] bg-[length:200%_200%] opacity-[var(--holographic-opacity)] mix-blend-screen motion-reduce:transform-none"	></div>	<div		{@attach animateShimmer}		aria-hidden="true"		class="pointer-events-none absolute inset-y-0 -left-1/2 z-30 w-1/2 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-25 mix-blend-soft-light blur-2xl motion-reduce:hidden"	></div></div><style>	.holographic-clip {		mask-image: radial-gradient(white, black);		-webkit-mask-image: -webkit-radial-gradient(white, black);	}</style>
index.ts 
export { default as Holographic } from './holographic.svelte';