Continuum: Reactive UI & Rendering

Continuum is FluentAI's revolutionary approach to building reactive user interfaces and real-time visualizations. It seamlessly bridges the gap between functional programming and modern web/3D rendering.

Overview

Continuum provides a unified framework for building everything from web applications to 3D visualizations, all within FluentAI's functional paradigm.

Reactive by Default

Automatic dependency tracking and efficient re-rendering

Cross-Platform

Target web (DOM/WebGL), native, and WebAssembly

Type-Safe

Full type checking from UI to backend

Performance First

Zero-copy rendering and minimal allocations

Core Concepts

Signals - Reactive state primitives
Effects - Side effects that track dependencies
Components - Composable UI building blocks
Render Pipeline - Efficient rendering system

Reactive UI Basics

Continuum uses signals for reactive state management, inspired by SolidJS but with FluentAI's functional approach.

Creating Signals

// Create a signal
let count = signal(0);

// Read signal value
let current = count.get();

// Update signal
count.set(1);
count.update(n => n + 1);

// Derived signals
let doubled = computed(() => count.get() * 2);
let message = computed(() => f"Count is {count.get()}");

Effects and Reactions

// Create effect that runs when dependencies change
effect(() => {
    let value = count.get();
    $(f"Count changed to {value}").print();
});

// Conditional effects
effect(() => {
    if (user.get().is_logged_in) {
        fetch_user_data();
    }
});

// Cleanup in effects
effect(() => {
    let timer = setInterval(() => tick(), 1000);
    
    // Cleanup function
    on_cleanup(() => clearInterval(timer));
});

Components

Components are the building blocks of Continuum applications.

Basic Components

// Function component
private function Counter() -> Element {
    let count = signal(0);
    
    div()
        .class("counter")
        .children([
            h1().text(f"Count: {count.get()}"),
            button()
                .text("Increment")
                .on_click(|| count.update(n => n + 1)),
            button()
                .text("Reset")
                .on_click(|| count.set(0))
        ])
}

// Component with props
private function UserCard(props: {name: string, avatar: string}) -> Element {
    div()
        .class("user-card")
        .children([
            img().src(props.avatar).alt(props.name),
            h3().text(props.name)
        ])
}

Component Lifecycle

private function DataFetcher() -> Element {
    let data = signal>(None);
    let loading = signal(true);
    
    // On mount
    on_mount(() => {
        async {
            let result = fetch_data().await();
            data.set(Some(result));
            loading.set(false);
        }
    });
    
    // On cleanup
    on_cleanup(() => {
        cancel_pending_requests();
    });
    
    // Conditional rendering
    if (loading.get()) {
        div().text("Loading...")
    } else {
        DataView(data.get().unwrap())
    }
}

Web Rendering

Continuum can render to DOM, Canvas, or WebGL contexts.

DOM Rendering

// Create app
let app = App() {
    router: Router.new([
        Route("/", HomePage),
        Route("/users/:id", UserPage),
        Route("/settings", SettingsPage)
    ]),
    theme: Theme.default()
};

// Mount to DOM
continuum.mount("#app", app);

// HTML elements
div()
    .id("main")
    .class(["container", "flex"])
    .style("padding", "20px")
    .children([
        header(),
        main().children(router_outlet()),
        footer()
    ])

Styling

// Inline styles
div().style({
    "background": "linear-gradient(45deg, #0066ff, #00d4ff)",
    "padding": "2rem",
    "border-radius": "12px"
})

// CSS-in-FluentAI
let styles = stylesheet({
    ".button": {
        padding: "0.75rem 1.5rem",
        background: var(--primary),
        color: "white",
        border: "none",
        border_radius: "8px",
        cursor: "pointer",
        
        "&:hover": {
            background: var(--primary-dark),
            transform: "translateY(-2px)"
        }
    }
});

// Dynamic styles
let active = signal(false);
div()
    .class(computed(() => 
        if (active.get()) { "active" } else { "inactive" }
    ))
    .style("opacity", computed(() => 
        if (visible.get()) { "1" } else { "0" }
    ))

3D Graphics

Continuum includes a powerful 3D rendering system built on WebGPU/WebGL.

3D Scene Setup

// Create 3D scene
let scene = Scene3D() {
    camera: PerspectiveCamera {
        fov: 75,
        position: vec3(0, 5, 10),
        look_at: vec3(0, 0, 0)
    },
    
    lighting: [
        DirectionalLight {
            direction: vec3(-1, -1, -1),
            color: Color.white(),
            intensity: 1.0
        },
        AmbientLight {
            color: Color.rgb(0.2, 0.2, 0.3),
            intensity: 0.5
        }
    ]
};

// Add objects
scene.add(
    Mesh {
        geometry: BoxGeometry(2, 2, 2),
        material: StandardMaterial {
            color: Color.rgb(0, 0.4, 1),
            metalness: 0.5,
            roughness: 0.3
        },
        position: vec3(0, 1, 0)
    }
);

3D Animations

// Animate 3D objects
let rotation = signal(0.0);

animate(() => {
    rotation.update(r => r + 0.01);
    mesh.rotation.y = rotation.get();
});

// Physics integration
let physics_world = PhysicsWorld {
    gravity: vec3(0, -9.81, 0)
};

mesh.add_component(
    RigidBody {
        mass: 1.0,
        restitution: 0.7
    }
);

// Particle systems
let particles = ParticleSystem {
    emitter: PointEmitter {
        position: vec3(0, 5, 0),
        rate: 100
    },
    particle_config: {
        lifetime: 2.0,
        start_size: 0.1,
        end_size: 0.0,
        start_color: Color.white(),
        end_color: Color.transparent()
    }
};

Data Binding

Continuum provides powerful two-way data binding capabilities.

Form Handling

// Form with data binding
private function ContactForm() -> Element {
    let form_data = signal({
        name: "",
        email: "",
        message: ""
    });
    
    let errors = signal>({});
    
    let validate = () => {
        let mut errs = {};
        let data = form_data.get();
        
        if (data.name.is_empty()) {
            errs["name"] = "Name is required";
        }
        if (!data.email.contains("@")) {
            errs["email"] = "Invalid email";
        }
        
        errors.set(errs);
        errs.is_empty()
    };
    
    form()
        .on_submit(|e| {
            e.prevent_default();
            if (validate()) {
                submit_form(form_data.get());
            }
        })
        .children([
            input()
                .type("text")
                .placeholder("Name")
                .value(form_data.get().name)
                .on_input(|e| form_data.update(|f| {
                    f.name = e.target.value;
                    f
                })),
                
            show_error(errors.get().get("name")),
            
            textarea()
                .placeholder("Message")
                .value(form_data.get().message)
                .on_input(|e| form_data.update(|f| {
                    f.message = e.target.value;
                    f
                })),
                
            button()
                .type("submit")
                .text("Send")
        ])
}

List Rendering

// Dynamic lists
let todos = signal>([]);

div()
    .children(
        For(todos, |todo| {
            TodoItem {
                todo: todo,
                on_complete: || mark_complete(todo.id),
                on_delete: || todos.update(|list| 
                    list.filter(|t| t.id != todo.id)
                )
            }
        })
    )

// Keyed lists for optimal updates
For(users)
    .key(|user| user.id)
    .render(|user| UserRow(user))

Animations

Continuum includes a powerful animation system.

Basic Animations

// Tween animation
let opacity = signal(0.0);

tween(opacity)
    .to(1.0)
    .duration(300)
    .easing(Easing.ease_in_out)
    .start();

// Spring animations
let position = signal(vec2(0, 0));

spring(position)
    .to(vec2(100, 100))
    .stiffness(200)
    .damping(20)
    .start();

// Animation sequences
sequence([
    tween(scale).to(1.2).duration(200),
    parallel([
        tween(rotation).to(360).duration(400),
        tween(opacity).to(0.5).duration(400)
    ]),
    tween(scale).to(1.0).duration(200)
]).start();

Gesture Animations

// Drag gesture
div()
    .use_gesture(
        drag()
            .on_start(|| {
                initial_pos = position.get();
            })
            .on_move(|delta| {
                position.set(initial_pos + delta);
            })
            .on_end(|velocity| {
                // Momentum animation
                physics_spring(position)
                    .velocity(velocity)
                    .to(snap_position())
                    .start();
            })
    )

// Pinch to zoom
image()
    .use_gesture(
        pinch()
            .on_scale(|scale| {
                zoom.update(z => z * scale);
            })
    )

Deployment

Continuum applications can be deployed to various targets.

Web Deployment

# Build for web
fluentai build --target web --release

# Output structure
dist/
├── index.html
├── app.wasm          # Main application
├── app.js            # JS bindings
└── assets/           # Static assets

# Optimize for production
fluentai build --target web --release \
    --features "wasm-opt,compression" \
    --public-url "https://cdn.example.com"

Native Deployment

# Build native app
fluentai build --target native --release

# Platform-specific builds
fluentai build --target macos --release
fluentai build --target windows --release
fluentai build --target linux --release

# Mobile targets
fluentai build --target ios --release
fluentai build --target android --release

Next Steps:

Explore the Continuum examples
Check out the Continuum API Reference
Join the community to share your Continuum projects