Hero made by @ybouane.

@crazygl/hero-screenshot-chrome-waves

A product screenshot floats above a slow liquid-chrome ocean. Stacked Gerstner waves stretch its reflection across the surface while specular highlights migrate with the crests; pointer movement emits single-wavefront wake rings that distort the mirror in real time.

Demo

Screenshot Reflected in Chrome Waves

Install

npm install @crazygl/hero-screenshot-chrome-waves

Usage

import ScreenshotChromeWaves from '@crazygl/hero-screenshot-chrome-waves';

export default function Page() {
  return (
    <ScreenshotChromeWaves
      screenshot="/my-app-screenshot.png"
      lightWarmth={0.6}
      chromeTint="#c8cad0"
    />
  );
}

The image's native aspect is preserved (no squashing) — dashboards, mobile mockups, and AI canvases all work.

Customise

• Screenshot — screenshot (URL), screenshotTilt, screenshotX / screenshotY, screenshotHeight, screenshotBob, screenshotGlow (under-glow bloom).
• Chrome — chromeTint (F0 colour), waveAmplitude, waveSpeed, chromeRoughness (mirror → brushed), pointerWake.
• Light — lightWarmth (0 cool cleanroom → 1 golden sunset), driving the studio HDRI and the key light.

Best for

• Luxury SaaS landing pages and design platforms that want a premium feel.
• AI tools and fintech dashboards presenting a hero product shot with gravitas.
• Product-launch and pricing pages where a single screenshot must carry the page.

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.