🐍 Viper

What is Viper?

Viper is a toy GUI and domain-specific language designed to make creating interactive UI/UX experiences and creative code effortless. It combines declarative syntax, reactive state management, and built-in visual primitives for everything from fractals to shaders to animations.

Whether you're building a dashboard, visualizing mathematical concepts, or crafting generative art—Viper lets you express complex visuals with minimal boilerplate.

✨ Core Features

⚡ Quick Examples

Interactive Button with State

state count = 0

component Button {
  param label: String
  
  draw box(on: tap => count = count + 1) {
    text(content: label + ": " + count)
  }
}

Button(label: "Click Me")

Fractal Viewer with Bridge

state zoom = 1.5

bridge {
  call: "rust:mandelbrot"
  args: { zoom: zoom, center: [0, 0] }
  cache with zoom
  on result {
    canvas {
      draw image(data: result, format: "pixels")
    }
  }
}

Smooth Animation

state targetPos = { x: 100, y: 100 }

animation.smooth(type: "spring", stiffness: 120, damping: 0.9) {
  follow(node: button, to: targetPos)
}

Generative Curve

curve(type: "custom", params: { 
  fn: |t| { x: sin(t * 5), y: cos(t * 3) } 
}) {
  draw path(stroke: "cyan", strokeWidth: 2)
}

Shader Overlay with Glass Effect

shader(type: "glass", params: { blur: 8, refraction: 1.2 }) {
  canvas(width: 512, height: 512)
}

🎯 Language Features

Keywords & Control Flow

• state — Reactive variables
• component — Reusable UI blocks
• animation — Time-based transitions
• match — Pattern matching
• each / map / filter / fold — Collection processing
• |> — Pipeline operator for function chaining
• ?. — Optional chaining
• ?? — Nullish coalescing

Visual Primitives

• Shapes: box, circle, line, triangle, path, polygon
• Text: text() with MSDF rendering
• Curves: Bezier, spiral, Lissajous, rose, epicycloid, sine wave
• Fractals: Mandelbrot, Julia, Burning Ship, Newton
• Polygons: Schläfli notation {n} and {n/m}
• Tilings: Truncated square, Cairo, Penrose, Kagome, and more
• Polynomials: Cyclotomic, Fibonacci, Chebyshev, chaos maps

Animation & Smoothing

• lerp — Linear interpolation
• decay — Exponential smoothing with delta time
• hybrid — Lerp + decay combination
• leap — Velocity-aware smoothing
• spring — Physics-based spring motion

Shader & Texture System

• Presets: Plasma, noise (Perlin/Simplex), glass, gradient, crackle
• Blend modes: Multiply, overlay, screen
• Custom shaders via bridge to GLSL
• Advanced textures: Jian ware, ceramic crackle patterns

Bridge System (External Code)

Call code from 15+ languages with automatic caching:

• rust:functionName — WASM integration
• glsl:shaderName — GPU shaders
• python:functionName — Via Pyodide
• go:functionName, cpp:functionName — WASM compiled
• uiua:functionName — Array programming

🧮 Type System

Primitives: Int, UInt, F64, F32, Byte, Bool, Char, Str
Visual Types: Color, Vec2, Vec3, Vec4, matrix
Composites: Tuple, List, Set, Hash
Specialized: Fractal, Shape, Curve

🎭 Perfect For

• Interactive dashboards and data visualization
• Generative and procedural art
• Mathematical visualization (fractals, polynomials, curves)
• UI/UX prototyping with smooth animations
• Creative coding and shader art
• Educational tools for visual learners
• Games and interactive experiences

🚀 Get Started

Explore the full language reference and examples:

🎓 Philosophy

Declarative. Write what you want, not how to compute it.

Reactive. State changes automatically propagate through your UI.

Visual-First. Build visual experiences without fighting abstraction layers.

Minimal. No unnecessary boilerplate—just expressive, focused syntax.

Performant. Compiled to WebAssembly with GPU acceleration for shaders.