fragms
Studio

Where an answer came from, without leaving it. A small chip follows each claim, and pointing at it opens a preview of the page. Every source gathers at the end, in a row that opens into a list.

How should a voice assistant show it is listening?

Show that it is listening the moment someone starts to speak, before a single word is understood. Feedback that starts at once reads as fast, even while the work goes on.

Let a glow follow the voice, so people see they are heard as they talk. Show the words as they arrive and let them firm up as the model grows more sure.

Never lean on the glow alone. Say it in words a screen reader can announce.

Chip

Preview opens

List

NeedsReactFramer MotionTheme

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

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

import { Cite, Sources } from "@/components/sources";const sources = [  {    url: "https://developer.apple.com/design/human-interface-guidelines/siri",    title: "Siri, Human Interface Guidelines",    snippet: "Respond the moment someone speaks.",  },];<p>  Show that it is listening the moment someone speaks.  <Cite source={sources[0]} /></p><Sources sources={sources} />
Cite source

The page behind a claim, with a url and a title, and optionally a snippet, a site name, an icon, a picture and a date. Give several and the preview pages through them.

SourceSource[]Default required
Cite look

The site's icon and name, or a small number.

sitenumber
Cite index

The number the number look shows.

numberDefault 1
Cite trigger

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

hoverclick
Cite images

Shows the page's picture at the top of the preview, when it has one.

truefalse
Sources sources

Every page behind the answer, in the order they are cited.

Source[]Default required
Sources max

How many icons show in the row.

numberDefault 4
Sources defaultOpen

Starts with the list open.

truefalse
Sources label

The word after the count.

stringDefault sources

What's new

  1. 2.0
    • Corners follow the Theme
    • Its preview stays dark on dark pages
  2. 1.1
    • First release
BeforeContextNextConfidence