alive Get the template

Cast mode

Your presenters are watching.

Move across the page. Five AI presenters turn to find you, each at their own pace, each blinking in their own time. Still images, doing what video usually has to.

AikoProduct explainers
LucOnboarding walkthroughs
WanjaLaunch announcements
HadiSales demos
MeeraCustomer stories

All five are AI-generated presenters from the Apex Flow AI library. None of them is a real person.

One call to put them on any page

Give an empty element to Alive.mount with the list of people. Each needs a cut-out photo and five landmarks. Inside React or Next.js, call it from an effect in a client component and call destroy() when it unmounts.

const cast = Alive.mount(document.querySelector("#cast"), {
  people: [
    { name: "Aiko", src: "people/aiko.webp",
      landmarks: { face: [0.51, 0.425, 0.198], eyes: [[0.406, 0.345], [0.615, 0.345]],
                   nose: [0.506, 0.437], mouth: [0.51, 0.508] } },
    // ...one entry per presenter
  ],
});
// later: cast.destroy();
Are these real people?

No. All five are AI-generated presenters from the Apex Flow AI character library. They are licensed for this demo only.

Why do they not all move at once?

Each presenter gets their own reaction time, head range and blink rhythm, and each aims from where their own face sits on the screen. That is what makes a row of stills read as a live audience.

How do I put a cast on my own page?

Load alive.js, then call Alive.mount(element, { people: [...] }) with one entry per presenter: a cut-out photo and five landmarks. It works in a plain page or inside a React or Next.js component.