Vibary.ai
Go Pro
← Vibe Coding

Streaming Code Block

Generated code arrives line by line while the panel grows downward to fit it.

aifuturisticminimalautomatic · finite · intermediate · ~1.6s
Variant

The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.

347 lines · react + motion only
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";

/**
 * Vibary · Streaming Code Block
 *
 * A generated snippet arriving line by line. The panel grows downward to
 * fit each new line, so the content already on screen never shifts and

About this pattern

The panel a model fills in while it writes code. Each line resolves in place with a hair of rise, and the block's height eases open by exactly one line as it lands — so everything above stays where the reader left it and the page never scrolls out from under them. A caret rides the newest line, the gutter numbers keep count, and the footer changes from generating to generated when the last line arrives. Nothing springs: a panel that overshoots its own height jolts every line already on screen.

Code generation replySnippet returned by an assistantTerminal output arrivingConfig file being written

Where it shows up

Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.

  • Summarise the supplier contract and flag anything unusual.
    The renewal runs another twelve months at the same rate, with one clause worth a second look.
    Ask a follow-up
    AI assistant

    Fenced code answers fill out downward while the reply stays anchored.

Related patterns