✨ Runtime Morphing Demo

30-Second Magic â€ĸ No Navigation â€ĸ No Reload

Morph Count
0

🎮 Demo Controls

Click buttons to trigger live UI morphing

1. Login

Emit actor.changed signal

2. Capability Unlock

Emit capabilities.changed signal

→ Login first to unlock

3. Surface Switch

Emit surface.changed signal

public

→ Login first to switch surfaces

ℹī¸ How It Works

  • No page reload - All changes happen via runtime signals
  • Live morphing - UI updates instantly based on context
  • Real WASM runtime - Powered by WebAssembly decision engine
Current State
public
Active Embeds
7 / 9
embed: nav_bar | variant: minimal
Runtime Demo
embed: profile_card | variant: compact
Demo User
Demo User
Guest
embed: capability_upgrade_cta | variant: banner
⭐
Unlock Premium Features
Connect Stripe to access advanced analytics
⭐ SIGNATURE
embed: runtime_sidebar | variant: public
🏠
embed: auth_panel | variant: public
embed: context_badge | variant: standard
⚙ī¸Context
🌐Surface:public
📱Device:desktop
👤Role:guest
embed: capability_panel | variant: list

Capabilities

🔒Locked Features
🔒
Advanced Analytics
Deep insights into your data
Requires: analytics.advanced
Locked
🔒
Payment Processing
Accept payments with Stripe
Requires: stripe.connected
Locked

đŸŽ¯ Demo Flow

  1. 1. Public View - Minimal nav, compact profile, upgrade CTA visible
  2. 2. Login - Nav expands, profile enriched, participants appear
  3. 3. Capability Unlock - Upgrade CTA disappears, full profile shown
  4. 4. Surface Switch - Layout morphs based on selected surface