CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/phone-mockup

Vertical Phone Screenshot With 3D Depth

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.

ReactWebGL3DImageInteractiveFont#three#3d#phone#iphone#mockup#mobile#app#screenshot#saas#premium

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-phone-mockup
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import VerticalPhoneScreenshotWith3DDepth from '@crazygl/hero-phone-mockup';

export default function Landing() {
  return (
    <VerticalPhoneScreenshotWith3DDepth />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <VerticalPhoneScreenshotWith3DDepth
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Screenshot as a 3D Card Stack

Your main product screenshot sits on top of a stack of secondary UI cards. The front card swoops up and over to the back at a configurable interval, autonomously cycling through every screen. Soft drop shadows, a cyan edge glow on the top card, cursor parallax tilt.

Screenshot in a 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.

Neon Glass Phone Stack

Several mobile screenshots float inside transparent neon phone frames, fanned out in a translucent stack. Outlines pulse left-to-right in a swipe-like wave and the whole stack bends gently with the cursor.

Black Glass Product Reveal

An almost-black canvas. A slow horizontal light sweeps left to right, revealing a glossy product screenshot inside a ceramic black-glass frame. Cinematic reveal for luxury SaaS, fintech, and premium B2B tools.

Vertical Video Feed Spiral

Vertical videos or mobile screenshots wrap around a slowly rotating 3D cylinder, climbing in their own upward-scrolling lanes. Front tiles read sharp and bright; back tiles dim and blur with depth. Tiles spawn offscreen below and despawn offscreen above with a soft edge fade. Hover a tile to pause and focus it.

Screenshot as Hologram Projection

Your screenshot projected from a small device as a translucent holographic panel floating in the air. Wide cyan projection cone, moving scanlines, subtle flicker, drifting dust. Built for AI, dev tools, cybersecurity, and futuristic SaaS.Live customizer

Vertical Phone Screenshot With 3D Depth

ScreenshotA vertical screenshot of your app. 9:19.5 (iPhone) crops cleanest.Screen brightness0.55How strongly the screen self-illuminates (emissive boost).Use GLB materialsKeep the authored PBR materials from the GLB (metallic finish, fine details). Turn off to fully override color, metalness, and roughness.Body tintMultiplicative tint applied over the GLB's body color. White = no tint. Try red, blue, gold for color variants.Phone size0.75Pointer rotation0.7How strongly the phone follows the cursor.App glow pulse0.1Subtle screen brightness pulse — reads as 'the app is alive'.Transparent backgroundHide the page background so the hero blends with the page.Background inner colorInner color of the radial gradient background.Background outer colorOuter color of the radial gradient background.Key lightFill lightBack lightStudio reflection1Heading fontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.