Hero made by @ybouane.

@crazygl/hero-ice-surface

A glassy frozen pane fills the frame. Tap or drag to spread fresh cracks; old fractures slowly heal.

Demo

Ice Surface

Install

npm install @crazygl/hero-ice-surface

Usage

import IceSurface from '@crazygl/hero-ice-surface';

export default function Page() {
  return (
    <IceSurface
      iceColor="#cfe6f7"
      crackScale={12}
      healSpeed={1}
    />
  );
}

Customise

• Ice — iceColor, deepColor, crackColor, frostDensity, crackScale (number of crystal grains across the frame), healSpeed, spread (how far each strike fractures).
• Content — heading / subheading / two-columns / custom over the ice, plus headingFontFamily.
• Interaction — pointerdown anywhere fractures the pane; a seed cluster fires on mount so the hero never starts blank.

Best for

• Winter and seasonal campaign pages.
• Cold-chain, refrigeration, and frozen-food brands.
• Premium beverage / spirits launches and luxury reveals that want a tactile, touch-it-to-believe-it opening.

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.