Demo

Interactive product demo for Busflow — a self-contained chat window animation inspired by the OpenAI Codex marketing page.

Concept

The demo uses a pre-scripted animation to showcase Busflow's capabilities without any live LLM connection. Core techniques:

• Typewriter effect — reveals assistant responses character-by-character (or token-by-token) using a timed loop, simulating real-time AI streaming.
• Sequential message reveals — a message queue drives the conversation forward, rendering each bubble with a slide-up + fade-in CSS transition.
• Smooth CSS transitions — @keyframes animations on opacity and transform make every element feel alive.
• Scroll-triggered playback — an IntersectionObserver starts the animation only when the user scrolls the demo into the viewport.

Architecture

index.html        — single-page shell
css/
  demo.css        — design tokens, transitions, keyframes
js/
  messages.js     — pre-scripted conversation data
  typewriter.js   — character-reveal engine
  demo.js         — orchestrator (queue, scroll trigger, auto-scroll)

Tech Stack

Layer	Choice	Rationale
Markup	Vanilla HTML	Zero build step, embeddable anywhere
Logic	Vanilla JS (ESM)	No framework overhead for a demo page
Styling	Vanilla CSS	Full control over animations & tokens

Key Implementation Details

1. Message queue — an ordered array of { role, content, delay } objects drives the entire demo.
2. Typewriter engine — splits the assistant's content into characters, appends them at ~30 ms intervals, and calls scrollIntoView({ behavior: 'smooth' }) to keep the latest text visible.
3. No live API calls — everything runs client-side from static data. This keeps the demo fast, deterministic, and free of API keys.

Getting Started

# From the repo root
cd studio/demo
# Serve with any static server
npx -y serve .