proNew136 lines · framer-motion

Capability Bars

Where it's strong, shown honestly, never a made-up number. A full-width feature section listing capability rows, each an animated bar that fills to a qualitative level (Fair, Good, Strong, Excellent) once scrolled into view, with the qualitative tag fading in beside the fill.

Use it for: An AI or SaaS product page that wants to communicate relative strengths across a few dimensions without inventing benchmark numbers.
Themes: Light + dark
License: Commercial use

Live

Capability

Where it's strong, shown honestly

A qualitative read on each capability, not a number pulled out of thin air.

Response qualityExcellent

Context handlingStrong

Tool useStrong

Consistency across runsGood

Cost efficiencyFair

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

/**
 * Full-width feature section: a short list of capability rows, each an animated bar
 * that fills to a qualitative level (never a number or percentage) once scrolled
 * into view, with a qualitative tag fading in beside the fill.
 */

export interface CapabilityItem {
  label: string;
  /** Qualitative fill level, not a number. */

The rest is in Pro.

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

Get Pro

How it behaves

→Each row's bar animates its width from 0 to a fixed fraction tied to a qualitative level (fair/good/strong/excellent) the first time it scrolls into view, staggered row by row.
→The qualitative tag beside each row fades in slightly after its bar starts filling, reinforcing the label instead of showing a percentage.
→speed scales both the stagger delay and the fill duration; glow adds a soft accent-coloured glow to the filled bars.
→items accepts any list of { label, level, note? } so the component works for any set of capabilities.
→prefers-reduced-motion renders every bar already filled with no animation.

Accessibility

✓Bars are plain divs with visible text labels beside them; no information is conveyed by colour or motion alone.
✓Heading is a real <h2>; qualitative tags are readable text, not icon-only.
✓Honours prefers-reduced-motion.