Hero made by @ybouane.

@crazygl/hero-torn-poster

Layered torn posters build a premium campaign collage with depth, shadows, and a subtle peel-away motion.

Demo

Torn Poster Hero

Install

npm install @crazygl/hero-torn-poster

Usage

import TornPoster from '@crazygl/hero-torn-poster';

export default function Page() {
  return (
    <TornPoster
      heading={'Paste it\nup loud.'}
      hoverSpread={1.7}
      cameraParallax={1.15}
    />
  );
}

Customise

• Overall — overallOffsetX / overallOffsetY, overallScale, overallRotation (transform the whole set).
• Images — backgroundImage plus layer1Image…layer5Image (any JPG/PNG/WebP/AVIF; empty hides a layer), each with X / Y / Z (depth) / Scale.
• Motion — loadDelay (entrance stagger), hoverSpread, cameraParallax.
• Layout — contentAlign, paddingX / paddingY.

Best for

• Event and festival pages, fashion and music drops
• Design-studio and agency portfolios
• Editorial product launches where a layered system is the story

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.