Understand how Vajra UI achieves 144+ FPS with GPU-accelerated rendering and Tailwind-like styling that compiles to GPU instructions.
┌─────────────────────────────────────────────────────────────┐
│ VAJRA UI ARCHITECTURE │
├─────────────────────────────────────────────────────────────┤
│ Layer 1: Styling API (Tailwind-like Method Chaining) │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ .flex().gap(4).bg(Color::BLUE_500).rounded_xl() ││
│ │ Compiles to → VajraStyle struct → GPU shader values ││
│ └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│ Layer 2: Layout Engine (Taffy 0.5) │
│ - Flexbox/Grid calculations │
│ - Constraint solving │
│ - Position/size computation │
├─────────────────────────────────────────────────────────────┤
│ Layer 3: Render Pipeline (wgpu 25.0) │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Buffer Pool → Instance Batching → SDF Shaders ││
│ │ ││
│ │ 144 FPS Optimizations: ││
│ │ • PresentMode::Mailbox (low latency) ││
│ │ • Triple buffering ││
│ │ • Dirty tracking ││
│ │ • spin_sleep frame pacing ││
│ └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘144 FPS requires completing each frame within 6.94ms. Here are the key techniques we use, inspired by Zed's GPUI architecture:
Avoid CPU-GPU race conditions by using a pool of instance buffers. While GPU renders frame N, CPU prepares frame N+1 in a different buffer.
struct BufferPool {
available: Vec<wgpu::Buffer>,
in_flight: Vec<wgpu::Buffer>,
}
fn render_frame(&mut self) {
let buffer = self.pool.acquire();
// Write instance data
self.queue.submit(commands);
// Return buffer async when GPU done
}Signed Distance Functions render shapes mathematically instead of texture-based. Crisp at any scale, GPU-efficient.
// WGSL shader for rounded rect
fn sdf_rounded_rect(
p: vec2<f32>,
size: vec2<f32>,
radius: f32
) -> f32 {
let q = abs(p) - size + vec2(radius);
return min(max(q.x, q.y), 0.0)
+ length(max(q, vec2(0.0)))
- radius;
}Render 1000+ UI elements in a single draw call by packing instance data into GPU buffers.
struct RectInstance {
position: [f32; 2],
size: [f32; 2],
color: [f32; 4],
corner_radius: f32,
}
// One draw call for all rects
render_pass.draw_indexed(
0..6, 0, 0..instance_count
);Use PresentMode::Mailbox for low-latency vsync and spin_sleep for precise frame timing to hit 144 FPS consistently.
let config = SurfaceConfiguration {
present_mode: PresentMode::Mailbox,
..
};
let mut loop_helper = LoopHelper::builder()
.build_with_target_rate(144.0);
loop {
loop_helper.loop_start();
render_frame();
loop_helper.loop_sleep();
}Desktop IDEs, native apps, performance-critical tools, embedded systems, games.
Web-based tools, online IDEs, browser games, cross-platform web apps.
Vajra UI uses method chaining that looks like Tailwind CSS but compiles directly to GPU shader values. No CSS parsing at runtime.
<div class="flex gap-4 p-4
bg-blue-500 rounded-xl">
<button class="px-8 py-4
text-lg font-bold
hover:bg-blue-600">
Click Me
</button>
</div>CSS classes → Browser parses CSS → DOM layout → Paint
Container::new()
.flex()
.gap(4)
.p(4)
.bg(Color::BLUE_500)
.rounded_xl()
.child(
Button::new("Click Me")
.px(8).py(4)
.text_lg()
.font_bold()
.hover(|s| s.bg(Color::BLUE_600))
)Method calls → Compile-time values → Taffy layout → GPU draw
# 1. Clone the repository
git clone https://github.com/Gaurav-Wankhede/vajra-ui
cd vajra-ui
# 2. Run an example
cargo run --example widget_gallery
# 3. Add to your project
# Cargo.toml
[dependencies]
vajra-ui = "0.1"
# 4. Use in your code
use vajra_ui::prelude::*;
fn main() {
App::new()
.title("My App")
.size(1280, 720)
.run(|| {
Container::new()
.flex()
.justify_center()
.items_center()
.h_screen()
.child(Text::new("Hello, Vajra UI!").text_4xl())
});
}