An agent browsing the web, out in the open. Every page it opens joins a trail of site icons, and the one it is reading shows as a card. Once it is done, the trail folds into one line you can open again.
How should a voice assistant show it is listening?
Colour
Page card
When done
Pace
NeedsReactFramer MotionTheme
Sourcenpm install framer-motion && curl --create-dirs -o src/components/trail.tsx https://fragms.simonveprek.cz/source/trail -o src/components/theme.tsx https://fragms.simonveprek.cz/source/themeSaves src/components/trail.tsx and theme.tsx beside it after installing what it needs. No setup, works in any React project.
import { Trail } from "@/components/trail";<Trail // Every page the agent has opened so far, in order pages={visited} busy={browsing} color="#12b5b0"/>
pagesThe pages so far, in order, each with a url and optionally a title, a snippet, an icon and a site name. While busy, the last is the one being read.
TrailPage[]Default requiredbusyThe agent is still browsing. Off, the trail is done.
truefalsestatusThe words over the trail while it works. Left out, it says which site it reads.
stringDefault Reading the sitesummaryThe words once done.
stringDefault Read 6 pagespreviewA card for the page being read, with its title and a line of light passing over the text.
truefalsecollapseFolds into one line once done, which opens into the list of pages.
truefalsemaxHow many icons the trail shows before the rest become a count.
numberDefault 7colorThe ring round the page being read.
any colourDefault text colourWhat's new
- 2.0
- Takes the Theme's accent
- Square icons when the Theme's corners are square
- 1.1
- First release
- Reads each page a word at a time