Leveraging Runway’s Solaris for Real-Time Interactive Interface Creation

A new wave of creative tooling is reshaping how interfaces come to life: not through screens of widgets and menus, but through generative systems that “paint” interactions frame-by-frame. Runway’s Solaris points to this future, where an evolving canvas can become a working product demo, a shoppable video, or even a microsite—without ever opening a traditional UI builder.

TL;DR

Solaris-style models synthesize interactive interfaces in real time, generating layouts, hotspots, and state transitions frame-by-frame. Creative studios and marketing teams benefit from UI-less workflows that turn prompts, sketches, or performance capture into clickable prototypes in minutes. The result is faster pitching, rapid iteration, and on-demand app generation that plugs into production pipelines with governance and brand controls.

What is Solaris—and how does frame-by-frame interface generation work?

Solaris represents a generative approach where each video frame is both visual output and interface state. It identifies tappable or hoverable regions, updates layout and motion design per frame, and binds interactions to simple logic—so a moving scene can double as a working UI. It’s like a playable storyboard that evolves at 24–60 frames per second.

Under the hood, the workflow pairs perception with synthesis. A perception pass infers components (buttons, fields, cards), affordances (hover, tap, drag), and semantic groupings. A synthesis pass composes layout, motion, and typography consistent with brand style. Interaction mapping binds hotspots to a compact state machine, enabling navigations, toggles, counters, or video-scrub gestures. The result: a single artifact that is both designed surface and interactive logic—generated in real time.

If you’re new to prompt-driven creation, consider grounding your process with the principles in our prompt-to-prototype overview, then apply them to Solaris-style outputs.

Why UI‑less workflows matter to studios and marketing teams

UI-less means the canvas becomes the tool: creators guide the system with prompts, references, or live performance, and the model handles scaffolding. For studios, this collapses asset design, motion, and interactivity into one pass. For marketers, it turns campaign ideas into testable, clickable experiences that can ship the same day.

Because layout, motion, and behavior are co-generated, teams eliminate the handoffs that slow concept-to-customer loops. Pitch meetings can feature live, traversable concepts rather than static decks. Product launches can ship interactive teasers that evolve with creative direction. To systematize the practice, many teams pair a shared brief with a small library of brand tokens—color, type, tone—like the kits we host in our production-ready tools to keep generative outputs on-brand.

What “real-time” really means in practice

In practice, “real-time” means low-latency composition and interaction binding at video rates. For creators, it feels like puppeteering: you move, sketch, or direct; the system updates interactions and layout on every frame. The key considerations are responsiveness, determinism, and exportability to web or native runtimes.

Latency under a few frames keeps interactions feeling immediate, while deterministic seeds help reproduce exact takes for reviews. A general rule is to cache reusable segments (hero transitions, reusable components) and stream only delta updates to keep performance snappy. When it’s time to ship, teams often export a scene graph plus state machine, then wire analytics and A/B test hooks as described in our practical launch checklist.

Solaris-style prototyping vs. traditional prototyping

For teams scaling this approach, we keep a reusable component library and governance templates in our sandbox resources to stabilize exports.

How to rapidly prototype with a frame-by-frame model

A fast path balances creative freedom with light structure. This eight-step loop reliably gets teams from idea to testable artifact in under a day.

1. Capture the intent

• Write a two-paragraph brief and define a single user task. Store brand tokens (logo, color, type) in a shared kit like the ones we outline in our brand system primer.

2. Provide scaffolding

• Feed the model a rough sketch, performance capture, or storyboard. Minimal structure improves layout stability across frames.

3. Prompt for structure and tone

• Specify hierarchy (hero > cards > details), motion energy, and copy voice. Keep prompts modular for easy swaps.

4. Generate and pin anchors

• Produce 2–3 takes. “Pin” strong components (e.g., nav, CTA) so variations iterate around stable anchors.

5. Define hotspots and state

• Mark taps, hovers, and drags. Bind to a small state machine—e.g., view = {home, details}, theme = {light, dark}.

6. Inject data

• Swap placeholder text and imagery with a small CSV/JSON. This reveals edge cases early.

7. Playtest and refine

• Run a hallway test. Track time-to-first-click and drop-off between frames.

8. Export and instrument

• Export scene graph + state. Add analytics and QA gates following the guardrails in our shipping checklist.

On-demand app generation: from concept to campaign

On-demand app generation means a single generative artifact can branch into a microsite, interactive ad, or product walkthrough—without re-authoring. By exporting a consistent scene graph and state machine, teams can slot experiences into web runtimes, kiosks, or mobile shells, and light them up with commerce and analytics.

Marketing organizations can wire CMS endpoints for content swaps, then run multivariate motion and copy trials by toggling prompt modules. Studios can keep “director’s cut” and “performance cut” seeded for predictable revisions. For governance and rollbacks, enforce approvals and logs like the patterns we cover in our AI governance field guide.

Risks, constraints, and how to de-risk the rollout

Three risks recur: consistency drift, accessibility, and compliance. Consistency drift happens when prompts wander; fix it with pinned components, brand tokens, and deterministic seeds. Accessibility requires explicit passes for contrast, focus order, and alt text. Compliance demands audit logs, usage scopes, and data minimization.

Adopt guardrails early. Mandate a named style system, seed locking for approved cuts, and automated checks for contrast ratios and focus traversal similar to the checklists in our accessibility playbook. Keep an audit trail of prompts, seeds, and exports. For performance, pre-render heavy segments and stream interactivity deltas.

A two-week pilot plan to get started

In two weeks, you can validate speed, fidelity, and stakeholder fit. Week one: assemble a trio—creative lead, prompt engineer, technical artist—to produce two interactive concepts aimed at a single KPI (e.g., engagement, conversion assist). Week two: instrument, run a lightweight A/B, and review recordings.

Define success by time-to-first-click, edit-to-export cycle time, and qualitative stakeholder confidence. If the pilot clears the bar, scale with a component library, prompt modules, and a gated publishing flow. To plan a customized rollout, reach out for a working session through our applied prototyping workshop or connect with us via our studio contact channel.