Comparison Slider

Interactive before/after media comparison slider with sub-pixel clip-path polygon slicing and WAI-ARIA keyboard navigation.

CLI Installation

React

$pnpm dlxexhumaaddcomparison-slider--flavor=react

// 01Workbench

Interactive Specification & Studio

cards

Preset:

Viewport

Fluid 100%

EXHUMA KINETIC

120Hz ProMotion

Compositor accelerated

STATIC CANVAS

Traditional View

Unaccelerated layout

Parameters

3 Props

defaultPosition

step

orientation

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

ComparisonDemo.tsx

React (.tsx)

import React from 'react';
import { ComparisonSlider } from '@/components/ui/ComparisonSlider';

export default function ComparisonDemo() {
  return (
    <div className="flex min-h-screen items-center justify-center p-8 bg-background">
      <div className="w-full max-w-2xl">
        <ComparisonSlider
          aspectRatio="16/10"
          defaultPosition={0.5}
          step={0.05}
          orientation="horizontal"
          before={
            <div className="flex size-full flex-col justify-between bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-900 p-8 text-white">
              <span className="font-mono text-xs font-bold uppercase tracking-wider text-purple-300">
                Legacy Pipeline
              </span>
              <div>
                <h4 className="text-2xl font-bold">Unaccelerated Canvas</h4>
                <p className="mt-1 text-sm text-purple-200/70">Standard 60Hz DOM repainting</p>
              </div>
            </div>
          }
          after={
            <div className="flex size-full flex-col justify-between bg-gradient-to-br from-emerald-950 via-teal-950 to-slate-900 p-8 text-white">
              <span className="font-mono text-xs font-bold uppercase tracking-wider text-emerald-400">
                Exhuma Kinetic Engine
              </span>
              <div>
                <h4 className="text-2xl font-bold">120Hz ProMotion</h4>
                <p className="mt-1 text-sm text-emerald-200/70">Sub-pixel polygon GPU clipping</p>
              </div>
            </div>
          }
        />
      </div>
    </div>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Comparison Slider. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
defaultPosition	number	0.5	Initial divider split ratio between 0 and 1.
step	number	0.05	Position delta when stepping with arrow keys.
orientation	select	horizontal	Slider split direction (horizontal or vertical).

defaultPosition

number

Initial divider split ratio between 0 and 1.

Default:0.5

step

number

Position delta when stepping with arrow keys.

Default:0.05

orientation

select

Slider split direction (horizontal or vertical).

Default:horizontal

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

ComparisonSlider.tsx

import * as React from 'react';
import * as ComparisonSliderPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface ComparisonSliderProps extends React.ComponentPropsWithoutRef<typeof ComparisonSliderPrimitive.ComparisonSlider> {
  className?: string;
}

export const ComparisonSlider = React.forwardRef<HTMLDivElement, ComparisonSliderProps>(
  ({ className, children, ...props }, ref) => (
    <ComparisonSliderPrimitive.ComparisonSlider
      ref={ref}
      className={clsx(
        'relative overflow-hidden rounded-2xl border border-border select-none w-full max-w-2xl mx-auto',
        className
      )}
      {...props}
    >
      {children}
    </ComparisonSliderPrimitive.ComparisonSlider>
  )
);
ComparisonSlider.displayName = 'ComparisonSlider';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { ComparisonSlider } from '@/components/ui/ComparisonSlider'; export default function ComparisonDemo() { return ( <div className="flex min-h-screen items-center justify-center p-8 bg-background"> <div className="w-full max-w-2xl"> <ComparisonSlider aspectRatio="16/10" defaultPosition={0.5} step={0.05} orientation="horizontal" before={ <div className="flex size-full flex-col justify-between bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-900 p-8 text-white"> <span className="font-mono text-xs font-bold uppercase tracking-wider text-purple-300"> Legacy Pipeline </span> <div> <h4 className="text-2xl font-bold">Unaccelerated Canvas</h4> <p className="mt-1 text-sm text-purple-200/70">Standard 60Hz DOM repainting</p> </div> </div> } after={ <div className="flex size-full flex-col justify-between bg-gradient-to-br from-emerald-950 via-teal-950 to-slate-900 p-8 text-white"> <span className="font-mono text-xs font-bold uppercase tracking-wider text-emerald-400"> Exhuma Kinetic Engine </span> <div> <h4 className="text-2xl font-bold">120Hz ProMotion</h4> <p className="mt-1 text-sm text-emerald-200/70">Sub-pixel polygon GPU clipping</p> </div> </div> } /> </div> </div> ); }

Prop

Type

Default

Description

defaultPosition

number

0.5

Initial divider split ratio between 0 and 1.

step

number

0.05

Position delta when stepping with arrow keys.

orientation

select

horizontal

Slider split direction (horizontal or vertical).

import * as React from 'react'; import * as ComparisonSliderPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface ComparisonSliderProps extends React.ComponentPropsWithoutRef<typeof ComparisonSliderPrimitive.ComparisonSlider> { className?: string; } export const ComparisonSlider = React.forwardRef<HTMLDivElement, ComparisonSliderProps>( ({ className, children, ...props }, ref) => ( <ComparisonSliderPrimitive.ComparisonSlider ref={ref} className={clsx( 'relative overflow-hidden rounded-2xl border border-border select-none w-full max-w-2xl mx-auto', className )} {...props} > {children} </ComparisonSliderPrimitive.ComparisonSlider> ) ); ComparisonSlider.displayName = 'ComparisonSlider';