Skip to content
loopkit
pro123 lines · framer-motion

Eval Card

Is the new version better? One card. An evaluation score card: overall ring with a pass mark, per-metric bars with baseline ticks and deltas, and pass/fail.

Use it for
Release gates, eval dashboards, model or prompt comparisons.
Themes
Light + dark
License
Commercial use (draft)
Live

85

score

Support agent · eval

v4.12 vs v4.11

Pass · bar 80▲ 1.4 pts

172 of 200 cases passed

  • Task success86+5
  • Tool-call accuracy93−1
  • Groundedness78+8
  • Policy compliance99
  • Latency budget71−5

baseline pass bar on ring

tsx
"use client";

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

export interface EvalMetric {
  name: string;
  score: number; // 0..1
  baseline?: number; // 0..1
}

export interface EvalCardProps {
  title?: string;
  run?: string;
  metrics?: EvalMetric[];
  /** Overall pass mark, 0..1. */
  threshold?: number;
  cases?: { passed: number; total: number };
  className?: string;
}

The rest is in Pro.

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

Get Pro

How it behaves

  • →Ring fills to the average score on first view; a black tick on the ring marks the pass bar.
  • →Pass / Fail chip and the change versus baseline in points.
  • →Each metric bar animates in, staggered; an orange tick shows the baseline; deltas are green or red.

Accessibility

  • ✓Bars are role=meter with values.
  • ✓Pass/fail is text, not colour only.
  • ✓Honours prefers-reduced-motion.