OverlayNew

Bars against named references

Up to six named reference bars and one live bar in the accent, scaled to the largest and sorted, the live bar sliding between the others as it grows.

Parameters

Name	Type	Default	Range	What it does
value (Can change over time)	number	5200	0 to 1000000000000	the live bar’s value; give a follower of the counter, (v) => v, to make it grow with the filmCan change over time
name	text	YOU	– to 24	the live bar’s name
references	text	Everest 8849; K2 8611; Kilimanjaro 5895; Mont Blanc 4806; Ben Nevis 1345	– to 200	reference bars: a name then a value, separated by semicolons (up to 6)
unit	text	m	– to 12	written after the values
label	text	HEIGHT	– to 40	a word over the bars; empty for none
order	choice	largest-first	largest-first, smallest-first	the biggest bar on top, or the smallest
decimals	integer	0	0 to 4	decimal places of the value
format	choice	grouped	grouped, plain, compact, scientific	how numbers are written: 12,500 / 12500 / 12.5k / 1.25×10⁴
at	vec2	0.54, 0.14	0 to 1	the block’s top left: across and down the frame; a block near an edge slides in
width	number	0.42	0.2 to 0.9	the block’s width, a share of the frame’s width
size	number	0.028	0.015 to 0.06	the height of its names and values, a share of the frame’s height
thickness	number	0.026	0.01 to 0.06	the bars’ thickness, a share of the frame’s height
ink	color	#f3f0e8	–	ticks, words and numbers
accent	color	#4fb8e8	–	the live value and what has been reached
font	choice	sans	sans, serif, mono	the face of its words and numbers
backing	number	0.35	0 to 1	how dark the soft panel behind it is; 0 for none
reveal	number	0.8	0 to 5 s	how long it takes to draw in; 0 shows it at once

film.js

elements: { 'bar-compare': { value: 5200, name: 'YOU' } }

Ask your agent to put it in a film. It finds the element by name.