Metallic Logo — Godsend

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/MetallicLogo.svelte and installs its dependencies.

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

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

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

The studio environment is procedural, so the component does not need an HDR texture.

Overview

The SVG silhouette is converted to the same signed-distance geometry used by Physical Glass Logo, including its transform, bevel profile, corner smoothing, and internal-ridge handling.

A conductive GGX material reflects a procedural studio environment with white panels and warm and cool lights. Perspective rays keep the flat face visually active while the bevel bends those reflections around the outline.

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 MetallicLogo from '$lib/components/ui/MetallicLogo.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<MetallicLogo
		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 MetallicLogo from '$lib/components/ui/MetallicLogo.svelte';
</script>

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

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

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

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

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { MetallicLogo } from '@/components/ui/MetallicLogo';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<MetallicLogo
				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 MetallicLogo from '@/components/ui/MetallicLogo.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<MetallicLogo
			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 MetallicLogo from '@/components/ui/MetallicLogo.vue';
</script>

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

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

Bevel width, height, curvature, and surface smoothing match the geometry controls in Physical Glass Logo.
Lower roughness for sharp chrome reflections. Raise it for a softer satin finish.
Brushing perturbs only the material normal; it does not change the SVG silhouette or bevel profile.
Set Speed to zero to stop the studio lights, then use Environment rotation to position them manually.
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.