Hero made by @ybouane.

@crazygl/hero-logo-water-reflection

A glowing brand mark floats above a real 3D water plane. Perspective foreshortening, fog-attenuated distant reflection, and Schlick Fresnel sell the scene as photographic. Stacked Gerstner waves drive the surface; pointer wake rings and a continuous finger-press depression carve into the mirror.

Demo

Logo Reflected in Water

Install

npm install @crazygl/hero-logo-water-reflection

Usage

import LogoWaterReflection from '@crazygl/hero-logo-water-reflection';

export default function Page() {
  return (
    <LogoWaterReflection
      logoImage="/brand/logo.svg"
      heading="Mirror still."
      sunElevation={6}
      sunColor="#ff7a3b"
    />
  );
}

Customise

• Logo — logoImage (SVG/PNG extruded, or GLB/GLTF model), logoScale, logoY, logoDepth, logoBevel, logoMetalness, logoRoughness, logoRotationSpeed, logoTint, logoGlow, useGlbMaterials.
• Scene — waterColor, skyColor, sunColor, horizonColor, sunAzimuth/sunElevation/sunStrength, mountainStrength, atmosphericHaze, waveScale/waveAmplitude/waveSpeed, rippleStrength, reflectionStrength.
• Camera — cameraHeight, cameraDistance, cameraTilt, parallaxAzimuth, parallaxElevation.

Best for

• Premium SaaS and product launch pages.
• Luxury brand, watch, and jewellery sites.
• Travel, hospitality, spirits, music, and film campaigns.

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.