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
Core renderer overview
Renderer & frame loop
Layers & groups
Packing & buffers
Spaces & cameras
Drawing primitives
Text
Specialized layers
Cameras & viewport
examples
Hello insomni
Frame loop
Layers & groups
Coordinate spaces
Minimap (mirror layer)
Primitive catalogue
Strokes — caps, joins & dashes
MSDF text
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
Constellation
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
examples
Hello Bar
Bars
Line
Area
Stacked bars
Histogram
Histogram — back-to-back
Violin plot
Box plot
Ridgeline
Scatter
Scatter — advanced layers
Connected Scatter
Tile matrix
Tile calendar (faceted)
Density heatmap
Interval
Gapminder (linked brushing)
Candlestick & Volume
Weight — multi-source time series
Weather · Hourly temperature
Weather · Temperature
Weather · Temperature heatmap
Weather · Rain
Weather · Wind & gusts
Weather · Solar radiation
Weather · 7-day forecast
Weather · UV index
Weather · Wind rose
Polar coord
Plot overview
Grammar of graphics
Geoms
Scales & aesthetics
Axes & coordinates
Mount, render & export
Core (imperative) API
Phylo — @phylon/renderer
Phylo overview
Tree model
Parsers & writers
examples
FigTree adapter
Rectangular tree
Radial layout
Circular layout
Cladogram transform
Curved branches
Labels
Hover & focus
Layout algorithms
Rendering
FigTree compatibility
UI — insomni-ui
examples
System text
Interactions
UI Color Picker
UI Selective Overlay
Supporting Packages
Supporting packages
phylon-parser
msdf-text
layout
layout-jsx
profiler
monitor
GitHub
Select theme
Dark
Light
Auto
Transparency (OIT)
WebGPU
SVG
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
.
