Hero made by @ybouane.

@crazygl/hero-floating-metal-frame

Your product screenshot held inside a brushed-metal frame, lit like a physical product photograph. The frame sits at an adjustable static angle, tilts with the pointer for parallax, and optionally rotates to catch studio highlights.

Demo

Screenshot in a Floating Metal Frame

Install

npm install @crazygl/hero-floating-metal-frame

Usage

import FloatingMetalFrame from '@crazygl/hero-floating-metal-frame';

export default function Hero() {
	return (
		<FloatingMetalFrame
			heading="See it in action."
			screenshot="https://crazygl.com/samples/screenshot-dashboard-dark-2.avif"
			frameRoughness={0.28}
			rotationSpeed={0.05}
		/>
	);
}

Customise

• Content — heading + subheading, two columns, or a custom node, with contentAlign/padding.
• Screenshot — screenshot (frame auto-matches its aspect), screenScale, screenshotX/Y, screenBrightness, glassReflection.
• Frame — frameColor, frameMetalness, frameRoughness (chrome → brushed → matte), frameThickness, frameCornerRadius, frameDepth, frameClearcoat.
• Motion — static frameAngleY/X, rotationSpeed, pointerParallax, shadowSoftness/Strength.
• Lighting — keyLight, fillLight, backLight, envIntensity (studio reflection).
• Background — bgTop/bgBottom gradient.

Best for

• Premium SaaS launch and feature pages where a screenshot must feel like a crafted object.
• Product and design-tool showcases.
• Polished startup landing sites needing a studio-grade hero shot.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.