Overscan timeline

OVERSCANUI KIT

A layer is never shown as present at a time it has no data for. Each lane rests on hatched NO DATA, and only recorded spans are drawn over it, so VISUAL's dropout from 0:12 to 0:18 is a gap and not blank track, while AUDIO's recorded silence from 0:24 to 0:30 is a flat line. The readout at the playhead gives a reading or NO DATA and never carries one across a gap. Tap a layer name to solo it: the playhead does not move, and a soloed layer with nothing at the playhead says so. Drag a lane or use the slider to scrub.

Fill styles

demo/timeline.html, from this page

import 'overscan'
import 'overscan/overscan.css'

<ov-timeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="line"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
></ov-timeline>

import { OvTimeline } from 'overscan/react'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="line"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import { OvTimeline } from 'overscan/vue'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="line"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import OvTimeline from 'overscan/svelte/OvTimeline.svelte'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="line"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

fill: line

variation: fill="area"

import 'overscan'
import 'overscan/overscan.css'

<ov-timeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="area"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
></ov-timeline>

import { OvTimeline } from 'overscan/react'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="area"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import { OvTimeline } from 'overscan/vue'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="area"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import OvTimeline from 'overscan/svelte/OvTimeline.svelte'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="area"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

fill: area

variation: fill="gradient"

import 'overscan'
import 'overscan/overscan.css'

<ov-timeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="gradient"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
></ov-timeline>

import { OvTimeline } from 'overscan/react'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="gradient"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import { OvTimeline } from 'overscan/vue'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="gradient"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import OvTimeline from 'overscan/svelte/OvTimeline.svelte'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="gradient"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

fill: gradient

variation: fill="bars"

import 'overscan'
import 'overscan/overscan.css'

<ov-timeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="bars"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
></ov-timeline>

import { OvTimeline } from 'overscan/react'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="bars"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import { OvTimeline } from 'overscan/vue'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="bars"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

import OvTimeline from 'overscan/svelte/OvTimeline.svelte'

<OvTimeline
  layers="VISUAL,AUDIO,THERMAL"
  duration="40"
  at="21"
  fill="bars"
  label="Recording"
  style="--ov-timeline-track-w:56ch"
/>

fill: bars

Every theme (fill: line)

terminal

industrial

cyber

antiseptic

esper

neo

machina

holo

aegis

vector