proNew177 lines · framer-motion

Model Switcher

Different jobs, different strengths, one segmented switch. A full-width feature section with a custom segmented control for switching between model profiles; the panel beside it cross-fades to that profile's blurb and qualitative trait bars. No native <select>.

Use it for: An AI product page that offers more than one model or mode and wants visitors to feel the trade-offs instead of reading a comparison table.
Themes: Light + dark
License: Commercial use

Live

Pick a model

Different jobs, different strengths

Switch between profiles and watch the trade-offs move.

Tuned for speed. The one you reach for when the answer needs to land before the next click.

Speed

Depth

Efficiency

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;
}

/**
 * Full-width feature section with a segmented switch between a few fictional model
 * profiles; the panel beside it cross-fades to that model's blurb and qualitative
 * capability bars. No native <select>, just a custom segmented control.
 */

export interface ModelProfile {
  id: string;
  name: string;

The rest is in Pro.

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

Get Pro

How it behaves

→A radiogroup of pill buttons tracks the active model with a spring-animated sliding background, matching the design system's segmented-control pattern.
→Switching models cross-fades the blurb and animates each trait bar to its new width; AnimatePresence handles the exit/enter so nothing jumps.
→autoPlay, when on, cycles through models on a timer so the section demonstrates itself; any click immediately takes over.
→models accepts any list of { id, name, blurb, traits } so the same switcher works for any set of profiles, plans or modes.
→prefers-reduced-motion disables the autoplay timer and the sliding/cross-fade animations, snapping straight to the selected state.

Accessibility

✓The switch is a real `role="radiogroup"` of `role="radio"` buttons with `aria-checked`, fully keyboard and screen-reader operable — no native `<select>`.
✓Trait values are shown as both a bar and a text label; colour is never the only signal.
✓Honours prefers-reduced-motion.