modern-canvas 0.2.2 → 0.2.4

package/README.md

@@ -18,6 +18,18 @@
   </a>
 </p>
 
+## Features
+
+- WebGL and WebGL2
+
+- Animation
+
+- Special effects
+
+- Transition effects
+
+- Describe element as you would a CSSStyle
+
 ## 📦 Install
 
 ```shell
@@ -27,7 +39,7 @@ npm i modern-canvas
 ## 🦄 Usage
 
 ```javascript
-import { Animation, Engine, Image2D, Text2D } from 'modern-canvas'
+import { Animation, Engine, Image2D, Text2D, Video2D } from 'modern-canvas'
 import { fonts } from 'modern-font'
 
 async function loadFallbackFont() {
@@ -65,6 +77,16 @@ loadFallbackFont().then(() => {
         },
         content: '/example.png',
       }),
+      new Video2D({
+        style: {
+          left: 200,
+          top: 200,
+          width: 100,
+          height: 100,
+          maskImage: '/example.png',
+        },
+        src: '/example.mp4',
+      }),
     ])
   )
 
@@ -74,9 +96,9 @@ loadFallbackFont().then(() => {
 })
 ```
 
-## Effects
+## Special effect
 
-See the [scene/effects](./src/scene/effects)
+See all [preset special effects](./src/scene/effects)
 
 ```typescript
 import { EmbossEffect, Image2D } from 'modern-canvas'
@@ -89,3 +111,38 @@ engine.root.addChild(
   ])
 )
 ```
+
+## Transition effect
+
+See all [preset transitions](./src/scene/transitions)
+
+```typescript
+import { Image2D, TiltShiftTransition } from 'modern-canvas'
+
+engine.root.addChild(
+  new Image2D({
+    src: '/example.png',
+  }),
+  new TiltShiftTransition(),
+  new Image2D({
+    src: '/example.gif',
+  }),
+)
+```
+
+Use https://github.com/gl-transitions/gl-transitions with `vite`
+
+```ts
+import bounceGLSL from 'gl-transitions/transitions/Bounce.glsl?raw'
+import { Image2D, Transition } from 'modern-canvas'
+
+engine.root.addChild(
+  new Image2D({
+    src: '/example.png',
+  }),
+  new Transition({ glsl: bounceGLSL }),
+  new Image2D({
+    src: '/example.gif',
+  }),
+)
+```