Skip to content
insomni
Search
Ctrl
K
Cancel
GitHub
Select theme
Dark
Light
Auto
Start Here
Introduction
Installation
Quick start
Core concepts
Core Renderer — insomni
guides
Guide: building a game/sim with insomni
Camera binding recipe
Painter mode (oit:false) for games and sims
Pipeline sharing for texture effects
Premultiplied alpha — the 3 standard mistakes
Core renderer overview
Renderer & frame loop
Layers & groups
Packing & buffers
Spaces & cameras
Drawing primitives
Text
Specialized layers
Custom shaders
Custom shaders in a layer
Writing shader effects
Cameras & viewport
examples
Hello insomni
Frame loop
Layers & groups
Coordinate spaces
Minimap (mirror layer)
Primitive catalogue
Strokes — caps, joins & dashes
MSDF text
Sprites — Grid Atlas Mosaic
Y-depth sort (createLayer sort:"y")
Pan & zoom
Hover & select
Transparency (OIT)
Opaque occlusion
Text interleaves
OIT on vs off
Fragment budget (K)
Color ramps
Easing & springs
SVG export
Frame debug HUD
Partial redraw
Flow field
Orbital mandala
Lumina — the bloom cup
Robo-Rush — Final Lap
Constellation
Crystal Ball — Mystic Selector
Particles — GPU Force Fields
Custom Shaders — Sprite Effects
Custom Shaders — Full-view Plasma
Custom Shaders — Cursor Ripples
Custom Shaders — Image Filters
Custom Shaders — Liquid Glass
Custom Shaders — In-Layer Interleave
Interactions
Transparency (OIT)
Damage & partial redraw
SVG export
Math, color & animation
Debugging & profiling
ECS — insomni-ecs
ECS overview
examples
Damage-Tracked Rendering
Boids Flocking
Plot — insomni-plot
Overview
Grammar
Geoms
Scales & Aesthetics
Axes & Coordinates
Theming & Styling
Mount, Render & Export
Core API
Migration Guide
Recipes
Examples
Basics
Hello Bar
Bars
Line
Area
Stacked bars
Distributions
Histogram
Histogram — back-to-back
Violin plot
Box plot
Ridgeline
Bell curve
Relationships
Scatter
Scatter — advanced layers
Gapminder (linked brushing)
Connected Scatter
BMI & waist circumference
Weight Trend — Full-Bleed
Glucose log — July
Glucose — this week
Intervals & Ranges
Interval
Confidence band
Temperature dumbbell
7-day forecast
Temperature outlook
Bullet gauge
Gantt track
Time Series & Trends
Weight — multi-source
Stock line
Gradient area
Band & line
Weight lollipop + trend
Weight — 7-day trend
Body metrics — two series
Resting heart rate
A1C — estimated
Subscription cost
Hourly temperature
Rain
Wind & gusts
Solar radiation
UV index
Heatmaps & Tiles
Density heatmap
Tile matrix
Tile calendar (faceted)
Temperature heatmap
Coordinate Systems
Polar coord
Wind rose
Radar / spider
Dual-Axis & Annotation
Blood pressure & heart rate
Steps — daily
Financial
Candlestick & Volume
UI — insomni-ui
examples
System text
Interactions
UI Color Picker
UI Selective Overlay
Supporting Packages
Supporting packages
msdf-text
layout
layout-jsx
profiler
monitor
node
GitHub
Select theme
Dark
Light
Auto
Transparency (OIT)
WebGPU
SVG
Fullscreen
Exit
Debug
WebGPU required
This live demo needs a WebGPU-capable browser. The preview above is a static snapshot.
Transparency (OIT)
Overlapping translucent shapes blend correctly no matter their draw order — just give a fill an alpha below
1
.