AI Stream Wrapper

The AIStreamWrapper component wraps standard React children and reveals them using a staggered, glowing "skeleton dissolve" effect — mimicking the experience of AI generating a user interface in real-time (like Vercel's v0 or Claude Artifacts).

It treats each direct child element as a discrete "block" and reveals them sequentially with:

1. Skeleton shimmer placeholders that glow before the content appears.
2. A scanning line that sweeps down the page as blocks are compiled.
3. Edge glow halos that pulse around each element as it materializes.
4. A status bar showing a typing indicator and a live progress counter.

Live Preview

[!TIP] Click the "Re-generate UI" button to replay the effect!

Installation

[!IMPORTANT] Block Granularity: The wrapper treats each direct child as one "block" to reveal. If you want finer-grained control (e.g., reveal each stat card separately), wrap each one in its own <div> at the top level of the wrapper's children.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { AiStreamWrapper } from "@/components/creative/ai-stream-wrapper";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AiStreamWrapper } from "@/components/creative/ai-stream-wrapper";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AiStreamWrapper
      >
        <div>Content goes here</div>
      </AiStreamWrapper>
    </div>
  );
}