CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/exhibition-poster

Exhibition Poster Hero

A single campaign image becomes a 3D museum poster with soft paper folds, a slow specular light sweep across the surface, and a film-grade animated grain. Slow camera drift and pointer parallax keep it breathing.

ReactWebGL3DImageInteractiveFont#poster#exhibition#editorial#museum#campaign#fashion#events#agencies

Usage

import ExhibitionPoster from '@crazygl/hero-exhibition-poster';

export default function Page() {
  return (
    <ExhibitionPoster
      posterImage="/your-campaign-image.jpg"
      posterTilt={-13}
      foldStrength={0.1}
      lightSweepStrength={0.55}
    />
  );
}

Customise

  • Poster — posterImage (any AVIF/WebP/JPG/PNG; the plane rebuilds to the image's native aspect), posterScale, posterTilt.
  • Paper folds — foldStrength, foldDensity, foldSpeed (0 freezes the folds).
  • Light sweep — lightSweepSpeed, lightSweepStrength (the moving gallery-spotlight highlight).
  • Grain — grainAmount (filmic noise; 0.015–0.03 is the sweet spot).
  • Camera — cameraDriftStrength, pointerParallax (±2° yaw / ±1.5° pitch on the poster).
  • Background — bgTop, bgBottom (gallery-wall gradient), transparentBackground.

Best for

  • Artist portfolios and exhibition / gallery sites.
  • Fashion drops, music releases, festival and event landing pages.
  • Design agencies and editorial brand campaigns — anywhere a single hero image carries the visual weight.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-exhibition-poster
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import ExhibitionPosterHero from '@crazygl/hero-exhibition-poster';

export default function Landing() {
  return (
    <ExhibitionPosterHero />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import ExhibitionPosterHero from '@crazygl/hero-exhibition-poster';

export default function Page() {
  return (
    <section>
      <ExhibitionPosterHero
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Torn Poster Hero

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

Glitch Hero Poster

A cyberpunk poster: any screenshot or photograph is overlaid with RGB channel splitting, horizontal slice glitches, soft CRT scanlines, and digital grain. The pointer ramps the chaos up — perfect for launch campaigns, agencies, gaming, and music.

Magazine Cover Product Hero

A product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth.

Kinetic Split Typography

A bold grotesk headline is split into horizontal slices that fly in from alternating sides, settle into alignment, and then parallax against the pointer at different depths.

Collage in Zero Gravity

Images, textures, and product screens float together in a controlled zero-gravity collage around the hero copy.

Sculpted Light Bust

A polished marble sculpture under studio lighting. The pointer orbits a single bright key light around the bust in real 3D, raking it across the stone face for hot specular highlights, cool subsurface shadows in the recesses, and a warm rim that tracks the cursor like a real museum spotlight.Live customizer

Exhibition Poster Hero

Poster imageThe campaign image rendered on the poster plane. Any AVIF / WebP / JPG / PNG — works best with strong typographic or photographic artwork.Poster scale1Overall scale of the poster. 0.9-1.1 is the photogenic range; 1.5 fills the frame edge-to-edge.Poster tilt-13°Forward/back tilt of the poster plane. Small negative tilts give a hung-on-the-wall look.Fold strength0.1Z-displacement amplitude. 0.02-0.06 reads as soft printed-paper warp; above 0.1 looks like crumpled paper.Fold density1.15How many folds appear across the surface. Below 0.7 reads as broad creases; above 1.6 starts looking noisy.Fold speed1×How fast the fold pattern travels across the poster. 0 freezes the folds; 1 is the natural settling speed; 2 doubles it.Sweep speed1.8×Speed of the specular highlight sweeping across the poster. 1.0 = a full pass every ~12 seconds. 0 freezes the sweep.Sweep strength0.55Brightness of the moving highlight. 0.4-0.7 reads as gallery spotlight; above 1 starts to look glossy.Grain amount0.02Animated film grain intensity. 0.015-0.03 is filmic; above 0.05 starts to feel noisy.Camera drift1Slow ambient camera drift, ±0.1 world units on a 25s period at 1.0. Set to 0 for a perfectly static poster.Pointer parallax1Strength of the pointer-driven poster tilt (±2° yaw / ±1.5° pitch at 1.0). 0 disables parallax.Transparent backgroundDrop the gallery-wall gradient so the poster floats over your existing page background.Wall topTop of the gallery wall gradient — warm dark cream baked deep.Wall bottomBottom of the gallery wall gradient — almost-black brown.Heading FontSubheading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.