Ink and paper
ICAP’s output looks like a tutor’s notes in the margin of your page. You can always see which text you wrote and which text the agent wrote. Motion shows you who writes, where a thing goes and what changed. The plugin uses one colour, so your theme continues to work.
To compare the two styles, use the ICAP style switch above the demo.
Two voices on one page
Section titled “Two voices on one page”Your text and the agent’s text are in the same column, with the same fonts. They look different in a small number of ways:
- Your voice is the body text of the note. You type an answer on a writing line that has no border. The plugin keeps it as a plain paragraph.
- The agent’s voice is a little smaller, about 0.95 of the body size. It has a thin ink line in the left margin and a small label, such as
gloss · RAII.
There is no card, no background colour and no avatar. Question, answer, feedback and revision read from top to bottom as one passage. To know “what I wrote” from “what I was told” is the difference between constructive and passive work.
One ink
Section titled “One ink”The ink is the only colour that ICAP adds. It is a warm madder red, like a tutor’s pencil. In a dark theme it is lighter. The plugin uses the ink only for these things:
- the line in the margin,
- the dotted line below an explained term,
- the marks on choices,
- the marks for results.
All other colours and fonts come from your theme. Thus community themes continue to work.
ICAP style and theme style
Section titled “ICAP style and theme style”The setting Settings → ICAP Learning Agent → In your notes → ICAP style controls how the output looks:
- On: the ink is madder, and kept explanations and feedback have ICAP’s look.
- Off: the ink is the accent colour of your theme, and kept callouts look like your theme’s callouts.
The setting changes only the look. The Markdown in your notes is the same.
Results without red and green
Section titled “Results without red and green”Feedback marks are characters in the margin, not red and green colours: ✓ holds, ≈ partly, ? look again. A mistake is a thing to look at again, not a failure.
State is a sentence
Section titled “State is a sentence”A block ends with a short line of text, such as “reading what you wrote…” or “your turn — ⌘ ↵ to submit”. It does not use status badges. The line tells you what happens to your material. It does not name tools or models. A keyboard shortcut shows as keys for your platform: ⌘ ↵ on macOS, Ctrl ↵ on other systems.
While the agent works, the ink line draws down the margin again and again. There is no spinner and no glow. With reduced motion the line is dashed.
You choose an option the way you mark paper. The options are a list with letters. A single choice draws an ink ring around the letter. A multiple choice draws a tick.
Motion
Section titled “Motion”Each motion has a purpose:
- Ink before words. The ink line draws down the margin first. Then the label and the paragraphs come in below it. A result mark is stamped into the margin. While text streams in, finished paragraphs stay where they are. Only the end of the text changes.
- The page makes room. When a passage comes in, grows, folds or goes away, the text below moves smoothly. Nothing jumps. If a change starts during another change, it continues from the current height.
- Your marks are drawn by hand, and you can remove them. A ring or a tick draws itself. If you change your choice, the mark erases from where it is. When you submit, the chosen option keeps its ring and the other options become faint.
- Leaving goes back into the ink. When you dismiss an explanation, the words fade, the line goes back and the gap closes. When you keep it, the callout comes from the place where the explanation was. When you apply a change, the removed lines fold away and the added lines stay.
- The activity comes from its mark. The list rises out of the mark in the status bar and goes back into it. The tick of a finished task draws one time. The only motion that repeats is the working line.
The plugin marks the moments when it is your turn, each one time:
| Moment | What you see |
|---|---|
| A passage is finished | the ink line becomes wider one time, then thin again; the next actions come in |
| The agent gives you the turn | the question becomes wider one time, and the answer field rises after it |
| It happens outside the screen | an edge cue, such as “↓ your turn”, moves one time; select it to go there |
| Text goes into the note | a light colour covers the new text and fades in about 3 seconds |
The plugin moves the keyboard focus only when you are already at the block. If the block is outside the screen, you can be writing in another place. The plugin then does not move the focus or scroll. The edge cue shows you where to go.
Rules for motion
Section titled “Rules for motion”All parts of the plugin use the same motion settings, from the file src/ui/motion.ts:
| Name | Motion | Used for |
|---|---|---|
settle |
spring with no bounce, about 0.4 s | content that comes in, the page that makes room |
hand |
spring with a small bounce, about 0.34 s | your marks: rings, ticks, the result mark |
quick |
spring with no bounce, about 0.2 s | captions, presses, small changes |
leave |
spring with no bounce, about 0.26 s | items that go away, close or fold |
fade |
0.14 s | words that fade before the page closes |
These rules keep the page correct:
- Only a frame animates its height. All other parts animate only position, size and opacity (
transformandopacity). - Each animation ends at the natural state of the element. Thus the layout is correct if an animation stops early.
- An entrance plays one time for each item. If the editor draws the item again, or you reload Obsidian, the entrance does not play again.
- With reduced motion, only a fade of 140 ms stays. All movement goes directly to its end.