An animated illustration where a meeting transcript turns into a dashboard, one message at a time, through an AI step in the middle. Pausable, theme-aware, reduced-motion friendly.
import { TranscriptToPrototype } from "@/components/ui/transcript-to-prototype";
/* A kickoff call that turns into a dashboard, one sentence at a time.
Every line on the left builds one piece of the screen on the right. */
const settings = {
accent: "#7f72e3",
accentForeground: "#060408",
title: "Kickoff: new dashboard",
meta: "PM & Designer · 42:16",
screenTitle: "Dashboard",
message1: "We need a dashboard. Everyone else has one.",
message2: "Put the main button at the top, where people look.",
message3: "And metrics. Lots of metrics. Numbers feel important.",
message4: "Add what to do next, so nobody asks me on Slack.",
stepDuration: 2.8,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="flex w-full items-center justify-center p-6">
<TranscriptToPrototype
className="max-w-5xl"
accent={s.accent}
accentForeground={s.accentForeground}
title={s.title}
meta={s.meta}
screenTitle={s.screenTitle}
stepDuration={s.stepDuration}
messages={[
{ who: "PM", at: "12:04", text: s.message1 },
{ who: "Designer", at: "12:11", text: s.message2 },
{ who: "PM", at: "12:29", text: s.message3 },
{ who: "Designer", at: "12:34", text: s.message4 },
]}
/>
</div>
);
}