Hero made by @ybouane.

@crazygl/hero-phone-mockup

A mobile screenshot floats inside a realistic 3D phone mockup. The phone rotates with the cursor and the screen pulses with subtle app glow. Perfect for app launch pages.

Demo

Vertical Phone Screenshot With 3D Depth

Install

npm install @crazygl/hero-phone-mockup

Usage

import HeroPhoneMockup from '@crazygl/hero-phone-mockup';

export default function App() {
	return (
		<HeroPhoneMockup
			heading="Built for thumbs."
			subheading="Your app, beautifully framed."
			screenshot="/screens/my-app.png"
			bodyTint="#ffffff"
		/>
	);
}

Customise

• Screenshot — screenshot (the vertical app image; 9:19.5 crops cleanest) and screenBrightness (how strongly the screen self-illuminates).
• Phone — useGlbMaterials keeps the GLB's authored PBR finish; bodyTint multiplies over it for color variants. Turn the toggle off to fully override phoneColor / frameMetalness / frameRoughness. phoneScale sizes the phone.
• Motion — pointerRotation (how strongly the phone follows the cursor) and appGlowPulse (subtle screen brightness pulse).
• Background — transparentBackground, or a radial gradient via bgColor1 / bgColor2.
• Lighting — keyColor / fillColor / backColor of the studio rig plus envIntensity for the procedural HDRI reflection.
• Layout — contentAlign, phoneOffsetX / phoneOffsetY, padding.

Best for

• Mobile-app landing pages and consumer-app launches.
• SaaS / product sites that want the screenshot to read as the hero.
• App Store / Play Store campaign pages and storefront apps.

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.