Hero made by @ybouane.

@crazygl/hero-breathing-landscape

A product screenshot floats above an abstract gradient terrain that slowly breathes through stacked low-frequency FBM noise. Warm peach peaks fade into soft sage valleys; motes drift up; the camera pans across a 30-second loop with a hint of bob.

Demo

Breathing Gradient Landscape

Install

npm install @crazygl/hero-breathing-landscape

Usage

import BreathingLandscape from '@crazygl/hero-breathing-landscape';

export default function Page() {
  return (
    <BreathingLandscape
      heading="Calm by design."
      screenshot="https://crazygl.com/samples/screenshot-dashboard-light.avif"
      breathingPeriod={15}
      terrainHueWarm="#f4b78e"
      terrainHueCool="#9ab089"
    />
  );
}

Customise

• Content — heading / subheading, or switch contentType to two-columns / custom node.
• Screenshot — screenshot (PNG/JPG/WebP/AVIF; aspect read from the image), screenshotScale, screenshotX, screenshotY, screenshotTilt.
• Landscape — breathingPeriod, breathingAmplitude, terrainDensity, terrainHueWarm peaks, terrainHueCool valleys, hazeStrength.
• Sky — skyTop, skyBottom, transparentBackground.
• Motion — particleCount motes, cameraDriftStrength, pointerParallax.

Best for

• Wellness, mindfulness, and mental-health apps
• Calm-tech and personal-finance dashboards
• Health and habit-tracking products
• Meditative or slow-design brand pages

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.