
AI keeps getting smarter. But the UIs around it still feel stuck in the 60s. We asked: what if AI could generate its own interface? That’s why we built C1 by @thesysdev - the Generative UI API. LLM outputs should not be limited to just text! We're live on Product Hunt. Would https://t.co/dPDR6hm1Qv
The Hook
“(No spoken dialogue — Gradual build-up with synth pad and subtle riser, then rhythmic synth melody and driving beat with a sub-bass drop/impact at 0:04.)”
Problem Agitation
“(No spoken dialogue — A short, sharp riser leads into a more intense section, with the main melodic theme becoming more pronounced and a sub-bass impact at 0:10.)”
Product Reveal
“(No spoken dialogue — A brief pause in the main rhythm, then reintroduction of the driving beat and melody with added percussive elements, a sweeping riser, and a powerful sub-bass drop/impact at 0:18.)”
Feature Teaser
“(No spoken dialogue — The melody becomes more intricate with a sense of urgency, followed by a final, extended riser and sweep leading to a conclusive impact, and a sustained, resonant synth chord with fading sub-bass.)”
Synthesizable in Remotion · key components of the generative-ui-showcase template.
A vertical split divides the screen, showcasing two distinct UI experiences side-by-side. Content on each side animates independently, highlighting differences.
Use a `Split` component from Remotion, with `left` and `right` children. Animate content within each child using `interpolate` for text typing, `spring` for UI element appearance, and `Sequence` for timed reveals.
UI elements (charts, forms, product cards) appear dynamically, often with a subtle fade-in and scale-up effect, as if being composed in real-time.
Employ `spring` for `opacity` and `scale` properties on newly generated UI components. Use `Sequence` and `delay` to stagger the appearance of multiple elements, mimicking a generative process. SVG paths can be animated with `stroke-dasharray` and `stroke-dashoffset` for chart drawing.
A mouse cursor moves across the screen, interacting with UI elements by hovering, clicking, and scrolling, triggering dynamic visual feedback like tooltips or expanded sections.
Create a `Cursor` component that follows a predefined `Path` using `interpolate`. Trigger state changes (e.g., `isHovered`, `isClicked`) on UI elements based on cursor position and animate their properties (e.g., `backgroundColor`, `boxShadow`, `opacity` for tooltips) using `spring` or `tween`.
Purpose. Establish the current limitation of AI outputs (text-only, non-interactive) by showing a typical, unengaging AI response.
Execution. Left panel displays a long, scrolling text response from a standard AI app, highlighting its lack of visual structure and interactivity.
Purpose. Introduce C1 as the solution, demonstrating its ability to transform raw AI output into rich, interactive user interfaces.
Execution. Right panel, 'AI Apps with C1', dynamically generates charts, forms, and structured data visualizations in real-time, directly contrasting the left panel.
Purpose. Showcase the practical benefits of generative UIs through user interaction, proving its utility and ease of use.
Execution. A mouse cursor interacts with the generated UI on the right, filling forms, clicking buttons, and revealing more detailed information, demonstrating responsiveness and depth.
Purpose. Illustrate the versatility of C1 across different use cases, from financial analysis to product discovery.
Execution. Transition through multiple distinct scenarios (stock analysis, credit cards, product search), each time showing the generative UI creating a tailored, interactive experience.
Objective
Launch a new AI-powered project management tool that generates dynamic dashboards and task flows.How the recipe adapts
The split-screen will compare a traditional text-based project update on the left with a C1-powered generative dashboard on the right. The generative UI will dynamically create Gantt charts, Kanban boards, and interactive task lists based on natural language input. The mouse cursor will highlight task dependencies and drag-and-drop tasks between stages. Sound design will emphasize the 'snapping' and 'connecting' of generated project elements.Scene durations (4 scenes, 26s)
Key Remotion components

xAI opens voice cloning on its API: build a custom voice in about two minutes or pick from 80+ voices in 28 languages.

Claude can now operate your Mac, opening apps, browsing and filling spreadsheets, as a research preview in Cowork and Claude Code.
Agentic CLI for coding, building apps, and automating workflows.