kinetograph.

An oscilloscope draws the sound as red and yellow traces over a dark grid.

$npx kinetograph add audio-scope
Source

It is drawn from the audio file itself.

Props

Every prop has a default, so the component renders as it is. Change any of them in Studio or in code.

  • audio

    string = "beat.wav"

    The audio file in public/ the signal is read from (and that plays).

  • layers

    list

    The copies of the signal, bottom first.

  • ground

    colour = "#050505"

    Background.

  • grid.show

    boolean = true

    Draw the graticule.

  • grid.cell

    number = 62

    Grid cell size, px.

  • grid.color

    colour = "#4a4a4a"

    Grid line colour.

  • grid.width

    number = 2

    Grid line width, px.

  • glowNear

    number = 3

    Radius of the tight glow, px (the first of the two stacked glows).

  • glowFar

    number = 10

    Radius of the wide bloom, px (the second glow).

  • bloomStrength

    number = 0.2

    Strength of the wide bloom (keep it low where copies of different colours meet, or they smear together).

  • bloomWithLevel

    number = 0.5

    How much the bloom swells with the loudness.

  • bloomTint

    string = ""

    Colour of the wide bloom; empty to bloom in each copy's own colour.

  • push

    number = 0.12

    Slow camera push over the whole clip (0.08 = 8% closer at the end).

  • bump

    number = 0.012

    How much the frame swells on loud hits.

  • title.kicker

    string = "LISTEN TO"

    Small line above the headline. Empty for none.

  • title.headline

    string = "SIGNAL"

    The big word. Empty for none.

  • title.script

    string = "in colour"

    Script word overlapping the headline. Empty for none.

  • title.y

    number = 0.3

    Vertical position of the headline, as a fraction of the height.

  • title.kickerColor

    colour = "#d8d8d8"

    A CSS colour.

  • title.headlineColor

    colour

    A CSS colour.

  • title.scriptColor

    colour = "#f6ea5a"

    A CSS colour.

  • title.headlineFont

    string = "Bebas Neue"

    Google Fonts family, condensed.

  • title.scriptFont

    string = "Instrument Serif"

    Google Fonts family, italic serif.

  • title.headlineSize

    number = 230

    Headline size.

  • timecode.show

    boolean = false

    Show the running time as huge soft numerals and a playhead.

  • timecode.color

    colour = "#5a5d63"

    A CSS colour.

  • timecode.blur

    number = 3

    Softness of the numerals, px.

  • timecode.playhead

    colour = "#7fb2ff"

    Colour of the playhead line.

  • streak

    number = 0

    A horizontal light streak along the centre line (anamorphic flare), swelling with the loudness.

  • streakColor

    colour = "#ff6a5a"

    Colour of the streak.

  • grain

    number = 0.035

    Film grain over everything.

  • chroma

    number = 1

    Chromatic aberration, px.

Compositions

  • AudioScope