Style Gallery (Basic)

Compare width, dashes, gradients, textures, opacity, size attenuation, and live TSL hooks side by side. The checked-in vanilla starter remains the smallest conventional Three.js setup.

Open the Style Gallery (Basic) demo

Core MeshLine Setup

This excerpt is the MeshLine-specific part of the complete vanilla starter:

import { MeshLine, circlePositions } from 'makio-meshline'

const line = new MeshLine()
	.lines( circlePositions( 64, 3 ), true )
	.lineWidth( 0.2 )
	.color( 0xff8800 )
	.gradientColor( 0xffffff )

scene.add( line )

The vanilla starter calls line.resize() from onWindowResize() so billboard width remains correct after the canvas changes size. The demos chain .autoResize() instead, which adds that listener for you.

Explore the options

The Basic demo keeps the common MeshLine options together so their visual differences are easy to compare before copying the starter into a project. Cyan-outlined labels identify GPU hook examples for widthFn, gradientFn, opacityFn, dashFn, and uvFn; the reveal animation itself uses discardFn. The animated hook cells use Three.js TSL's time node, so they do not rebuild materials or upload CPU state each frame. See TSL Hooks for copy-ready versions of every hook.

For a lit, world-space ribbon using the same compact structure, open the Surface demo. The larger Surface Road demo remains an advanced, interactive showcase.