CrazyGLLogo Reflected in Water
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.
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.
One command, zero config.
npm install @crazygl/hero-logo-water-reflectionImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import LogoReflectedInWater from '@crazygl/hero-logo-water-reflection';
export default function Landing() {
return (
<LogoReflectedInWater />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import LogoReflectedInWater from '@crazygl/hero-logo-water-reflection';
export default function Page() {
return (
<section>
<LogoReflectedInWater
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
