upload w/ blits package to branch for testing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits-example-app",
-  "version": "2.0.0",
+  "version": "2.8.8",
   "description": "Lightning 3 Blits Example App",
   "main": "index.js",
   "type": "module",
@@ -49,6 +49,6 @@
   },
   "dependencies": {
     "@firebolt-js/sdk": "^1.4.1",
-    "@lightningjs/blits": "^2.0.0"
+    "@lightningjs/blits": "github:lightning-js/blits#feat/animejs"
   }
 }

src/App.js

@@ -31,6 +31,8 @@ import FocusHandling from './pages/FocusHandling'
 import Positioning from './pages/Positioning'
 import Player from './pages/Player'
 import Colors from './pages/Colors'
+import Confetti from './pages/Confetti'
+import Animatable from './pages/Animatable'
 import Gradients from './pages/Gradients'
 import Transitions from './pages/Transitions'
 import Alpha from './pages/Alpha'
@@ -117,6 +119,8 @@ export default Blits.Application({
     { path: '/examples/colors', component: Colors },
     { path: '/examples/gradients', component: Gradients },
     { path: '/examples/transitions', component: Transitions },
+    { path: '/examples/animatable', component: Animatable },
+    { path: '/examples/confetti', component: Confetti },
     { path: '/examples/alpha', component: Alpha },
     { path: '/examples/scaling', component: Scaling },
     { path: '/examples/rotation', component: Rotation },

src/components/Letter.js

@@ -20,30 +20,15 @@ import Blits from '@lightningjs/blits'
 export default Blits.Component('Letter', {
   template: `
     <Element>
-      <Element
-        w="$w"
-        :h.transition="{value: 410+$offset, duration: $duration, delay: $wait, easing: $timingFunction}"
-        color="#E6E6E6"
-      />
-      <Element
-        w="$w"
-        h="280"
-        :src="$image"
-        :y.transition="{value: 400+$offset, duration: $duration, delay: $wait, easing: $timingFunction}"
-      />
-      <Element
-        w="$w"
-        color="#E6E6E6"
-        :h.transition="{value: 500-$offset, duration: $duration, delay: $wait, easing: $timingFunction}"
-        :y.transition="{value: 660+$offset, duration: $duration, delay: $wait, easing: $timingFunction}"
-      />
+      <Element w="$w" :h="410+$offset" color="#E6E6E6" />
+      <Element w="$w" h="280" :src="$image" :y="400+$offset" />
+      <Element w="$w" color="#E6E6E6" :h="500-$offset" :y="660+$offset" />
     </Element>
   `,
   props: {
     w: 0,
     letter: '',
     direction: 'up',
-    delay: 0,
   },
   computed: {
     image() {
@@ -53,34 +38,14 @@ export default Blits.Component('Letter', {
   state() {
     return {
       offset: this.direction === 'up' ? -680 : 680,
-      duration: 1000,
-      wait: 0,
-      timingFunction: 'cubic-bezier(1,-0.64,.39,1.44)',
     }
   },
   hooks: {
     ready() {
-      this.animate()
-    },
-  },
-  methods: {
-    animate() {
-      this.$setTimeout(() => {
-        this.offset = 0
-      }, 1000)
-
-      this.$setTimeout(() => {
-        this.wait = this.delay + 150
-        this.duration = 1000
-        this.offset = 1080
-      }, 2800)
-
-      this.$setTimeout(() => {
-        this.wait = this.delay / 3
-        this.timingFunction = 'ease-in-out'
-        this.duration = 1500
-        this.offset = 0
-      }, 5000)
+      this.$timeline()
+        .add(this, { offset: 0, delay: 1000, duration: 1000 })
+        .add(this, { offset: 1080, delay: 150, duration: 1000 })
+        .add(this, { offset: 0, delay: 150, duration: 1500, ease: 'inOut' })
     },
   },
 })

src/index.js

@@ -55,7 +55,7 @@ Blits.Launch(App, 'app', {
   w: 1920,
   h: 1080,
   multithreaded: false,
-  debugLevel: 1,
+  // debugLevel: 1,
   reactivityMode: 'Proxy',
   // pixelRatio: 1,
   // renderMode: 'canvas',

src/pages/Animatable.ts

@@ -0,0 +1,86 @@
+import Blits from '@lightningjs/blits'
+
+export default Blits.Component('Animatable', {
+  template: `
+    <Element w="1920" h="1080" color="#1e293b">
+      <Element w="200" h="200" y="100" :x="$oneX" color="pink" />
+      <Element w="200" h="200" y="400" :x="$twoX" color="green" />
+      <Element w="200" h="200" y="700" x="100" color="blue" ref="bluebox" />
+
+      <Text :content="$counter" mount="{x: 1}" x="1880" y="100" size="72" />
+    </Element>
+  `,
+  state() {
+    return {
+      oneX: 100,
+      twoX: 100,
+      animatable: null,
+      blueboxAnimatable: null,
+      manualAnimation: null,
+      timer: null,
+      counter: 0,
+    }
+  },
+  hooks: {
+    ready() {
+      this.animatable = this.$animatable(this, {
+        oneX: 100,
+        duration: 1000,
+      })
+
+      this.blueboxAnimatable = this.$animatable('bluebox', {
+        x: 100,
+        duration: 1000,
+      })
+
+      this.timer = this.$timer({
+        duration: 1000,
+        loop: true,
+        onLoop: () => {
+          this.counter++
+        }
+      })
+    }
+  },
+  input: {
+    right() {
+      const targetX = this.oneX + 300;
+      this.animatable.oneX(targetX, 500, 'easeInOut')
+
+
+      this.blueboxAnimatable.x(targetX)
+
+      if(this.manualAnimation) {
+        this.manualAnimation.cancel()
+        this.manualAnimation = null
+      }
+      this.manualAnimation = this.$animate(this, {
+        twoX: this.twoX + 300,
+        duration: 1000,
+      })
+
+    },
+    left() {
+      const targetX = this.oneX - 300;
+      this.animatable.oneX(this.oneX - 300)
+      this.blueboxAnimatable.x(targetX)
+      if(this.manualAnimation) {
+        this.manualAnimation.cancel()
+        this.manualAnimation = null
+      }
+      this.manualAnimation = this.$animate(this, {
+        twoX: this.twoX - 300,
+        duration: 1000,
+      })
+    },
+    enter() {
+      if(this.timer.paused === false) {
+        this.timer.pause()
+      }
+      else {
+        this.timer.play()
+      }
+
+    }
+  }
+})

src/pages/Confetti.js

@@ -0,0 +1,174 @@
+import Blits from '@lightningjs/blits'
+
+const SHAPE_1 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEjSURBVHgBnZO9TgJBFIXvbEllQqsJNrTaSmVhqdHKViyplCewsTXhDcAnkBcwUkm52tqwJrYmVLTDOXAWJsPfhJN8e/fuzD2TmblrFsl7fw66YOSXyvWtZpuEwQPw5nfrKaxzZTFCDrjCBLyDIfjXvDo4Aw3lPefcfWjQRWiq4CUojEWjFqiANkw6jntG8qGVn7cUlzqVyRgcZ3jcaWCYUEx9gR/AbTczOVKflq5c8SQ0+LN0lXNrWfCxYnuIBoXeDy1d5dxvGrwqaVi6LhQHNOgpYaPUE4qvQBUU6IN+hkeBpK3Blow26RZc6n3ZiRQaqoPwoJT3zKviafNwj2Rc1fisC1fsYfIY/YWxRurchdwaE3bYDbi2ebexZX9BH6sO4vlTUbSnqsTgwTgAAAAASUVORK5CYII='
+const SHAPE_2 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABOSURBVHgB7ZKhDQAgDAQfwiA4loEhUKzFZoxSqKtAtFUILmnST/7cByJaADJs9OiQmJxEGAqhnmv8RDj54lOiHEBV9MtNbDDAYod9r3MDaHkHotN0PbEAAAAASUVORK5CYII='
+const SHAPE_3 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFcSURBVHgBrVQtTwNBEJ1tMKCa8AOoqj6LK6BJjl8AFleCwsE/AEGQdx5RgYXUYTnbmjsSJKQ1xW7f5N4m28u2d/14ybuZ2515O9PerEgNrLVtMAf7sgtA6MqWmMguwOocerINVMAuYijbAAIJhb7AGf22bAIkdrzK7sB3+ver8gwCYtgIPOJah3R+Br6AXfCW6wXp/G/66R4eCbiqjQ/aMdmtHOqj0Ap1Y+gFpExU/AWSDsB98BA8k7I7xZMxpt/Co8DLidfCORNCYop/7kWe2I2KqWNcFP89bT9m0iv4uaTCaylbn1IsdZst52BxCl7AfWDSpYRxSrFCO/PFFgQ9ZLRjCcOtawFZdTMk2KMd0eqPry0e8/2HNmr0ket48QN+Bt+8CVH88iMfNZptXlUOvlBSuSRmTaYmdBnkrgoe9mjXuSz0RAZOlp3OGc9dXJ1gDA44PXWxevEOqutzNZRW6qN+HjoAAAAASUVORK5CYII='
+
+const SHAPES = [SHAPE_1, SHAPE_2, SHAPE_3]
+const COLORS = ['#3C91EF', '#847EFF', '#00A75E', '#F1604B', '#C4DEFA']
+
+const POOL_SIZE = 160
+const BURST_COUNT = 30
+const Y_START = -40
+const Y_END = 1600
+
+const Particle = Blits.Component('Particle', {
+  template: `
+    <Element
+      :w="$w"
+      :h="$h"
+      :color="$color"
+      :src="$src"
+      :x.transition="{ value: $x, duration: $durationMs, easing: 'cubic-bezier(0,0,0.4,1)' }"
+      :y.transition="{ value: $y, duration: $durationMs, easing: 'linear', end: $onFallEnd }"
+      :rotation.transition="{ value: $rotation, duration: $durationMs, easing: 'linear' }"
+      :alpha.transition="{ value: $alpha, delay: $fadeDelayMs, duration: $fadeDurationMs }"
+      :scale.transition="{ value: $scale, delay: $fadeDelayMs, duration: $fadeDurationMs }"
+      mount="0.5"
+    />
+  `,
+
+  props: {
+    isBurst: false,
+    side: null,
+    startY: Y_START,
+    launchDelay: 0,
+  },
+
+  state() {
+    return {
+      x: -200,
+      y: Y_END + 100,
+      w: 1,
+      h: 1,
+      scale: 0,
+      alpha: 0,
+      rotation: 0,
+      durationMs: 1,
+      fadeDelayMs: 0,
+      fadeDurationMs: 1,
+      color: '#000000',
+      src: '',
+      launched: false,
+      falling: false,
+      targetX: 0,
+      targetRot: 0,
+      targetDurationMs: 1,
+    }
+  },
+
+  hooks: {
+    ready() {
+      this.$setTimeout(
+        () => this.launch(this.isBurst, this.side, this.startY),
+        this.launchDelay || 0
+      )
+    },
+  },
+
+  methods: {
+    onFallEnd(element, prop, finalValue) {
+      if (!this.launched) return
+      if (this.falling) {
+        this.launch(false, null, Y_START)
+      } else {
+        this.x = this.targetX
+        this.y = Y_END
+        this.rotation = this.targetRot
+        this.alpha = 0
+        this.scale = 0.2
+        this.durationMs = this.targetDurationMs
+        this.fadeDelayMs = Math.round(this.targetDurationMs * 0.6)
+        this.fadeDurationMs = Math.round(this.targetDurationMs * 0.4)
+        this.falling = true
+      }
+    },
+
+    launch(isBurst = false, side = 'right', startY = Y_START) {
+      const size = 11 + Math.random() * 25
+      const ratio = size / 36
+      const baseDurationMs = Math.round(
+        (isBurst ? 2.2 + Math.random() * 1.5 : 4.5 + Math.random()) * 1000
+      )
+      const durationMs = Math.round((baseDurationMs * (Y_END - startY)) / (Y_END - Y_START))
+      const startX = isBurst ? (side === 'left' ? -40 : 1960) : Math.random() * 1920
+      const endX =
+        startX +
+        (isBurst
+          ? (3 + Math.random() * 35) * ratio * 28 * (side === 'left' ? 1 : -1)
+          : (Math.random() - 0.5) * 40)
+      const startRot = Math.random() * 360
+      const endRot = startRot + (Math.random() < 0.5 ? -1 : 1) * (360 + Math.random() * 720)
+
+      this.targetX = endX
+      this.targetRot = endRot
+      this.targetDurationMs = durationMs
+
+      this.w = size
+      this.h = size
+      this.color = COLORS[Math.floor(Math.random() * COLORS.length)]
+      if (this.src.length === 0) {
+        this.src = SHAPES[Math.floor(Math.random() * SHAPES.length)]
+      }
+
+      this.x = startX
+      this.y = startY
+      this.scale = 1.2
+      this.alpha = 1
+      this.rotation = startRot
+      this.durationMs = 1
+      this.fadeDelayMs = 0
+      this.fadeDurationMs = 1
+      this.falling = false
+      this.launched = true
+    },
+  },
+})
+
+export default Blits.Component('Confetti', {
+  components: {
+    Particle,
+  },
+
+  template: `
+    <Element w="1920" h="1920">
+      <Particle
+        :for="p in $particles"
+        :key="$p.id"
+        :isBurst="$p.isBurst"
+        :side="$p.side"
+        :startY="$p.startY"
+        :launchDelay="$p.launchDelay"
+      />
+    </Element>
+  `,
+
+  state() {
+    const particles = []
+
+    for (let i = 0; i < BURST_COUNT; i++) {
+      particles.push({
+        id: i,
+        isBurst: true,
+        side: i % 2 === 0 ? 'left' : 'right',
+        startY: -40,
+        launchDelay: i * 15,
+      })
+    }
+
+    for (let i = BURST_COUNT; i < POOL_SIZE; i++) {
+      particles.push({
+        id: i,
+        isBurst: false,
+        side: null,
+        startY: Math.floor(Math.random() * 1100),
+        launchDelay: (i - BURST_COUNT) * 3,
+      })
+    }
+
+    return { particles }
+  },
+})

src/pages/Portal.js

@@ -133,6 +133,16 @@ export default Blits.Component('Portal', {
           id: 'examples/transitions',
           description: 'Comparing different transition easing functions',
         },
+        {
+          title: 'Confetti',
+          id: 'examples/confetti',
+          description: 'Example of a confetti effect using particles',
+        },
+        {
+          title: 'Animatable',
+          id: 'examples/animatable',
+          description: 'Example of a component that can be animated',
+        },
         {
           title: 'Components',
           id: 'examples/components',