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. Cold Page Load

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

    1 – 10 S

  2. Warm Cache Page Load

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

    100 MS – 1 S

  3. Route Navigation

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

    100 MS – 1 S

  4. Long List Pagination

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

    100 MS – 1 S

  5. Infinite Scroll

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

    100 MS – 1 S

  6. Multi-step Checkout

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

    1 – 10 S

Forms · 5 scenarios

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

  1. Form Submission

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

    1 – 10 S

  2. Search-as-you-type

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

    0–100 MS

  3. OAuth Flow

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

    1 – 10 S

  4. Chat Input

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

    0–100 MS

  5. Optimistic Actions

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

    0–100 MS

Content · 3 scenarios

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

  1. Image Gallery

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

    1 – 10 S

  2. Data Table Loading

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

    100 MS – 1 S

  3. Real-time Updates

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

    0–100 MS

Transfer · 3 scenarios

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

  1. Single File Upload

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

    1 – 10 S

  2. Batch File Upload

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

    10 S+

  3. Data Export Download

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

    10 S+

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

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

    0–100 MS

  2. Drag and Drop

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

    0–100 MS

AI · 5 scenarios

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

  1. Chat Streaming Response

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

    1 – 10 S

  2. Long Compute Inference

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

    10 S+

  3. Inline Completion

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

    100 MS – 1 S

  4. Tool Execution

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

    1 – 10 S

  5. Agentic Workflow

    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.

    10 S+