CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/black-glass-reveal

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.

ReactWebGL3DImageInteractiveFont#three#3d#screenshot#reveal#black-glass#luxury#premium#fintech#saas#cinematic

Usage

import BlackGlassReveal from '@crazygl/hero-black-glass-reveal';

export default function Page() {
  return (
    <BlackGlassReveal
      screenshot="https://crazygl.com/samples/screenshot-dashboard-dark-2.avif"
      heading="A new standard."
      sweepPeriod={7}
    />
  );
}

Customise

  • Screenshot — screenshot media plus screenshotX/Y, screenshotScale, screenshotTilt, and screenEmissive (how bright the revealed display reads).
  • Frame — frameColor, frameMetalness, frameRoughness, frameClearcoat, frameThickness, frameDepth shape the ceramic black-glass bezel.
  • Sweep — sweepPeriod, sweepWidth, sweepIntensity, sweepColor, revealFloor control the light band and how visible the screen sits at rest.
  • Motion — parallaxStrength (pointer tilt) and floorReflection (dim mirrored floor).
  • Background — bgColor, transparentBackground.

Best for

  • Luxury SaaS launch pages and premium B2B tools
  • Fintech and trading dashboards
  • High-end product or device reveals
  • Any dark, cinematic landing where a single screenshot is the star
01 · Install the package

One command, zero config.

npm install @crazygl/hero-black-glass-reveal
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 BlackGlassProductReveal from '@crazygl/hero-black-glass-reveal';

export default function Landing() {
  return (
    <BlackGlassProductReveal />
  );
}
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 BlackGlassProductReveal from '@crazygl/hero-black-glass-reveal';

export default function Page() {
  return (
    <section>
      <BlackGlassProductReveal
        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

Product UI in Zero Gravity

Five product screens drift weightlessly in a dark space. The main screen sits in focus at the front; four secondary feature screens float at varying depths behind it, with soft shadows and depth fog selling the void.

Data Rain Product Reveal

Elegant colored data streams fall behind a central product screenshot in four refined tints, with a few drops drifting in front for parallax depth. Cyberpunk but refined.

Floating Dashboard With Light Beam Reveal

Your product dashboard, tilted in 3D space, scanned into existence by a soft blue-purple light beam. A glowing uplight underneath and a subtle floor reflection complete the look.

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.

Glass Typography

A headline cast in transparent optical glass: Three.js TextGeometry extruded into a real 3D object, rendered with MeshPhysicalMaterial (transmission, IOR, dispersion, clearcoat) so it visibly refracts the moving gradient behind it. Pointer parallax tilts the camera and CTA hover sweeps a bright edge highlight across the letters.

Product Inside a Glass Capsule

A product floats inside a transmissive glass capsule, like a luxury museum object or futuristic sample container — refraction through the shell, a frosted inner layer, a band of condensation, slow rotation and a soft pedestal glow.Live customizer

Black Glass Product Reveal

ScreenshotYour product screenshot. PNG / JPG / AVIF / WebP. Dark UIs read most cinematic; light UIs still work — they emerge as a bright slab of light from the dark frame.Screenshot X offset0worldScreenshot Y offset0worldScreenshot scale1Screenshot tilt-8°Pitch of the frame. Negative tilts the top toward the camera (luxury bezel feel).Screen emissive0.5How bright the screen reads once revealed. 0.4-0.7 is the sweet spot.Frame colorFrame metalness0.85Frame roughness0.18Frame clearcoat1Frame thickness0.045relBezel width relative to the screen.Frame depth0.04How far the frame extrudes from the screen plane.Sweep period7sTime for one left-to-right sweep cycle.Sweep width0.18Width of the moving light band (NDC fraction).Sweep intensity1.1Sweep colorReveal floor0.18Brightness of revealed (behind-sweep) areas relative to full reveal. 0 = full dark→light contrast, 0.6 = mostly visible at rest.Pointer parallax0.6Floor reflection0.18Strength of the dim reflective floor under the frame.Background colorTransparent backgroundHeading fontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.