Building blocks
ProAn animated "AI is building your app" visual where rounded blocks for a nav bar, cards, a chart, an avatar row and a button snap into a tiny app layout with no bounce. They land as tinted placeholders, fill with real looking content and pick up the accent in a styling pass, while the label steps from Laying out to Ready.
Live · keyboard ready
Laying out. Simulated build, nothing was generated.
- A generative UI product (v0, Lovable or Bolt style) needs a loading state that shows an app being assembled.
- An assistant reply that will return a UI or a page, while the code or layout streams in.
- An empty state or onboarding step that explains an AI builder at a glance.
- Plain text answers: use text-shimmer or a thinking label instead.
- Image generation: use image-generation, which reveals an image.
- Real progress with known steps and logs: use agent-status or agent-plan so people can see what actually happens.
- Content placeholders that mirror the real layout of a page: use skeleton.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { BuildingBlocks } from "@/components/arc/building-blocks/building-blocks"; export function AppPreview({ generating, onRegenerate }: { generating: boolean; onRegenerate: () => void }) { return <BuildingBlocks status={generating ? "building" : "done"} onReplay={onRegenerate} labels={{ ready: "Your CRM is ready" }} />;}BuildingBlocks
An animated "AI is building your app" visual. Blocks for a nav bar, a hero card, a chart, an avatar row, a settings row and a button fly in and snap into a small app layout, land as tinted placeholders, fill with real looking content and pick up the tint in a styling pass, while the label steps through Laying out, Adding components, Styling and Ready. With no props it loops a simulated build.
PropTypeDefaultDescription
status"idle" | "building" | "done"–Idle clears the frame to dashed slots. Building runs the phases over duration (and re-assembles while loop is on). Done fast forwards the remaining phases and settles on Ready. Leave it out to play the built in simulated build.durationnumber4800Milliseconds for one build, from the first block to the end of styling, split evenly over the three phases. Never less than 2400.loopbooleantrueWithout status: replays the build after a short hold on Ready; off plays once and shows Replay. With status building: re-assembles until the status turns done; off holds on Styling. Reduced motion always plays once.size"sm" | "md" | "lg" | number"md"Width: sm 280px, md 400px, lg 560px, or any pixel number. Everything scales with the width and never exceeds the container.tone"accent" | "neutral""accent"The tint for placeholders, the button, the chart, the switch and the status mark. Accent uses --accent, neutral uses the foreground.colorstring–Any CSS color, overriding tone, for a brand or per product tint.labelsPartial<Record<"idle" | "layout" | "components" | "styling" | "ready", string>>–Replace any phase label, for example { ready: "Your dashboard is ready" }.showLabelbooleantrueShows the status line under the frame: the mark, the phase label and Replay. Turn it off when the surrounding UI already says what is happening.onReplay() => void–Shows a Replay button on Ready. Start the generation again and set status back to building.onPhaseChange(phase: BuildingBlocksPhase) => void–Called when the visible phase changes, for analytics or to sync other UI.classNamestring–Class on the root.styleCSSProperties–Inline styles on the root.- Tab, EnterorSpace
- Reaches and presses Replay when it shows on Ready. The visual itself is decorative and takes no focus.
- The frame is aria-hidden; the phase is announced from a polite status region instead, so screen readers hear Laying out, Adding components, Styling and Ready.
- The simulated demo says so ("Simulated build, nothing was generated") and its looping region is not announced on every loop.
- Ready pairs a check icon with the label, so state never relies on color alone.
- Replay is a real button from the Arc Button component with a visible label.
- Blocks fly in from just outside their slots and snap into place with a 520ms expo out curve, critically damped with no overshoot, staggered 40ms apart so the whole layout lands within 200ms of the first block.
- Each block lands as an accent tinted placeholder, crossfades to neutral content (bars grow from their left edge, the chart line draws in), then a styling pass fades in the tint, photos and the switch's single slide.
- Loops are seamless: a finished layout fades out in place, resets to its fly in origins with transitions off while invisible, and builds again over the same dashed slots.
- Every change is a CSS transition on transform or opacity, driven by stage flags, so status changes are always interruptible and never a hard cut.
- The phase label swaps with a single crossfade (old out in 100ms, new in over 160ms with a 2px rise, no blur) in a fixed line, so the status row never shifts; Replay fades in on Ready.
- Off screen (IntersectionObserver) or in a hidden tab the schedule and the status mark pause.
- Reduced motion keeps the placeholders, content and styling steps as plain crossfades, drops travel and loops, and plays once.
- Sizes are in container units of the root width, so the layout, radii and type of the mini app scale together and stay proportional from 240px to 880px.
- The root is min(100%, size), so it never causes horizontal scroll at 360px or 390px.
- At narrow widths the status line uses 12px type and stays aligned with the blocks' left edge.
- About 60 absolutely positioned spans and one tiny SVG; no layout work after mount and no per frame JavaScript.
- All motion is CSS transitions and one CSS keyframe loop on transform, opacity and a small clip path, so it runs on the compositor at 60fps.
- Three small portraits and one product photo load with the component; swap them out if you embed it many times on one page.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it as the loading state while an AI generates a UI, an app, a page or a dashboard: in a reply bubble, under a prompt composer, on a canvas, or in an empty state.
- Map your request state to status: building while the request runs, done when the result arrives, idle before the first prompt. It fast forwards cleanly if done arrives mid build.
- Set duration near your typical generation time; with loop on, long generations keep re-assembling instead of freezing.
- Use labels to name the thing being built ("Your dashboard is ready") and color for a brand tint.
The full library index for assistants is at /llms.txt.