Liquid Metal

Choose your framework. The registry installs one component file and its PixiJS dependency.

The registry command writes the component to src/lib/components/ui/LiquidMetal.svelte and installs its dependencies.

The registry command writes the component to src/components/ui/LiquidMetal.tsx and installs its dependencies.

The registry command writes the component to src/components/ui/LiquidMetal.vue and installs its dependencies.

PixiJS is included as a registry dependency and is installed by the same command.

The generated component contains both WGSL and GLSL so WebGPU can fall back to WebGL.

Liquid Metal turns layered procedural distortion into a reflective surface that feels fluid without relying on textures or external assets.

It works best as a visual layer inside a deliberately sized container: a hero background, campaign surface, transition, or immersive product section.

The shader fills its parent. Your layout decides whether that parent is a card, hero, or viewport.

<script lang="ts">
	import LiquidMetal from '$lib/components/ui/LiquidMetal.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<LiquidMetal
		class="absolute inset-0"
		color="#FFFFFF"
		speed={0.8}
		refraction={2}
	/>

	<div class="relative z-10">Your content</div>
</section>

<script lang="ts">
	import LiquidMetal from '$lib/components/ui/LiquidMetal.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<LiquidMetal
		class="absolute inset-0"
		color="#FFFFFF"
		speed={0.8}
		refraction={2}
	/>

	<div class="relative z-10">Your content</div>
</section>

import { LiquidMetal } from '@/components/ui/LiquidMetal';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<LiquidMetal
				className="absolute inset-0"
				color="#FFFFFF"
				speed={0.8}
				refraction={2}
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

import { LiquidMetal } from '@/components/ui/LiquidMetal';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<LiquidMetal
				className="absolute inset-0"
				color="#FFFFFF"
				speed={0.8}
				refraction={2}
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

<script setup lang="ts">
import LiquidMetal from '@/components/ui/LiquidMetal.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<LiquidMetal
			class="absolute inset-0"
			color="#FFFFFF"
			:speed="0.8"
			:refraction="2"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

<script setup lang="ts">
import LiquidMetal from '@/components/ui/LiquidMetal.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<LiquidMetal
			class="absolute inset-0"
			color="#FFFFFF"
			:speed="0.8"
			:refraction="2"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

• Give the component or its parent an explicit height; the shader always fills that parent and never claims the viewport itself.
• Place readable foreground content in a later stacking layer and keep contrast independent from the brightest part of the animation.