Metal Panels — 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/MetalPanels.svelte and installs its dependencies.

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

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

The surface and studio environment are procedural, so the component does not load image or HDR assets.

Overview

Metal Panels uses the repeating cubic panel profile from Glass Pane, including its hard joins and optional wavy seams, without sampling an image underneath.

The surface uses the exact conductive GGX material shared with Metallic Logo: brushed microstructure, procedural studio reflections, warm and cool lights, and ACES tone mapping.

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

<section class="relative h-128 overflow-hidden">
	<MetalPanels
		class="absolute inset-0"
		speed={0.8}
	/>

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import MetalPanels from '$lib/components/ui/MetalPanels.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<MetalPanels
		class="absolute inset-0"
		speed={0.8}
	/>

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

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<MetalPanels
				className="absolute inset-0"
				speed={0.8}
			/>

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

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<MetalPanels
				className="absolute inset-0"
				speed={0.8}
			/>

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<MetalPanels
			class="absolute inset-0"
			:speed="0.8"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import MetalPanels from '@/components/ui/MetalPanels.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<MetalPanels
			class="absolute inset-0"
			:speed="0.8"
		/>

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

Panel width controls the density of the field. Rotation changes its direction without stretching the panel profile.
Set both Wave frequency and Wave amplitude above zero to bend the otherwise straight joins.
Lower roughness for sharper chrome reflections. Raise it for a softer satin finish.
Set Speed to zero for a static surface, then position the reflections with Environment rotation.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.