feelsfast.fyi

24 scenarios · 6 categories

Scenarios

Nav & loading · 6 scenarios

Page transitions, route changes, and progressive content reveal. The user is moving through the app and waiting for the next view to arrive.

  1. Page load (cold)

    1 – 10 S

    First arrival on the site, no cache. Skeleton-driven layout while the server-rendered content streams in.

  2. Page load (warm cache)

    100 MS – 1 S

    Returning user, assets cached. View Transitions for the fade between the previous page and the new one.

  3. Route navigation

    100 MS – 1 S

    User clicks a link. Route is prefetched on hover; transition is optimistic; fallback skeleton if the network slips.

  4. Long list / pagination

    100 MS – 1 S

    User scrolls or paginates through a long list. Skeleton rows for the next page; predictive preload as the user approaches the boundary.

  5. Infinite scroll

    100 MS – 1 S

    Continuous content stream as the user scrolls. Predictive load before the bottom; layout stability during reflows.

  6. Multi-step wizard / checkout

    1 – 10 S

    Linear multi-step flow. Predictive preload of the next step while the user fills the current one; optimistic redirect on submit.

Forms · 5 scenarios

Typing, clicking, submitting. The first 100 ms of intent and the round-trip after the submit.

  1. Form submission

    1 – 10 S

    User submits a form. Pre-action feedback within 50 ms; optimistic UI for ≤ 1 % rejection rate; determinate progress otherwise.

  2. Search as you type

    0–100 MS

    User types into a search box. Input always responsive; results dim during stale state; cancellation on every keystroke. (Live demo on /playground.)

  3. Auth / OAuth flow

    1 – 10 S

    Sign-in or third-party OAuth handshake. Pre-action feedback on the button, optimistic post-auth redirect, determinate progress for the round-trip.

  4. Chat input (typing-time feedback)

    0–100 MS

    User types into a chat composer. Input always responsive; cursor handling; optimistic message render.

  5. Optimistic actions (like, save, undo)

    0–100 MS

    Single-tap action with low rejection rate. Render success immediately; reconcile in the background; honest visible failure path.

Content · 3 scenarios

Tabular data, image grids, and live streams. The user is reading, not navigating.

  1. Image gallery

    1 – 10 S

    Grid of images loading at varying rates. LQIP / blur-up for each image; predictive preload of likely next-clicks.

  2. Data table loading

    100 MS – 1 S

    Sort, filter, paginate a table. Skeleton rows that match column widths; SWR for repeat queries.

  3. Real-time updates / live data

    0–100 MS

    WebSocket / SSE-driven live updates. Animation timing for state changes; SWR fallback if the socket drops.

Transfer · 3 scenarios

Bytes moving between client and server, long enough that progress matters.

  1. File upload (single)

    1 – 10 S

    Single file upload. Determinate progress with backwards-decelerating animation; optimistic UI for the metadata while bytes transfer.

  2. File upload (batch)

    10 S+

    Multi-file upload with parallel transfers. Per-file determinate progress; aggregate progress at the top; engagement cue past 10 s.

  3. Data export / download generation

    10 S+

    Server generates a download (CSV, PDF). Engagement during the wait; notification on completion; option to receive via email if very long.

Manipulation · 2 scenarios

Pan, zoom, drag, drop. The user is operating the interface in real time — latency is felt directly in the hand.

  1. Map interactions

    0–100 MS

    Pan, zoom, query a map. Direct-manipulation latency budget; adaptive tile loading; dedicated touch handling.

  2. Drag and drop

    0–100 MS

    Reorder, dock, drop. Touch-input latency under 33 ms; pre-action feedback on grab; optimistic placement.

AI · 5 scenarios

Streaming responses, agentic workflows, inline completion. Perception techniques tuned for the AI wait pattern.

  1. Chat / streaming response

    1 – 10 S

    AI streams tokens after a brief thinking state. Pace tokens to a natural reading rhythm; cancellation on every keystroke. (Live demo on /playground.)

  2. Long compute / Inference

    10 S+

    Long-running AI inference (image generation, complex analysis). Engagement, progress where measurable, tool-call transparency where applicable.

  3. Inline completion / suggestion

    100 MS – 1 S

    Cursor / Copilot / v0 territory — typing-time inference. Debounced query, abort on next keystroke, optimistic accept on Tab.

  4. Tool execution / agentic step

    1 – 10 S

    Agent visibly does something (reads a file, runs a query, edits code). Tool-call transparency is the perception trick.

  5. Agentic workflow

    10 S+

    Multi-step agent that may run for minutes. The user can watch the trajectory; cancellation always available; determinate progress where the agent can estimate it.