lol

README.md

@@ -1,16 +1,16 @@
 ## Zoompinch
 
-Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively in both directions.
+Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas.
 
-Play around with the [demo here](https://zoompinch.pages.dev)
+**Play around with the [demo here](https://zoompinch.pages.dev)**
 
 ### Mathematical correct pinch on touch
 
-Unlike other libraries, _Pinchzoom_ does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes rotation
+Unlike other libraries, _Zoompinch_ does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes pinching on touch devices feel native-like.
 
-### Matrix Layer on top
+### Touch, Wheelm, Mouse and Trackpad Gestures!
 
-You can use a matrix layer on top that projects any virtual point within the canvas to the real absolute coordinates.
+Adside of touch, mouse and wheel events, **gesture events** (Safari Desktop) are supported as well! Try it out on the [demo](https://zoompinch.pages.dev)
 
 ### Currently supported platforms:
 

playground/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="root">
-    <!-- <nav-bar /> -->
+    <nav-bar />
     <playground />
   </div>
 </template>

playground/src/components/Playground.vue

@@ -1,4 +1,4 @@
-<!-- <template>
+<template>
   <div class="playground">
     <header>
       <section>
@@ -213,6 +213,7 @@ onMounted(() => {
     border-radius: 10px;
     padding: 20px;
     display: grid;
+    display: none;
     flex: none;
     box-sizing: border-box;
     gap: 20px;
@@ -277,35 +278,4 @@ onMounted(() => {
     }
   }
 }
-</style> -->
-
-<template>
-  <div class="my-container">
-    <zoompinch
-      :width="536"
-      :height="802"
-      :bounds="false"
-      :rotation="true"
-      :offset="{ left: 0, top: 0, bottom: 0, right: 0 }"
-      :min-scale="0.1"
-      :max-scale="10"
-    >
-      <template #canvas>
-        <img src="https://creactive-media.de/images/gallery/DSC05518.jpeg" style="width: 536px; height: 802px" />
-      </template>
-    </zoompinch>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Zoompinch } from 'zoompinch';
-import 'zoompinch/style.css';
-</script>
-
-<style scoped lang="scss">
-.my-container {
-  width: 100%;
-  height: 500px;
-  background-color: #eee;
-}
 </style>

zoompinch-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "files": [
     "package.json",