Metallic 3D 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/Metallic3DLogo.svelte and installs its dependencies.

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

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

The generated component creates the SVG distance field locally in the browser and does not upload the artwork.

The transparent canvas can be composited directly over application backgrounds.

Overview

The SVG distance field is extruded into a closed solid with planar front and back faces and straight side walls. A face-preserving round begins at the original SVG contour and joins each face directly to the wall without curving the face itself.

The material is shared with Metallic Logo: conductive GGX shading, procedural studio reflections, and optional brushed microstructure remain consistent between the flat and extruded variants.

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

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

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

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

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

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

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

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

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

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

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

Model thickness controls the full distance between the front and back faces. Edge rounding controls one quarter-round transition shared by the front-to-side and back-to-side joins, and is automatically limited to fit the selected thickness.
Tilt strength controls rotation amplitude. Follow speed controls both cursor tracking and the smooth return to the frontal pose after the pointer leaves the canvas.
Lower roughness for sharper reflections or raise it for a softer satin finish.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.