CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/before-after-slider

Cinematic Before / After Slider

Two images or videos blended in 3D across a glowing, draggable glass divider. The split refracts the scene with a chromatic edge, the whole plane tilts on pointer parallax, and corner labels call out before and after — a transformation showcase for AI enhancement, photo and video editing, design tools, and beauty tech.

ReactWebGLImageInteractiveFont#before-after#comparison#glass#refraction#slider#transformation#premium

Usage

import BeforeAfterSlider from '@crazygl/hero-before-after-slider';

export default function Hero() {
  return (
    <BeforeAfterSlider
      beforeMedia="https://example.com/raw.jpg"
      afterMedia="https://example.com/enhanced.jpg"
      splitPosition={0.5}
      glowColor="#bfe3ff"
    />
  );
}

Customise

  • Media — beforeMedia / afterMedia (photo or video, AVIF/WebP/PNG/JPG/MP4/WebM, cover-fitted), plus beforeLabel / afterLabel / showLabels corner tags.
  • Divider — splitPosition (rest position 0.1–0.9), splitAngle (−30°–30° tilt), refractionStrength, chromaStrength, and handleStyle (arrows / dot / line).
  • Glow & light — glowColor, glowIntensity, parallaxStrength (pointer shear), backgroundTone.
  • Content — heading / two-columns / custom slot with optional headingFontFamily.

Best for

  • AI photo / video enhancement tools showing a clear transformation.
  • Image and video editors, retouching and design apps.
  • Beauty-tech and skincare brands (before/after results).
  • Any product launch whose story is a side-by-side comparison.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-before-after-slider
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 CinematicBeforeAfterSlider from '@crazygl/hero-before-after-slider';

export default function Landing() {
  return (
    <CinematicBeforeAfterSlider />
  );
}
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 CinematicBeforeAfterSlider from '@crazygl/hero-before-after-slider';

export default function Page() {
  return (
    <section>
      <CinematicBeforeAfterSlider
        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

Rain on Glass

Looking through a glass pane in the rain — droplets refract the background, slide down with gravity, and leave thin trails.

Glass Cube Maze

Raymarched lattice of transparent glass cubes drifting in 3D space. The cursor orbits the camera, and chromatic dispersion paints rainbow rims along the hits.

Typography Through Rainy Glass

A large bright headline sits behind a fogged glass pane covered in sliding water droplets. The drops refract the type; the cursor wipes a clear arc as you move.

Particle Slider

A cinematic auto-playing slider built on one shared particle engine. Each slide picks a visualization — magnetic sphere, spiral galaxy, liquid wave field, vortex portal, image-to-particle, particle text, neural cloud, cube lattice, orbital rings, terrain — and the thousands of particles MORPH from one formation into the next instead of resetting. The field reacts to the pointer (repel / attract / magnetic). Per-slide heading, subheading, CTA, text transition and layout. Dark, premium, developer-grade.

Glass Typography

A headline cast in transparent optical glass: Three.js TextGeometry extruded into a real 3D object, rendered with MeshPhysicalMaterial (transmission, IOR, dispersion, clearcoat) so it visibly refracts the moving gradient behind it. Pointer parallax tilts the camera and CTA hover sweeps a bright edge highlight across the letters.

Glass Panels

Liquid-glass panels in WebGL — half-sphere bevel, biconvex refraction (entry + exit + thickness), edge-weighted blur mix, multi-light Blinn-Phong specular, Fresnel rim, drop shadow. Drop in any background image and it gets bent through the glass.Live customizer

Cinematic Before / After Slider

Before mediaThe 'before' side. Any photo or video (AVIF / WebP / PNG / JPG / MP4 / WebM). Cover-fitted so it never stretches.After mediaThe 'after' side. Any photo or video. Pick a richer / enhanced-looking asset so the transformation reads.Before labelCorner tag on the before side. Empty hides it.After labelCorner tag on the after side. Empty hides it.Show labelsSplit position0.5Resting position of the divider, 0 = far left, 1 = far right. In pointer mode the pointer drives it; this is the default and the reduced-motion rest point.Split angle0°Tilt of the divider. 0 = vertical; positive leans the top to the right for a diagonal split.Edge refraction1How hard the glass divider bends the scene through it. 1.0 is a believable glass plane; above 1.8 reads hyper-glass.Chromatic edge1.1Per-channel dispersion at the divider — the prism rim. Around 1.0 is photoreal; higher gives a dichroic edge.Handle styleThe handle affordance riding the divider.Glow colorColour of the light bleeding off the glass divider.Glow intensity1.1Brightness of the divider glow. 0.8-1.2 reads as lit glass; above 2 blooms heavily.Parallax tilt0How much the whole plane shears in 3D as the pointer moves. 0 freezes it flat.Background toneThe deep tone behind the plane, visible at the edges and through the vignette.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.