Feel · interactions built on physics

Install

What you install is one folder: the skill, its runtime (one script, one stylesheet and the rig) and four example components. There is no npm install, and Node is only needed for the audit. Or clone it:

How to use it

• Restart your agent after installing, then type the command with the interaction you want and how it should feel.
• You don't need the command. Ask for something that should feel heavy, snappy, magnetic or thrown and the skill is picked up on its own.
• Out comes the component and a rig like the ones above. The rig exports the same spring to Framer Motion, react-spring, SwiftUI, Compose or CSS.

How it works

1. 01Words to physics. Feel.words("heavy, snappy") returns a mass, a natural frequency and a damping ratio, and from them stiffness and damping.
2. 02Choose the model. A spring to a target, magnets that catch a coasting body, walls that stop the overshoot, on a line, in a plane or around a dial.
3. 03Build on a body. A tap moves the target. A drag pulls through a hand spring, so heavy things lag. A release keeps the real velocity, and the decision comes from where it would coast.
4. 04Measure it. The rig draws the path the model predicted, walls and fields included, under what the component did. Switch it to CSS keyframes and each release is baked from the same model and played by the browser.
5. 05Audit. node scripts/audit.mjs fails on any hand-picked duration, easing curve or timer that moves things.

Keys

Tab

Focus a figure, its component or a control in its margin

Space

Toggle the switch

1–4

Send the drawer to a stop, or the card to a corner

[]

Step the knob one detent

←→↑↓

Step the focused component

F

Flick it