Hero made by @ybouane.

@crazygl/hero-torn-layers

A background screenshot plus up to five overlay images, each placed on its own depth plane with X / Y / Z / scale controls. On load each layer slides in from depth with a staggered easeOutBack overshoot; hover spreads them further apart along Z.

Demo

Screenshot Torn Into Layers

Install

npm install @crazygl/hero-torn-layers

Usage

import HeroTornLayers from '@crazygl/hero-torn-layers';

export default function Hero() {
  return (
    <HeroTornLayers
      backgroundImage="/screenshots/dashboard.avif"
      layer1Image="/screenshots/phone-a.avif"
      layer1X={-0.4}
      layer1Z={0.2}
      hoverSpread={1.5}
      cameraParallax={0.6}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom) plus heading, subheading, column1 / column2, or content.
• Overall — overallOffsetX / overallOffsetY, overallScale, overallRotation transform the entire set.
• Background image — backgroundImage full-frame plane behind everything.
• Layer 1–5 — each has layerNImage, layerNX, layerNY, layerNZ (depth), layerNScale. Empty image hides the layer.
• Motion — loadDelay (entrance stagger), hoverSpread (Z push on hover), cameraParallax (pointer-driven camera offset).
• Layout — contentAlign, heroHeight, paddingX / paddingY.

Best for

• Product page hero compositions where a UI screenshot, modal cutout and phone mockup need to feel like they live in real 3D.
• SaaS / design-tool / dashboard launches where the layered system is the product.
• Agency and portfolio showcases that want a tactile depth-stack out of the box.

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.