Overscan motion

OVERSCANUI KIT

demo/motion.html, from this page

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

<ov-flap
  value="ARRIVING"
  digits="8"
></ov-flap>

import { OvFlap } from 'overscan/react'

<OvFlap
  value="ARRIVING"
  digits="8"
/>

import { OvFlap } from 'overscan/vue'

<OvFlap
  value="ARRIVING"
  digits="8"
/>

import OvFlap from 'overscan/svelte/OvFlap.svelte'

<OvFlap
  value="ARRIVING"
  digits="8"
/>

TEXT OUTPUT, PER THEME

Each theme names its own text animation in --ov-text-anim, and animation-name takes a custom property, so naming the keyframes is the whole wiring. The mapping is a claim about each register: a terminal types, worn phosphor catches and drops out, a film loop cuts, an Esper scan reads across, and cyber arrives damaged. Any element can override the token inline to mix.

terminal

REACTOR ONLINE / SECTOR 4 NOMINAL

ov-type, stepped, with a hard block cursor on the edge

industrial

REACTOR ONLINE / SECTOR 4 NOMINAL

ov-flicker-in over 1.1s. catches, drops, catches

cyber

REACTOR ONLINE / SECTOR 4 NOMINAL

instant, then ov-slice tears several times every 1.6s

antiseptic

REACTOR ONLINE / SECTOR 4 NOMINAL

nothing. no arrival at all, which is the register

esper

REACTOR ONLINE / SECTOR 4 NOMINAL

ov-wipe, linear, with a soft bright edge leading it

neo

REACTOR ONLINE / SECTOR 4 NOMINAL

instant, then every glyph settles out of a scramble

machina

REACTOR ONLINE / SECTOR 4 NOMINAL

ov-flicker-in in 0.7s. a sensor acquiring, not a screen drawing

holo

REACTOR ONLINE / SECTOR 4 NOMINAL

ov-wipe over 1.3s, linear and slow. it is being projected, not printed

aegis

REACTOR ONLINE / SECTOR 4 NOMINAL

ov-wipe in 0.5s, stepped. a plot updates, it does not animate

vector

REACTOR ONLINE / SECTOR 4 NOMINAL

ov-type in 0.7s. the beam has to travel to each glyph, so they arrive in order

variation: value="SECTOR 4"

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

<ov-flap
  value="SECTOR 4"
  digits="8"
></ov-flap>

import { OvFlap } from 'overscan/react'

<OvFlap
  value="SECTOR 4"
  digits="8"
/>

import { OvFlap } from 'overscan/vue'

<OvFlap
  value="SECTOR 4"
  digits="8"
/>

import OvFlap from 'overscan/svelte/OvFlap.svelte'

<OvFlap
  value="SECTOR 4"
  digits="8"
/>

SPLIT FLAP

The one widget whose motion is the data. The drum steps forward one character at a time, so the time a cell takes to settle is proportional to how far its character travelled. You can see which cells moved a little and which moved almost all the way round before you can read any of them. Z is the long way from blank, and takes the long way. Reload to replay.

ARRIVING

each cell settles when its own drum reaches the letter

SECTOR 4

the space is a drum position like any other

ZULU

Z is nearly a full turn from blank, and takes nearly that long

!!!

not on the drum

variation: value="ZULU"

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

<ov-flap
  value="ZULU"
  digits="8"
></ov-flap>

import { OvFlap } from 'overscan/react'

<OvFlap
  value="ZULU"
  digits="8"
/>

import { OvFlap } from 'overscan/vue'

<OvFlap
  value="ZULU"
  digits="8"
/>

import OvFlap from 'overscan/svelte/OvFlap.svelte'

<OvFlap
  value="ZULU"
  digits="8"
/>

variation: value="!!!"

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

<ov-flap
  value="!!!"
  digits="8"
></ov-flap>

import { OvFlap } from 'overscan/react'

<OvFlap
  value="!!!"
  digits="8"
/>

import { OvFlap } from 'overscan/vue'

<OvFlap
  value="!!!"
  digits="8"
/>

import OvFlap from 'overscan/svelte/OvFlap.svelte'

<OvFlap
  value="!!!"
  digits="8"
/>

MOTION VOCABULARY

Text, borders, labels and procedural panel surfaces. Nothing here animates colour or opacity on anything carrying text: every reveal is a mask or a clip, so a glyph is either fully painted or absent and the delivered contrast is correct at every frame. Everything perpetual is cancelled first under reduced motion.

.ov-type

PRESSURE LOSS / SECTOR 4

reveals by clip in steps, never by fade, so no glyph is ever half painted

.ov-slice

PRESSURE LOSS / SECTOR 4

a hard cut between two slices. no blur, no opacity

.ov-flicker-in

PRESSURE LOSS / SECTOR 4

phosphor catching: fully on or fully off, never half lit

.ov-wipe

PRESSURE LOSS / SECTOR 4

a read head passing over the line

.ov-cut

PRESSURE LOSS / SECTOR 4

absent, then present, with nothing in between

.ov-burn

PRESSURE LOSS / SECTOR 4

arrives over-bright and settles. both ends clear the gate

.ov-rollup

PRESSURE LOSS / SECTOR 4

pushed up as new output arrives. geometry only

.ov-trace

bus

statelive

draws on around the perimeter. falls back to a plain border

.ov-runner

bus

statelive

perpetual. says powered, never progressing

.ov-sweep

REACTOR

reverse video sweeps through and leaves

.ov-scan

field

flux0.912

perpetual bar travelling down the surface

.ov-hatch

field

flux0.912

perpetual drift, slow enough to read as a surface