proNew195 lines · framer-motion

Tabbed Feature Showcase

A tab list that plays itself, until you touch it. A feature showcase with a vertical tab list and a detail panel that cross-fades between features; tabs auto-advance on a timer with a progress rail, and pause the moment a reader hovers or clicks.

Use it for: Showcasing 3 or 4 meaningfully different capabilities side by side, where you want it to feel alive on first load without forcing a click.
Themes: Light + dark
License: Commercial use

Live

Features

One platform, every moving part

Live sync

Every client, same state, instantly

Changes propagate over a persistent connection, so two people never see two different truths.

Sub-100ms propagation
Automatic conflict resolution
Offline queue with replay

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 ShowcaseFeature {
  key: string;
  label: string;
  title: string;
  description: string;
  bullets?: string[];
  accent?: "signal" | "ok" | "info" | "warn";
}

The rest is in Pro.

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

Get Pro

How it behaves

→Autoplay steps through features on an interval and shows a thin progress rail under the active tab while it runs.
→Hovering the tab list, clicking a tab, or using the arrow keys pauses or overrides autoplay immediately.
→The detail panel cross-fades and slides slightly on feature change; prefers-reduced-motion disables autoplay and the transition.
→Tabs are a real role="tablist"/role="tab" group with roving tabIndex and left/right arrow-key navigation.

Accessibility

✓Full ARIA tabs pattern: `role="tablist"`, `role="tab"`, `aria-selected`, `role="tabpanel"`, `aria-controls`.
✓Only the active tab is in the tab order (`tabIndex=0`); arrow keys move focus and selection together.
✓Autoplay stops under prefers-reduced-motion and the moment a user interacts, so nothing moves content out from under a reader.
✓Honours prefers-reduced-motion.