A streaming image surface with live progress, a playable Snake diversion, and an in-place completed result.
import { useEffect, useState } from 'react'
import ImageGenerationLoader from '@/components/ui/image-generation-loader'
const generatedGreenhouse = 'https://cdn.21st.dev/assets/mirror/cc/ccae650adaa02501cbd0191a666a6b7a0d8838f3b6bf68f2e62fd069f423ab0f.jpg'
const prompt = 'A small glass greenhouse reflecting the last light of sunset'
export default function Demo() {
const [generation, setGeneration] = useState(0)
const [progress, setProgress] = useState(0)
const isComplete = progress >= 100
useEffect(() => {
new Image().src = generatedGreenhouse
}, [])
useEffect(() => {
const timer = isComplete
? window.setTimeout(restartGeneration, 5000)
: window.setTimeout(
() => setProgress((current) => Math.min(current + 1 + Math.round(Math.random() * 2), 100)),
progress < 80 ? 90 : 180,
)
return () => window.clearTimeout(timer)
}, [generation, isComplete, progress])
function restartGeneration() {
setProgress(0)
setGeneration((current) => current + 1)
}
return (
<div className="flex w-full max-w-sm flex-col gap-3">
<p className="ml-auto max-w-[85%] rounded-[16px] rounded-br-md bg-muted px-3.5 py-2 text-sm text-muted-foreground">
{prompt}
</p>
<ImageGenerationLoader
alt="A glass greenhouse reflecting the sunset"
className="max-w-80"
imageUrl={generatedGreenhouse}
key={generation}
onEdit={restartGeneration}
onShare={() => void navigator.clipboard.writeText(window.location.href)}
progress={progress}
prompt={prompt}
status={isComplete ? 'complete' : 'generating'}
/>
<p className="text-xs text-muted-foreground">
{isComplete ? 'Generated in 5.4s · 1024 × 1024' : 'Generating image…'}
</p>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.