fragms
Studio

How sure an answer is, right where it is said. A small mark follows the claim, and pointing at it tells you why, so people know what to trust and what to check.

When is the design review?

The design review is on Thursday at ten.

It will run for about an hour.

Maya will present the new onboarding.

Mark

Words beside it

Reason opens

NeedsReactFramer MotionTheme

Source
npm install framer-motion && curl --create-dirs -o src/components/confidence.tsx https://fragms.simonveprek.cz/source/confidence -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme

Saves src/components/confidence.tsx and theme.tsx beside it after installing what it needs. No setup, works in any React project.

import { Confidence } from "@/components/confidence";<p>  It will run for about an hour.  <Confidence    value={0.61}    reason={["The invite says 45 minutes", "The last three ran over"]}  /></p>
value

How sure, from 0 to 1.

numberDefault required
reason

Why it is that sure. A line, or a few. Shown on hover and tap.

stringstring[]Default none
look

Three bars, a dot that pulses while unsure, a ring that fills, or the level in words.

barsdotringword
label

Shows the level's word beside the mark.

truefalse
labels

The words for each level.

{ low, medium, high }Default Unsure, Fairly sure, Sure
thresholds

Where medium and high begin.

[number, number]Default [0.45, 0.75]
colors

Each level's colour. High follows the theme's accent when there is one.

{ low, medium, high }Default red, amber, green
percent

Shows the share as a number in the card.

truefalse
trigger

Opens the card on hover and focus, or only on a click. A tap always works.

hoverclick

What's new

  1. 2.0
    • First release. How sure an answer is, with the reason on hover
BeforeSources