Physical Glass Logo

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

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

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

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

The generated component builds its SVG distance field in the browser and does not upload artwork to a server.

PixiJS provides matching WebGPU and WebGL implementations, with WebGL used as the fallback backend.

The SVG silhouette is converted to a signed-distance field. One height profile uses its distance and gradient to shape the raised front bevel and derive its normals; a flat rear surface completes the glass volume.

Light rays refract at entry and exit according to Snell’s law. Schlick Fresnel balances reflection and transmission, Beer-Lambert absorption tints the internal path, and a GGX microfacet lobe shapes the highlights.

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

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

<section class="relative h-128 overflow-hidden">
	<PhysicalGlassLogo
		class="absolute inset-0"
		svgSource="/images/your-logo.svg"
		speed={0.8}
	/>

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

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

<section class="relative h-128 overflow-hidden">
	<PhysicalGlassLogo
		class="absolute inset-0"
		svgSource="/images/your-logo.svg"
		speed={0.8}
	/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<PhysicalGlassLogo
				className="absolute inset-0"
				svgSource="/images/your-logo.svg"
				speed={0.8}
			/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<PhysicalGlassLogo
				className="absolute inset-0"
				svgSource="/images/your-logo.svg"
				speed={0.8}
			/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<PhysicalGlassLogo
			class="absolute inset-0"
			svgSource="/images/your-logo.svg"
			:speed="0.8"
		/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<PhysicalGlassLogo
			class="absolute inset-0"
			svgSource="/images/your-logo.svg"
			:speed="0.8"
		/>

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

• The defaults form a wide, shallow bevel with a quadratic slope falloff. Width controls its footprint, height controls its slope, and curvature concentrates the bend toward the outline.
• Index of refraction controls bending at both surfaces. Glass thickness and background distance determine how far the transmitted image is displaced.
• Set dispersion to 0 for neutral refraction, or increase it to separate the red and blue ray paths.
• The current version refracts its built-in animated color field rather than arbitrary page content.
• Simple, filled SVG silhouettes produce the cleanest normals and internal ridges.