npm - etro - Versions diffs - 0.7.0 → 0.8.0 - Mend

etro 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/.github/workflows/nodejs.yml +1 -1
package/CHANGELOG.md +45 -1
package/CONTRIBUTING.md +23 -19
package/README.md +81 -26
package/dist/effect/base.d.ts +38 -0
package/dist/effect/brightness.d.ts +16 -0
package/dist/effect/channels.d.ts +23 -0
package/dist/effect/chroma-key.d.ts +23 -0
package/dist/effect/contrast.d.ts +15 -0
package/dist/effect/elliptical-mask.d.ts +31 -0
package/dist/effect/gaussian-blur.d.ts +60 -0
package/dist/effect/grayscale.d.ts +7 -0
package/dist/effect/index.d.ts +15 -0
package/dist/effect/pixelate.d.ts +18 -0
package/dist/effect/shader.d.ts +99 -0
package/dist/effect/stack.d.ts +23 -0
package/dist/effect/transform.d.ts +73 -0
package/dist/etro-cjs.js +9337 -3331
package/dist/etro-iife.js +9279 -3273
package/dist/etro.d.ts +7 -0
package/dist/event.d.ts +35 -0
package/dist/index.d.ts +6 -0
package/dist/layer/audio-source.d.ts +24 -0
package/dist/layer/audio.d.ts +14 -0
package/dist/layer/base.d.ts +69 -0
package/dist/layer/image.d.ts +6 -0
package/dist/layer/index.d.ts +11 -0
package/dist/layer/text.d.ts +60 -0
package/dist/layer/video.d.ts +11 -0
package/dist/layer/visual-source.d.ts +32 -0
package/dist/layer/visual.d.ts +58 -0
package/dist/movie.d.ts +192 -0
package/dist/object.d.ts +12 -0
package/dist/util.d.ts +125 -0
package/eslint.conf.js +0 -8
package/eslint.example-conf.js +9 -0
package/eslint.typescript-conf.js +5 -0
package/examples/application/readme-screenshot.html +12 -9
package/examples/application/video-player.html +7 -7
package/examples/application/webcam.html +6 -6
package/examples/introduction/audio.html +30 -18
package/examples/introduction/effects.html +14 -10
package/examples/introduction/export.html +32 -25
package/examples/introduction/functions.html +6 -4
package/examples/introduction/hello-world1.html +9 -5
package/examples/introduction/hello-world2.html +5 -5
package/examples/introduction/keyframes.html +35 -23
package/examples/introduction/media.html +26 -18
package/examples/introduction/text.html +9 -5
package/karma.conf.js +1 -1
package/package.json +29 -13
package/rollup.config.js +15 -4
package/scripts/gen-effect-samples.html +29 -25
package/scripts/save-effect-samples.js +14 -15
package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
package/spec/assets/effect/grayscale.png +0 -0
package/spec/assets/effect/original.png +0 -0
package/spec/assets/effect/pixelate.png +0 -0
package/spec/assets/effect/transform/multiply.png +0 -0
package/spec/assets/effect/transform/rotate.png +0 -0
package/spec/assets/effect/transform/scale-fraction.png +0 -0
package/spec/assets/effect/transform/scale.png +0 -0
package/spec/assets/effect/transform/translate-fraction.png +0 -0
package/spec/assets/effect/transform/translate.png +0 -0
package/spec/effect.spec.js +126 -57
package/spec/event.spec.js +14 -0
package/spec/layer.spec.js +175 -18
package/spec/movie.spec.js +191 -7
package/spec/util.spec.js +14 -5
package/src/effect/base.ts +96 -0
package/src/effect/brightness.ts +43 -0
package/src/effect/channels.ts +50 -0
package/src/effect/chroma-key.ts +82 -0
package/src/effect/contrast.ts +42 -0
package/src/effect/elliptical-mask.ts +75 -0
package/src/effect/gaussian-blur.ts +232 -0
package/src/effect/grayscale.ts +34 -0
package/src/effect/index.ts +22 -0
package/src/effect/pixelate.ts +59 -0
package/src/effect/shader.ts +561 -0
package/src/effect/stack.ts +74 -0
package/src/effect/transform.ts +194 -0
package/src/etro.ts +26 -0
package/src/event.ts +118 -0
package/src/index.ts +8 -0
package/src/layer/audio-source.ts +217 -0
package/src/layer/audio.ts +35 -0
package/src/layer/base.ts +156 -0
package/src/layer/image.ts +8 -0
package/src/layer/index.ts +13 -0
package/src/layer/text.ts +138 -0
package/src/layer/video.ts +15 -0
package/src/layer/visual-source.ts +150 -0
package/src/layer/visual.ts +198 -0
package/src/movie.ts +709 -0
package/src/object.ts +14 -0
package/src/util.ts +473 -0
package/tsconfig.json +8 -0
package/screenshots/2019-08-17_0.png +0 -0
package/src/effect.js +0 -1268
package/src/event.js +0 -78
package/src/index.js +0 -23
package/src/layer.js +0 -897
package/src/movie.js +0 -637
package/src/util.js +0 -505

package/eslint.conf.js CHANGED Viewed

@@ -14,15 +14,7 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module'
   },
-  plugins: [
-    'html'
-  ],
   rules: {
     'brace-style': ['error', '1tbs', { allowSingleLine: false }]
   },
-  settings: {
-    html: {
-      indent: '+2'
-    }
-  }
 }

package/eslint.example-conf.js ADDED Viewed

@@ -0,0 +1,9 @@
+const conf = require('./eslint.conf.js')
+conf.globals.etro = 'readonly'
+conf.plugins = ['html']
+conf.settings = {
+  html: {
+    indent: '+2'
+  }
+}
+module.exports = conf

package/eslint.typescript-conf.js ADDED Viewed

@@ -0,0 +1,5 @@
+const conf = require('./eslint.conf.js')
+conf.extends.push('plugin:@typescript-eslint/recommended')
+conf.parser = '@typescript-eslint/parser'
+conf.plugins = ['@typescript-eslint']
+module.exports = conf

package/examples/application/readme-screenshot.html CHANGED Viewed

@@ -3,17 +3,17 @@
 <html>
 <head>
   <title>Fun with Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     const cols = 2; const rows = 2
     let movie, sample
     const begin = () => {
       const canvas = document.createElement('canvas')
       document.body.appendChild(canvas)
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       etro.event.subscribe(movie, 'movie.timeupdate', () => {
         if (movie.currentTime >= 11) {
           movie.pause()
@@ -21,7 +21,7 @@
       })
       sample = document.createElement('video')
-      sample.src = '../assets/sample.ogv'
+      sample.src = '../assets/desert.mp4'
       sample.onloadedmetadata = addLayers
     }
@@ -35,7 +35,7 @@
       for (let y = 0; y < movie.height; y += height) {
         for (let x = 0; x < movie.width; x += width) {
           const video = document.createElement('video')
-          video.src = '../assets/sample.ogv'
+          video.src = '../assets/desert.mp4'
           if (x * y) {
             video.onplay = event => {
               console.log(event)
@@ -43,9 +43,9 @@
           }
           video.onloadedmetadata = () => {
-            const layer = new etro.layer.Video(0, video, {
-              x: x, y: y, width: width, height: height
-              // mediaStartTime: 0
+            const layer = new etro.layer.Video({
+              startTime: 0, source: video, x, y, width, height
+              // sourceStartTime: 0
             }).addEffect(new etro.effect.Channels({
               r: 0.5 + Math.random() * 0.5,
               g: 0.5 + Math.random() * 0.5,
@@ -64,7 +64,10 @@
     const end = () => {
       movie
-        .addLayer(new etro.layer.Text(0, sample.duration, 'etro', {
+        .addLayer(new etro.layer.Text({
+          startTime: 0,
+          duration: sample.duration,
+          text: 'etro',
           width: movie.width / 2,
           height: movie.height / 2,
           x: movie.width / 4,

package/examples/application/video-player.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Video player in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
   <style>
     body {
       background: #333;
@@ -58,9 +59,7 @@
   </style>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     window.addEventListener('load', () => {
       const canvas = document.getElementById('output')
@@ -69,7 +68,7 @@
         progressBar: document.getElementById('progress')
       }
-      const movie = new etro.Movie(canvas, { repeat: true })
+      const movie = new etro.Movie({ canvas, repeat: true })
       // FIXME: resetting to beginning every time paused and played
       controls.playPause.onclick = event => {
@@ -103,6 +102,7 @@
       controls.progressBar.value = 0 // just for sure, it's weird
       controls.progressBar.addEventListener('input', () => {
         movie.currentTime = 1 * controls.progressBar.value
+        movie.refresh()
       })
       etro.event.subscribe(movie, 'movie.timeupdate', () => {
         controls.progressBar.value = movie.currentTime
@@ -114,15 +114,15 @@
       // For simplicity, only use one layer
       movie.addLayer(
-        new etro.layer.Video(0, video)
+        new etro.layer.Video({ startTime: 0, source: video })
       )
       controls.progressBar.max = movie.duration
     })
   </script>
   <div id="container">
-    <video src="../assets/sample.ogv"></video>
-    <img src="../assets/sample.jpg"/>
+    <video src="../assets/desert.mp4"></video>
+    <img src="../assets/lake.jpg"/>
     <canvas id="output"></canvas><br>
     <button id="pause-play" class="play"><!-- styled --></button>
     <input id="progress" type="range" value="0"/>

package/examples/application/webcam.html CHANGED Viewed

@@ -2,13 +2,12 @@
 <html>
 <head>
   <title>getUserMedia()</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
   <video style="display:none"></video>
   <canvas></canvas>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     const video = document.querySelector('video')
     navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
       video.srcObject = stream
@@ -19,9 +18,10 @@
       }
     })
-    const movie = new etro.Movie(document.querySelector('canvas'))
-      .addLayer(new etro.layer.Visual(0, Infinity, { background: 'black' }))
-      .addLayer(new etro.layer.Video(0, video)
+    const canvas = document.querySelector('canvas')
+    const movie = new etro.Movie({ canvas })
+      .addLayer(new etro.layer.Visual({ startTime: 0, duration: Infinity, background: 'black' }))
+      .addLayer(new etro.layer.Video({ startTime: 0, source: video })
         .addEffect(new etro.effect.ChromaKey(etro.parseColor('black'), 100)))
   </script>
 </body>

package/examples/introduction/audio.html CHANGED Viewed

@@ -2,19 +2,26 @@
 <html>
 <head>
   <title>Manipulating Audio in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
-    let movie
-    const initMovie = () => {
+  <script>
+    const start = () => {
+      button.disabled = true
       // initialize movie
-      movie = new etro.Movie(document.createElement('canvas'))
+      const canvas = document.createElement('canvas')
+      const movie = new etro.Movie({ canvas })
       // initialize layers (all with durations clipped to 5 seconds)
-      const layer1 = new etro.layer.Audio(0, document.getElementById('layer1'), { duration: 5 })
-      const layer2 = new etro.layer.Audio(layer1.duration, document.getElementById('layer2'), { duration: 5 })
-      const layer3 = new etro.layer.Audio(layer2.startTime + layer2.duration, document.getElementById('layer3'), { duration: 5 })
+      const audio1 = document.getElementById('layer1')
+      const audio2 = document.getElementById('layer2')
+      const audio3 = document.getElementById('layer3')
+      const layer1 = new etro.layer.Audio({ startTime: 0, source: audio1, duration: 5 })
+      const layer2 = new etro.layer.Audio({ startTime: layer1.duration, source: audio2, duration: 5 })
+      const layer3 = new etro.layer.Audio({
+        startTime: layer2.startTime + layer2.duration,
+        source: audio3,
+        duration: 5
+      })
       /*
           Once a media layer is added to the movie, it will automatically be connected to the movie's `actx`
@@ -24,29 +31,34 @@
       // movie.layers.push.apply(movie.layers, [layer1, layer2, layer3])
       movie.layers.push(layer1, layer2, layer3)
-      // Now, disconnect the layers from the audio node graph and reconnect them with intermediate audio
+      // Now, disconnect the layers from the audio node graph and reconnect them with intersourcete audio
       // effect nodes.
-      layer1.source.disconnect(movie.actx.destination)
+      layer1.audioNode.disconnect(movie.actx.destination)
       const muter = movie.actx.createGain()
       muter.gain.value = 0
-      layer1.source.connect(muter).connect(movie.actx.destination)
+      layer1.audioNode.connect(muter).connect(movie.actx.destination)
-      layer2.source.disconnect(movie.actx.destination)
+      layer2.audioNode.disconnect(movie.actx.destination)
       const panner = movie.actx.createStereoPanner()
       panner.pan.value = +1 // completely to the right
-      layer2.source.connect(panner).connect(movie.actx.destination)
+      layer2.audioNode.connect(panner).connect(movie.actx.destination)
       // Manipulating the audio graph is not always necessary
       layer3.playbackRate = 2 // double the speed
+      etro.event.subscribe(movie, 'movie.ended', () => {
+        button.disabled = false
+      })
       movie.play()
     }
-    window.addEventListener('load', initMovie)
+    const button = document.querySelector('button')
+    button.addEventListener('click', start)
   </script>
-  <audio id="layer1" src="../assets/sample.wav"></audio>
-  <audio id="layer2" src="../assets/sample.wav"></audio>
-  <audio id="layer3" src="../assets/sample.wav"></audio>
+  <button>Start</button>
+  <audio id="layer1" src="../assets/strings.wav"></audio>
+  <audio id="layer2" src="../assets/strings.wav"></audio>
+  <audio id="layer3" src="../assets/strings.wav"></audio>
 </body>
 </html>

package/examples/introduction/effects.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <html>
 <head>
   <title>Effects in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     let movie
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
@@ -15,42 +15,46 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       const image = document.querySelector('img')
       canvas.width = image.width
       canvas.height = image.height
       // create a red 400x400 rectangle that starts at time 0 and lasts 2 seconds
       movie
-        .addLayer(new etro.layer.Image(0, 2, image))
+        .addLayer(new etro.layer.Image({ startTime: 0, duration: 2, source: image }))
       // create a transparent blue 500x200 at (50, 20) that starts at time 1 and lasts 2 seconds
         .addLayer(
-          new etro.layer.Image(2, 2, image).addEffect(
+          new etro.layer.Image({ startTime: 2, duration: 2, source: image }).addEffect(
             new etro.effect.GaussianBlur(3)
           )
         )
         .addLayer(
-          new etro.layer.Image(4, 2, image).addEffect(
+          new etro.layer.Image({ startTime: 4, duration: 2, source: image }).addEffect(
             // you can also use keyframes for almost any property in Etro
             new etro.effect.Channels({ 0: { r: 2, g: 0.5 }, 2: { r: 0.5, g: 2 } })
           )
         )
         .addLayer(
-          new etro.layer.Image(6, 2, image, {
+          new etro.layer.Image({
+            startTime: 6,
+            duration: 2,
+            source: image,
             // allow rotated image to fill entire screen by setting the size of the layer, which is not the image
-            width: movie.width, height: movie.height
+            width: movie.width,
+            height: movie.height
           }).addEffect(
             new etro.effect.Transform(new etro.effect.Transform.Matrix().rotate(Math.PI / 6)) // 30d
           )
         )
         .addLayer(
-          new etro.layer.Image(8, 2, image).addEffect(
+          new etro.layer.Image({ startTime: 8, duration: 2, source: image }).addEffect(
             new etro.effect.EllipticalMask(image.width / 2, image.height / 2, image.width / 2, image.height / 2)
           )
         )
         .play()
     }
   </script>
-  <img src="../assets/sample.jpg" style="display: none;"/>
+  <img src="../assets/lake.jpg" style="display: none;"/>
 </body>
 </html>

package/examples/introduction/export.html CHANGED Viewed

@@ -2,11 +2,21 @@
 <html>
 <head>
   <title>Media in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
+  <div id="input">
+    <img src="../assets/lake.jpg" style="display:none"/>
+    <video src="../assets/desert.mp4" style="display:none"></video>
+    <audio src="../assets/strings.wav" style="display:none"></audio>
+  </div>
+  <div id="output">
+    <video controls></video><br>
+  </div>
+  <button>Record</button>
+  <script>
     // TODO: test audio output on a device that actually has drivers
-    import etro from '../../src/index.js'
     let movie
     const btn = document.querySelector('button')
     btn.addEventListener('click', () => {
@@ -20,34 +30,41 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       const video = document.querySelector('#input video')
       movie.width = video.videoWidth
       movie.height = video.videoHeight
       movie
-        .addLayer(new etro.layer.Image(0, 3, document.querySelector('#input img'), {
+        .addLayer(new etro.layer.Image({
+          startTime: 0,
+          duration: 3,
+          source: document.querySelector('#input img'),
           // crop @ (150, 150) extending (200, 200)
-          clipX: 100,
-          clipY: 100,
+          sourceX: 100,
+          sourceY: 100,
+          sourceWidth: 400,
+          sourceHeight: 400,
           x: 100,
           y: 100,
-          clipWidth: 400,
-          clipHeight: 400,
-          width: 400,
-          height: 400
+          destWidth: 400,
+          destHeight: 400
         }))
-        .addLayer(new etro.layer.Video(3, video, {
+        .addLayer(new etro.layer.Video({
+          startTime: 3,
+          source: video,
           // trim video to only include 3 seconds starting 2 minutes into the video in the video
-          mediaStartTime: 5,
+          sourceStartTime: 5,
           duration: 3
         }))
-        .addLayer(new etro.layer.Audio(6, document.querySelector('#input audio'), {
-          mediaStartTime: 9, // start audio at 9s
+        .addLayer(new etro.layer.Audio({
+          startTime: 6,
+          source: document.querySelector('#input audio'),
+          sourceStartTime: 9, // start audio at 9s
           duration: 3 // last 3s
           // volume: 0.25 // 25% of default volume (same as setting volume attribute on audio element)
         }))
-        .record(25)
+        .record({ frameRate: 25 })
         .then(blob => {
           const video = document.querySelector('#output video')
           video.src = URL.createObjectURL(blob)
@@ -62,15 +79,5 @@
       })
     }
   </script>
-  <div id="input">
-    <img src="../assets/sample.jpg" style="display:none"/>
-    <video src="../assets/sample.ogv" style="display:none"></video>
-    <audio src="../assets/sample.wav" style="display:none"></audio>
-  </div>
-  <div id="output">
-    <video controls></video><br>
-  </div>
-  <button>Record</button>
 </body>
 </html>

package/examples/introduction/functions.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <html>
 <head>
   <title>Functions in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     let movie
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
@@ -15,14 +15,16 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       canvas.width = canvas.height = 400
       movie
       // Functions are callbacks that are called every time a property value is queried.
       // For instance, you can set a layer's opacity to the function `Math.random`, which will make the
       // layer's opacity randomized each animation frame.
-        .addLayer(new etro.layer.Visual(0, 3, {
+        .addLayer(new etro.layer.Visual({
+          startTime: 0,
+          duration: 3,
           // omitting width or height sets the respective element to fill the screen
           background: 'green',

package/examples/introduction/hello-world1.html CHANGED Viewed

@@ -2,23 +2,27 @@
 <html>
 <head>
   <title>Hello World in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
       canvas.width = 600
       canvas.height = 400
       document.body.appendChild(canvas)
-      new etro.Movie(canvas)
+      new etro.Movie({ canvas })
       // create a red rectangle that starts at time 0 and lasts 4 seconds and fills the entire screen
-        .addLayer(new etro.layer.Visual(0, 4, {
+        .addLayer(new etro.layer.Visual({
+          startTime: 0,
+          duration: 4,
           background: 'red'
         }))
       // create a transparent blue 500x200 at (50, 20) that starts at time 1 and lasts 2 seconds
-        .addLayer(new etro.layer.Visual(1, 2, {
+        .addLayer(new etro.layer.Visual({
+          startTime: 1,
+          duration: 2,
           background: '#0000ff80',
           border: { color: '#00f', thickness: 4 },
           width: 500,

package/examples/introduction/hello-world2.html CHANGED Viewed

@@ -2,24 +2,24 @@
 <html>
 <head>
   <title>Hello World in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
       document.body.appendChild(canvas)
       const video = document.createElement('video')
-      video.src = '../assets/sample.ogv'
+      video.src = '../assets/desert.mp4'
       video.onloadeddata = () => {
         canvas.width = video.videoWidth // you could also do movie.width = video.videoWidth;
         canvas.height = video.videoHeight
-        const movie = new etro.Movie(canvas)
+        const movie = new etro.Movie({ canvas })
         movie
         // add a video layer at 0s in the timeline
-          .addLayer(new etro.layer.Video(0, video))
+          .addLayer(new etro.layer.Video({ startTime: 0, source: video }))
           .play()
         // FOR TESTING issue#8 (don't delete):

package/examples/introduction/keyframes.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <html>
 <head>
   <title>Keyframes in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     let movie
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
@@ -15,7 +15,7 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       canvas.width = canvas.height = 400
       movie
@@ -23,42 +23,54 @@
       // Keyframes let you make a dynamic property that interpolates.
       // For instance, you can set a layer's opacity to decrease over time, effectively making it fade out
       // Numbers and objects interpolate (animate smoothly)
-        .addLayer(new etro.layer.Visual(0, 3, {
+        .addLayer(new etro.layer.Visual({
+          startTime: 0,
+          duration: 3,
           // omitting width or height sets the respective element to fill the screen
           background: 'green',
           // opacity=1 @ 0s (relative to the layer) -> opacity=0 @ 1s (relative to the layer)
-          opacity: { 0: 1, 3: 0 }
+          opacity: new etro.KeyFrame([0, 1], [3, 0])
         }))
       // Because strings don't interpolate, you need to convert colors and fonts to objects
       // for a smooth effect (which will then be automatically `.toString()`ed when set on the canvas
       // context).
-        .addLayer(new etro.layer.Visual(3, 3, {
-          background: { 0: etro.parseColor('red'), 3: new etro.Color(0, 0, 255) }
+        .addLayer(new etro.layer.Visual({
+          startTime: 3,
+          duration: 3,
+          background: new etro.KeyFrame([0, etro.parseColor('red')], [3, new etro.Color(0, 0, 255)])
         }))
       // You can use other types in keyframes, but they will be used sequentially without interpolation
-        .addLayer(new etro.layer.Text(6, 3, { 0: 'Hello ...', 1.5: '...world' }))
+        .addLayer(new etro.layer.Text({
+          startTime: 6,
+          duration: 3,
+          text: new etro.KeyFrame([0, 'Hello ...'], [1.5, '...world'])
+        }))
       // When interpolating, you can specify how the keyframes will be interpolated
-        .addLayer(new etro.layer.Visual(9, 3, {
-          width: { 0: movie.width, 3: 0, interpolate: etro.linearInterp }, // (obviously) linear
-          height: { 0: movie.height, 3: 0, interpolate: etro.cosineInterp }, // curved
+        .addLayer(new etro.layer.Visual({
+          startTime: 9,
+          duration: 3,
+          width: new etro.KeyFrame([0, movie.width, etro.linearInterp], [3, 0]), // (obviously) linear
+          height: new etro.KeyFrame([0, movie.height, etro.linearInterp], [3, 0]), // (obviously) linear
           background: 'blue'
         }))
       // Of course, you can have more than two keyframes
-        .addLayer(new etro.layer.Text(12, 6, 'Etro', {
-          background: {
-            0: etro.parseColor('#0ff'),
-            2: etro.parseColor('#ff0'),
-            4: etro.parseColor('#f0f'),
-            6: etro.parseColor('#fff')
-          },
+        .addLayer(new etro.layer.Text({
+          text: 'Etro',
+          startTime: 12,
+          duration: 6,
+          background: new etro.KeyFrame(
+            [0, etro.parseColor('#0ff')],
+            [2, etro.parseColor('#ff0')],
+            [4, etro.parseColor('#f0f')],
+            [6, etro.parseColor('#fff')]
+          ),
           // let's just add another property (fonts can be parsed into objects just like colors)
-          font: {
-            0: etro.parseFont('28px monospace'),
-            6: etro.parseFont('36px monospace'),
-            interpolate: etro.cosineInterp
-          }
+          font: new etro.KeyFrame(
+            [0, etro.parseFont('28px monospace'), etro.cosineInterp],
+            [6, etro.parseFont('36px monospace')]
+          )
         }))
         .play()
     }