Physical Glass Logo

Preparing preview…

Installation

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

Installation unavailable

The preview is public, but its installable release is still being prepared.

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.

Overview

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.

Basic usage

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

Hero.svelte

<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.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.