fragms
Studio

An AI cursor that works your interface for real. It glides, looks, clicks and types, and your app answers the way it would for a person.

Invoices

  • NNorthwindDue May 2€2,400
  • GGlobexDue May 9€860paid
  • IInitechDue May 14€1,250
  • UUmbrellaDue June 1€3,100open

Agent

Tag

Highlight

Speed1.00

NeedsReactFramer MotionTheme

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

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

import { Ghost } from "@/components/ghost";// Selectors point at elements inside the Ghostconst steps = [  { target: "#search", action: "type", text: "May", say: "Looking at May" },  { target: "#late", action: "click", say: "Only the late ones" },  { target: "#remind", action: "click", say: "Sending a reminder" },];<Ghost  steps={steps}  onRestart={reset}>  <Invoices /></Ghost>
steps

What it does, in order. Each step has a target and an action, and can say something and pause.

GhostStep[]Default required
action

What it does once it reaches the target. Clicks and typing reach the real element.

moveclicktypewait
target

A CSS selector inside the Ghost. Left out, it stays where it is.

stringDefault none
name

The name on its tag.

stringDefault Simmy
color

The colour of the cursor, the tag and the highlight.

#3d7bffany colour
speed

1 is a calm human pace. It never rushes past what a person can follow.

0.512
highlight

Outlines the element it is working on.

truefalse
onRestart

Runs before every loop, so your UI can go back to how it started.

() => voidDefault nothing

What's new

  1. 2.0
    • Takes the Theme's accent and pace
  2. 1.0
    • First release
BeforePointsNextTrail