proNew123 lines · framer-motion

Feature Checklist Split

Click a line, watch the panel answer it. A split features section: a checklist of guarantees on one side, and a stat panel on the other that cross-fades to the matching number and mini chart the moment a checklist line is clicked.

Use it for: A trust-building section for things that are genuinely measurable (logging, spend caps, exportability) where a single stat per claim is more convincing than another paragraph of description.
Themes: Light + dark
License: Commercial use

Live

What you get

Built so nothing surprises you later

Every call is logged

100%

calls traced

tsx

"use client";

import * as React from "react";
import { AnimatePresence, 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 ChecklistItem {
  title: string;
  description: string;
  stat: string;
  statLabel: string;
}

export interface FeatureChecklistSplitProps {
  eyebrow?: string;

The rest is in Pro.

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

Get Pro

How it behaves

→Checklist items are buttons; clicking one sets it active and swaps the panel's headline stat, label and mini bar chart with a cross-fade.
→Checklist items spring in from the left with a stagger on mount, so the section reads cleanly with no scrolling required.
→The active checklist item gets a filled check mark and a raised background; inactive ones stay outlined.
→The panel's bar chart animates continuously; it and the entrance stagger are skipped under prefers-reduced-motion.

Accessibility

✓Each checklist row is a real button with `aria-pressed` reflecting whether its stat is currently shown.
✓The stat panel is `aria-live="polite"` is avoided on the heavy content; only the checklist drives focus, keeping announcements calm.
✓The bars in the mini chart are `aria-hidden`; the number and label next to them carry the actual meaning.
✓Honours prefers-reduced-motion.