Intelligence autofill // Joyce Jiang

Intelligence autofill communicates when a value is being generated by an LLM and preserves its provenance after the content arrives. In Ramp’s web platform, the treatment can appear on inputs whose value was supplied by intelligence, where a perimeter sweep communicates generation, a left-to-right reveal introduces the value, and a pointer-following hotspot identifies the completed value as intelligence-generated.

Hover the completed field to move the glow with your pointer. Editing the value returns the field to its normal input state.

This work was done in collaboration with Caroline Horn and Jon Howell.

Demo

intelligence-autofill

Preview

<main class="page-shell">
  <section class="demo-card" aria-label="Ramp intelligence autofill demo">
    <div class="eyebrow">
      <svg class="agent-mark" viewBox="0 0 16 16" aria-hidden="true">
        <circle cx="8" cy="8" r="1.5" />
        <circle cx="3" cy="5.08" r="1.5" />
        <circle cx="3" cy="10.92" r="1.5" />
        <circle cx="8" cy="13.8" r="1.5" />
        <circle cx="13" cy="10.92" r="1.5" />
        <circle cx="13" cy="5.08" r="1.5" />
        <circle cx="8" cy="2.2" r="1.5" />
      </svg>
      Ramp Intelligence
    </div>

    <div class="demo" data-phase="idle">
      <div class="intelligence-field">
        <label class="floating-label" for="memo">
          Memo<span class="required-resting" aria-hidden="true"> (required)</span><span class="required-floating" aria-hidden="true">*</span>
        </label>
        <input
          id="memo"
          name="memo"
          type="text"
          placeholder="e.g. Lunch meeting with marketing team"
          autocomplete="off"
          required
        />
      </div>
      
      <div class="button-row">
        <button class="autofill-button" type="button">
          <svg class="button-icon" viewBox="0 0 24 24" aria-hidden="true">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59"
            />
          </svg>
          <span class="button-label">Autofill with Intelligence</span>
        </button>
        <button class="reset-button" type="button">Reset</button>
      </div>
    </div>
  </section>
</main>

How it works

The effect is two masked gradient layers around the input: a one-pixel perimeter sweep and a blurred outer glow. While the suggestion is loading, both layers travel continuously from left to right. Once the value arrives, a single final wipe runs while the content is revealed with a matching clip-path animation. After that, hovering the field trades the traveling wipe for a radial glow positioned from your pointer coordinates.

Note

This is a standalone recreation of animation primitives from Ryu . It uses plain HTML, CSS, and JavaScript; it does not render Ryu input components or consume Ryu’s theme and state machinery.

What matches Ryu

Loading perimeter sweep, blurred glow, and one-time final wipe
Perimeter keyframe geometry, two-second loop, one-second final wipe, and linear timing
Light-theme gradient stops, opacities, mask, and blur radii
Left-to-right content reveal and its cubic-bezier easing
Pointer-position calculation and hover hotspot
Hover pause and opacity overrides
Reduced-motion outcome of no intelligence animation and fully visible text

What the sandbox changes

data-phase and a simulated timeout replace Ryu’s loading decorations, value classes, feature flag, and component state. The 2.2-second generation delay belongs only to this demo.
Input, floating label, and buttons are plain HTML rather than Ryu components. The sandbox also omits the Intelligence decoration that enables this treatment inside Ryu.
The example hardcodes a snapshot of Ryu’s current light-theme colors and uses square corners, so it does not respond to Ryu theme or token changes.
Animation rules stay attached across focus transitions so the sandbox’s simplified state machine cannot replay them on blur or mouseleave. Ryu gates animation eligibility through its component focus state instead.