# Ramp Stack reference observations

Source: https://ramp.com/stack, observed September 8, 2026. Browser frames captured with CDP timestamps; MP4s retain observed spacing and are encoded at 24fps. These are sampling-based recordings, not extracted source animation timelines.

Hero: three neutral board columns; center has greater contrast. A task lifts from its source queue, crosses the center, then settles into the destination. Ambient ivory/yellow sits behind the board, never as the main task-card fill. The sequence advances without clicking while the hero is visible. Heading computed weight 400, size 64px on observed desktop viewport.

Feature: clicking a process heading changes the expanded explanatory text and corresponding right-hand product scene. The demo progresses through its own internal steps. Backdrop remains behind a white product window. Feature heading computed weight 400, size 48px.

Interpretation applied to DualEntry: neutral product layers; lower-contrast sage/teal atmosphere instead of Ramp yellow; a short agent preparation sequence alongside the separate continuous splash loop; fixed form geometry and regular heading weights. Planned 5-second story and 160–220ms transitions are authored timings, not claimed measurements of Ramp source code.

## Implemented agent sequence

- 0ms: queued task and fixed skeletal journal-entry form.
- 800ms: journal agent assigned; task lifts 3px with a 200ms transition.
- 1700ms: entity and date appear as a group.
- 2800ms: two account rows and balanced $1,200 debit/credit amounts appear.
- 3800ms: memo appears.
- 5000ms: Ready for review; the draft stops before any approval or posting.

Visibility eligibility is half the stage, capped to half the viewport for tall phone layouts. Offscreen time and hidden-tab time do not advance the clock. Replay resets the state; finished demonstrations stay finished on re-entry. Capture and reduced-motion modes are static. No character-by-character typing or geometry shifts.

## Current background treatment

V4 replaces the generated plates with two actual images selected from the user's Cosmos collection. See [source credits](ASSETS.md). The files are unmodified WebP images. CSS supplies restrained 10–24px blur, oversized clipped edges, and luminosity blending over DualEntry teal. Only decorative pseudo-elements are filtered; product cards and text remain sharp. The new prepared section uses a single 180ms link-arrow hover response, disabled by capture and reduced-motion rules.

Reference recordings and the previous sampled agent recording remain in the task workspace. The current portable package includes fresh still captures, a mobile task-loop recording, and an agent-preparation recording. Agent timing and behavior are unchanged.

## Current splash loop

The glass imagery stays still at 2px blur. Three real cards share an overlay and move between measured slots. Six adjacent exchanges make a seamless 36-second cycle. Each six-second interval holds for 3.8 seconds, moves over 1.4 seconds with smooth acceleration and deceleration, then settles. No reset, caption, Replay button, syncing label, or placeholder text is shown.

Desktop movement uses a small 6px lift; phone movement uses vertical slots and a 6px sideways passing offset. Slots reserve the largest card height. Styles update only when a value changes. An icon-only pause/resume control is available. Offscreen and hidden-tab time do not advance the loop. Reduced motion and capture mode are static; changes to the preference take effect live.

## Family reference

Reference: https://family.co/, inspected September 8, 2026. The “Effortless onboarding. Masterful management.” group uses phone previews, with the active Drag and Drop preview visibly lifted and enlarged from about 209 × 428 to 230 × 471 CSS pixels. Moving the pointer over that preview started its video; the neighboring videos were paused. The page exposes short 100ms icon-color transitions. A local observation recording is stored in work/family-v6. These observations informed the treatment; DualEntry's timing and paths are independently authored.

Selector and progression controls retain short pointer feedback. Keyboard updates remain immediate. No image/background layer moves.

## Refactor contract

`src/scripts/main.js` initializes capture layout first, then each independent controller. Initializers return cleanup functions. Shared UI bindings cancel transient animations on reduced-motion changes and disposal. Agent Replay is an accessible icon in the form header; the external playback strip and explanatory form footer were removed. Phase announcements remain available to screen readers.