diff --git a/__tests__/features/base/interactions.spec.tsx b/__tests__/features/base/interactions.spec.tsx
new file mode 100644
index 0000000..3aa6cd4
--- /dev/null
+++ b/__tests__/features/base/interactions.spec.tsx
@@ -0,0 +1,8 @@
+describe("Base [Interactions]", () => {
+  describe("When clicking in nested button", () => {
+    it("should allow to trigger button callback", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/base/rendering.spec.tsx b/__tests__/features/base/rendering.spec.tsx
index 1feac29..1f9372b 100644
--- a/__tests__/features/base/rendering.spec.tsx
+++ b/__tests__/features/base/rendering.spec.tsx
@@ -1,36 +1,54 @@
 import { renderApp } from "../../utils/render-app";
 
-describe("Example view", () => {
+describe("Base [Rendering]", () => {
   describe("When example view has been rendered", () => {
-    test("it renders entire example without errors", () => {
+    it("should render entire example without errors", () => {
       const { wrapper } = renderApp();
 
       expect(wrapper).toBeDefined();
     });
-    test("it renders center in button without errors", () => {
+    it("should render center in button without errors", () => {
       const { centerBtn } = renderApp();
 
       expect(centerBtn).toBeDefined();
     });
-    test("it renders zoom in button without errors", () => {
+    it("should render zoom in button without errors", () => {
       const { zoomInBtn } = renderApp();
 
       expect(zoomInBtn).toBeDefined();
     });
-    test("it renders zoom out button without errors", () => {
+    it("should render zoom out button without errors", () => {
       const { zoomOutBtn } = renderApp();
 
       expect(zoomOutBtn).toBeDefined();
     });
-    test("it renders reset button without errors", () => {
+    it("should render reset button without errors", () => {
       const { resetBtn } = renderApp();
 
       expect(resetBtn).toBeDefined();
     });
-    test("it renders transform component without errors", () => {
+    it("should render transform component without errors", () => {
       const { content } = renderApp();
 
       expect(content).toBeDefined();
     });
   });
+  describe("When example view has been rendered", () => {
+    it("should render with initial scale", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should render with limit initial scale to minScale", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should render with limit initial scale to maxScale", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should center on initialization", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
 });
diff --git a/__tests__/features/pan-touch/pan-touch.sizes.spec.tsx b/__tests__/features/pan-touch/pan-touch.sizes.spec.tsx
new file mode 100644
index 0000000..8e1b62d
--- /dev/null
+++ b/__tests__/features/pan-touch/pan-touch.sizes.spec.tsx
@@ -0,0 +1,22 @@
+describe("Pan Touch [Sizes]", () => {
+  describe("When content is bigger than wrapper", () => {
+    it("should allow panning to the bottom-right end without moving back", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow panning with velocity", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When content is smaller than wrapper", () => {
+    it("should not allow for panning", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should return to original position", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/pan-touch/pan.exclusion.spec.tsx b/__tests__/features/pan-touch/pan.exclusion.spec.tsx
new file mode 100644
index 0000000..10e9c6c
--- /dev/null
+++ b/__tests__/features/pan-touch/pan.exclusion.spec.tsx
@@ -0,0 +1,12 @@
+describe("Pan Touch [Exclusion]", () => {
+  describe("When excluding element", () => {
+    it("should not allow for panning on excluded element", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow panning on other elements", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/pan-track-pad/pan.exclusion.spec.tsx b/__tests__/features/pan-track-pad/pan.exclusion.spec.tsx
new file mode 100644
index 0000000..0b3cb03
--- /dev/null
+++ b/__tests__/features/pan-track-pad/pan.exclusion.spec.tsx
@@ -0,0 +1,12 @@
+describe("Pan TrackPad [Exclusion]", () => {
+  describe("When excluding element", () => {
+    it("should not allow for panning on excluded element", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow panning on other elements", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/pan/pan.clicks.spec.tsx b/__tests__/features/pan/pan.clicks.spec.tsx
new file mode 100644
index 0000000..f083818
--- /dev/null
+++ b/__tests__/features/pan/pan.clicks.spec.tsx
@@ -0,0 +1,46 @@
+describe("Pan [Clicks]", () => {
+  describe("When allowing for left click pan", () => {
+    it("should allow for panning with left click", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow for panning with other clicks", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When allowing for middle click pan", () => {
+    it("should allow for panning with middle click", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow for panning with other clicks", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When allowing for right click pan", () => {
+    it("should allow for panning with right click", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow for panning with other clicks", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When allowing panning with any click", () => {
+    it("should allow for panning with left click", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow for panning with middle click", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow for panning with right click", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/pan/pan.exclusion.spec.tsx b/__tests__/features/pan/pan.exclusion.spec.tsx
new file mode 100644
index 0000000..7de8129
--- /dev/null
+++ b/__tests__/features/pan/pan.exclusion.spec.tsx
@@ -0,0 +1,12 @@
+describe("Pan [Exclusion]", () => {
+  describe("When excluding element", () => {
+    it("should not allow for panning on excluded element", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow panning on other elements", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/pan/pan.sizes.spec.tsx b/__tests__/features/pan/pan.sizes.spec.tsx
new file mode 100644
index 0000000..1a225cb
--- /dev/null
+++ b/__tests__/features/pan/pan.sizes.spec.tsx
@@ -0,0 +1,30 @@
+describe("Pan [Sizes]", () => {
+  describe("When content is bigger than wrapper", () => {
+    it("should allow panning to the bottom-right end without moving back", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow panning with velocity", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow to move beyond bounds", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When content is smaller than wrapper", () => {
+    it("should not allow for panning with centering", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow to move content around the wrapper body", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow to move beyond bounds", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/pinch/pinch.base.spec.tsx b/__tests__/features/pinch/pinch.base.spec.tsx
index 17f4d94..9f46d4d 100644
--- a/__tests__/features/pinch/pinch.base.spec.tsx
+++ b/__tests__/features/pinch/pinch.base.spec.tsx
@@ -3,8 +3,8 @@ import { waitFor } from "@testing-library/dom";
 import { renderApp } from "../../utils/render-app";
 
 describe("Pinch [Base]", () => {
-  describe("When pinch zooming", () => {
-    it("should increase transform scale", async () => {
+  describe("When content is the same size as wrapper", () => {
+    it("should change transform scale", async () => {
       const { ref, content, pinch } = renderApp();
       expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
       pinch({ value: 1.5 });
@@ -13,5 +13,39 @@ describe("Pinch [Base]", () => {
         expect(ref.current?.instance.state.scale).toBe(1.5);
       });
     });
+    it("should zoom to the position of midpoint", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should zoom out from position of midpoint", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should return to bounds after zooming out", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When content bigger than wrapper", () => {
+    it("should center the content", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should change transform scale", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should zoom to the position of midpoint", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should zoom out from position of midpoint", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should return to bounds after zooming out", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
   });
 });
diff --git a/__tests__/features/pinch/pinch.exclusion.spec.tsx b/__tests__/features/pinch/pinch.exclusion.spec.tsx
new file mode 100644
index 0000000..6b1379c
--- /dev/null
+++ b/__tests__/features/pinch/pinch.exclusion.spec.tsx
@@ -0,0 +1,12 @@
+describe("Pinch [Exclusion]", () => {
+  describe("When excluding element", () => {
+    it("should not allow for pinching on excluded element", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow pinching on other elements", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/positions/positions.base.spec.tsx b/__tests__/features/positions/positions.base.spec.tsx
new file mode 100644
index 0000000..8995fa8
--- /dev/null
+++ b/__tests__/features/positions/positions.base.spec.tsx
@@ -0,0 +1,70 @@
+describe("Positions [Base]", () => {
+  describe("When content is bigger than wrapper", () => {
+    describe("When rendering initially original size content", () => {
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+    });
+
+    describe("When zoomed in content", () => {
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+    });
+
+    describe("When zoomed out content", () => {
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+    });
+  });
+  describe("When content is smaller than wrapper", () => {
+    describe("When rendering initially original size content", () => {
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+    });
+
+    describe("When zoomed in content", () => {
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+    });
+
+    describe("When zoomed out content", () => {
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+      it("should ...", async () => {
+        // TODO: Implement test
+        expect(true).toBe(true);
+      });
+    });
+  });
+});
diff --git a/__tests__/features/positions/positions.centering.spec.tsx b/__tests__/features/positions/positions.centering.spec.tsx
new file mode 100644
index 0000000..ded5a44
--- /dev/null
+++ b/__tests__/features/positions/positions.centering.spec.tsx
@@ -0,0 +1,18 @@
+describe("Positions [Centering]", () => {
+  describe("When rendering initially zoomed out content", () => {
+    it("should center the content with prop X", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not center the content with prop X disabled", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When rendering initially zoomed in content", () => {
+    it("should not center the content with prop X", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/positions/positions.initial.spec.tsx b/__tests__/features/positions/positions.initial.spec.tsx
new file mode 100644
index 0000000..e6d22f1
--- /dev/null
+++ b/__tests__/features/positions/positions.initial.spec.tsx
@@ -0,0 +1,42 @@
+describe("Positions [Initial]", () => {
+  describe("When setting initialPositionX", () => {
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+
+  describe("When setting initialPositionY", () => {
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+
+  describe("When setting is not fitting min-max", () => {
+    it("should not allow for using lower value than minPositionX", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow for using higher value than maxPositionX", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow for using lower value than minPositionY", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should not allow for using higher value than maxPositionY", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/positions/positions.max.spec.tsx b/__tests__/features/positions/positions.max.spec.tsx
new file mode 100644
index 0000000..e081dda
--- /dev/null
+++ b/__tests__/features/positions/positions.max.spec.tsx
@@ -0,0 +1,23 @@
+describe("Positions [Max]", () => {
+  describe("When setting maxPositionX", () => {
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+
+  describe("When setting maxPositionY", () => {
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/positions/positions.min.spec.tsx b/__tests__/features/positions/positions.min.spec.tsx
new file mode 100644
index 0000000..cc18dcc
--- /dev/null
+++ b/__tests__/features/positions/positions.min.spec.tsx
@@ -0,0 +1,23 @@
+describe("Positions [Min]", () => {
+  describe("When setting minPositionX", () => {
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+
+  describe("When setting minPositionY", () => {
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should ...", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/zoom-to-element/zoom-to-element.base.spec.tsx b/__tests__/features/zoom-to-element/zoom-to-element.base.spec.tsx
new file mode 100644
index 0000000..8695db1
--- /dev/null
+++ b/__tests__/features/zoom-to-element/zoom-to-element.base.spec.tsx
@@ -0,0 +1,16 @@
+describe("Zoom to element [Base]", () => {
+  describe("When zooming to element", () => {
+    it("should fit element in the screen", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should apply the padding to element", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should transition between elements", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/__tests__/features/zoom/zoom.base.spec.tsx b/__tests__/features/zoom/zoom.base.spec.tsx
index bfa264a..110a461 100644
--- a/__tests__/features/zoom/zoom.base.spec.tsx
+++ b/__tests__/features/zoom/zoom.base.spec.tsx
@@ -4,7 +4,7 @@ import { renderApp } from "../../utils/render-app";
 
 describe("Zoom [Base]", () => {
   describe("When zooming in with controls button", () => {
-    it("should increase transform scale", async () => {
+    it("should change transform scale", async () => {
       const { ref, content, zoom } = renderApp();
       expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
       zoom({ value: 1.5 });
@@ -13,5 +13,35 @@ describe("Zoom [Base]", () => {
         expect(ref.current?.instance.state.scale).toBe(1.5);
       });
     });
+    it("should zoom to the position of cursor", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should zoom out from position of cursor", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should return to bounds after zooming out", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+  describe("When content bigger than wrapper", () => {
+    it("should center the content", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should zoom to the position of cursor", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should zoom out from position of cursor", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should return to bounds after zooming out", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
   });
 });
diff --git a/__tests__/features/zoom/zoom.exclusion.spec.tsx b/__tests__/features/zoom/zoom.exclusion.spec.tsx
new file mode 100644
index 0000000..fe348a6
--- /dev/null
+++ b/__tests__/features/zoom/zoom.exclusion.spec.tsx
@@ -0,0 +1,12 @@
+describe("Zoom [Exclusion]", () => {
+  describe("When excluding element", () => {
+    it("should not allow for zooming on excluded element", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+    it("should allow zooming on other elements", async () => {
+      // TODO: Implement test
+      expect(true).toBe(true);
+    });
+  });
+});
diff --git a/src/stories/examples/cinema/cinema.stories.mdx b/src/stories/examples/cinema/cinema.stories.mdx
new file mode 100644
index 0000000..1022c1a
--- /dev/null
+++ b/src/stories/examples/cinema/cinema.stories.mdx
@@ -0,0 +1,64 @@
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";
+import { action } from "@storybook/addon-actions";
+
+import { TransformWrapper, TransformComponent } from "../../../components";
+import { argsTypes } from "../../types/args.types.ts";
+import { normalizeArgs } from "../../utils";
+
+import exampleImg from "./image.png";
+
+export const Template = (args) => (
+  <TransformWrapper
+    {...normalizeArgs(args)}
+    wheel={{
+      activationKeys: (keys) =>
+        ["Meta", "Ctrl"].some((key) => keys.includes(key)),
+    }}
+    trackPadPanning={{
+      disabled: false,
+      activationKeys: (keys) =>
+        !["Meta", "Ctrl"].some((key) => keys.includes(key)),
+    }}
+  >
+    <TransformComponent
+      wrapperStyle={{
+        width: "400px",
+        height: "400px",
+        maxWidth: "70vw",
+        maxHeight: "70vh",
+      }}
+      contentStyle={{
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <div style={{ background: "#ababab", color: "black", padding: "0px" }}>
+        <div>Click cmd + wheel to zoom</div>
+        <div>Navigate easily with touchpad</div>
+        <img
+          src={exampleImg}
+          alt=""
+          style={{
+            width: "100%",
+          }}
+        />
+      </div>
+    </TransformComponent>
+  </TransformWrapper>
+);
+
+<Meta title="Examples/Cinema" component={TransformWrapper} />
+
+# Cinema
+
+<br />
+
+### Preview:
+
+<Canvas>
+  <Story name="Cinema">{(args) => <Template {...args} />}</Story>
+</Canvas>
+
+## Component API
+
+<ArgsTable story="Cinema" />
diff --git a/src/stories/examples/cinema/image.png b/src/stories/examples/cinema/image.png
new file mode 100644
index 0000000..5dd9bcf
Binary files /dev/null and b/src/stories/examples/cinema/image.png differ