Laymur is a TypeScript Three.js UI layout
library with constraint-based positioning and rendering.
The library provides powerful constraint solving for flexible
layouts, rich UI elements like images and text, responsive
design with orientation awareness, and micro-transformations for
animations.
Explore the examples below to see how to integrate Laymur into
your Three.js projects for creating sophisticated user
interfaces.
🌅 HDRI environment map courtesy of
Poly Haven.
⚠️ Early Alpha / Work in Progress: This library
is in very early development stage. APIs may change
significantly. Documentation is actively being developed and
will be expanded with more examples and detailed guides.
00. Basic UI Layer
Introduction to the fundamental UIFullscreenLayer concept.
Shows the minimal setup required to display UI elements in
Laymur - just a layer and a single image without any
constraints, demonstrating the basic building blocks.
Three.js
UIFullscreenLayer
UIImage
Laymur
View Example
01. Distance Constraints
Demonstrates positioning UI elements using distance
constraints to maintain fixed pixel distances from container
edges. A logotype is positioned in the top-left corner and a
download button in the top-right corner, both with 50px
margins from the edges.
Three.js
Distance Constraints
UIImage
Laymur
View Example
02. Aspect & Proportion Constraints
Interactive demonstration of aspect ratio and proportional
constraints. A character, logotype, and download button are
positioned using aspect and proportion constraints for
responsive, adaptive layouts that scale with container size.
Three.js
Aspect Constraints
Proportions
Laymur
View Example
03. Text Elements
Introduction to UIText elements in constraint-based layouts.
Shows how to create, style, and position text alongside
images using the same constraint system. Demonstrates
typography integration within the Laymur UI framework.
Three.js
UIText
Typography
Laymur
View Example
04. Micro Transformations
Demonstrates UIMicro transformations and interactive
animations. UI elements can be animated independently of
constraints using micro transformations. Click interactions
trigger GSAP-powered scale animations for engaging user
feedback.
Three.js
UIMicro
GSAP
Interactions
View Example
05. Nine Slice Elements
Introduction to UINineSlice elements for creating scalable
UI components with preserved border regions. A vignette
overlay demonstrates nine-slice scaling that covers the
entire layer while maintaining border quality at any size.
Three.js
UINineSlice
Cover Constraints
Laymur
View Example
06. Progress Bars
Introduction to UIProgress elements for creating dynamic
progress bars and health indicators. A health bar is
positioned above the character showing real-time progress
updates, demonstrating foreground/background textures and
color tinting.
Three.js
UIProgress
Health Bars
Laymur
View Example