proNew135 lines · framer-motion

Feature Compare Before / After

Drag the line, feel the difference. A before/after reveal slider showing an abstracted 'manual' panel on one side and an 'automated' panel on the other, dragged apart by a draggable divider built on a real range input for free accessibility.

Use it for: A single feature that is best explained as a contrast — manual vs. automated, cluttered vs. sorted — rather than a list of bullet points.
Themes: Light + dark
License: Commercial use

Live

Before & after

Drag to see what changes

Routed automatically

Manual triage

BeforeAfter

Before

Every ticket sat in one pile until someone had time to read it.

After

Tickets land pre-sorted by urgency, with the routine ones already answered.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface FeatureCompareBeforeAfterProps {
  eyebrow?: string;
  title?: string;
  beforeLabel?: string;
  afterLabel?: string;
  beforeCaption?: string;
  afterCaption?: string;
  /** Starting position of the divider, 0-100. */
  defaultPosition?: number;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→A full-size <input type="range"> sits invisibly over the whole frame and drives the visible divider position, so dragging works anywhere in the frame, not just on the handle.
→The 'before' panel is clipped to the divider's position with clip-path, revealing the 'after' panel underneath as the divider moves.
→The handle gently pulses to invite a drag on first view; the pulse stops under prefers-reduced-motion.

Accessibility

✓The divider is a native range input with a descriptive `aria-label`, so it's reachable and operable with the keyboard (arrow keys) and by screen readers out of the box.
✓Before/after labels are real text badges, not colour-only cues.
✓Honours prefers-reduced-motion.