diff --git a/.epub/example/OEBPS/scripts/ipub.js b/.epub/example/OEBPS/scripts/ipub.js
index 884b6aa..7dbe184 100644
--- a/.epub/example/OEBPS/scripts/ipub.js
+++ b/.epub/example/OEBPS/scripts/ipub.js
@@ -143,10 +143,14 @@ class IPUBImage extends IPUBElement {
   static elementName = "ipub-image";
 }
 
+class IPUBInteraction extends IPUBElement {
+  static elementName = "ipub-interaction";
+}
+
 globalThis.addEventListener("load", () => {
   console.info("IPUB: STARTING DEFINITIONS");
 
-  [IPUBBackground, IPUBContent, IPUBImage].forEach((e) => {
+  [IPUBBackground, IPUBContent, IPUBImage, IPUBInteraction].forEach((e) => {
     console.info(`IPUB: Defining custom element <${e.elementName}>`);
     globalThis.customElements.define(e.elementName, e);
   });
diff --git a/.epub/example/OEBPS/sections/section0001.xhtml b/.epub/example/OEBPS/sections/section0001.xhtml
index 7696f03..e6358d7 100644
--- a/.epub/example/OEBPS/sections/section0001.xhtml
+++ b/.epub/example/OEBPS/sections/section0001.xhtml
@@ -16,55 +16,15 @@
         </ipub-background>
         <ipub-image>
           <img src="../images/image0001.png" />
+          <ipub-interaction style="--ipub-y:88.5%;--ipub-x:6%" circle="">
+            <a href="https://krita.org" referrerpolicy="same-origin"
+            rel="external nofollow noopener noreferrer" target="_blank" />
+          </ipub-interaction>
+          <ipub-interaction style="--ipub-y:93.5%;--ipub-x:81.5%;--ipub-size:13%;">
+            <a href="https://guz.one" referrerpolicy="same-origin"
+            rel="external nofollow noopener noreferrer" target="_blank" />
+          </ipub-interaction>
         </ipub-image>
-        <section data-ipub-element="page" id="page01">
-          <span data-ipub-element="image">
-            <img src="../images/image0001.png" />
-          </span>
-          <!-- 
-          This in the UI would be an "Point Interaction" or just "Interaction". The
-          editor can just place it on some point the page, and adjust it's size.
-
-          The action is "open link", this action should have a warning to the reader, 
-          to make sure they don't open malicious links.
-        -->
-          <!-- 
-          The "rel" will have "nofollow", "noopener" and "noreferrer" when the link
-          is to a domain different from the project's one.
-        -->
-          <a data-ipub-element="interaction" data-ipub-variant="point"
-          style="--ipub-x: 6%; --ipub-y: 88.5%; --ipub-width: 10%; --ipub-radius: 100%; --ipub-origin-offset-x: -50%; --ipub-origin-offset-y: -50%; --ipub-ratio: 1/1;"
-          id="int-httpsguzone" href="https://krita.org" target="_blank"
-          referrerpolicy="same-origin" rel="external nofollow noopener noreferrer">
-          <!-- 
-          This would be generated if the editor doesn't specify a accessibility text,
-          the in quotations text would be fetched from the site's title when the link is created
-          if possible.
-        -->
-          Go to "Krita | Digital Paiting. Creative Freedom"</a>
-          <!-- 
-          This in the UI would be an "Area Interaction". The editor would first place
-          the first top-left point, and then the bottom-right one, to select an area/size
-          of the interaction.
-
-          The action is "go to page".
-        -->
-          <a data-ipub-element="interaction" data-ipub-variant="area"
-          style="--ipub-x: 76%; --ipub-y: 90%; --ipub-width: 11.5%; --ipub-height: 8%;"
-          id="int-httpsguzone" href="section0001.xhtml#page03">
-          <!-- 
-          This would be generated if the editor doesn't specify a accessibility text.
-          The in quotations text would be the title of the page if it has one, otherwise
-          it's ID is used (RFC, we could just place the text as "Go to page", since the IDs.
-          may not be human-readable).
-        -->
-          Go to page "page03"</a>
-          <!-- 
-          TODO: Analyse if area and point interactions should be saved as the same type of element
-          and if the "data-ipub-variant" should be a thing. This pretty much depends on how much
-          we want the editor to "guess" what controls to provide the user with.
-        -->
-        </section>
         <section data-ipub-element="page" id="page02">
           <span data-ipub-element="image">
             <img src="../images/image0002.png" />
diff --git a/.epub/example/OEBPS/styles/stylesheet.css b/.epub/example/OEBPS/styles/stylesheet.css
index 8aaa478..6c758bd 100644
--- a/.epub/example/OEBPS/styles/stylesheet.css
+++ b/.epub/example/OEBPS/styles/stylesheet.css
@@ -110,6 +110,43 @@ ipub-image {
   }
 }
 
+ipub-interaction {
+  position: absolute;
+
+  --ipub-x: 0px;
+  --ipub-y: 0px;
+  --ipub-size: 10%;
+  --ipub-width: var(--ipub-size, unset);
+  --ipub-height: unset;
+  --ipub-ratio: 1/1;
+
+  left: var(--ipub-x);
+  top: var(--ipub-y);
+
+  width: var(--ipub-width);
+  height: var(--ipub-height);
+  aspect-ratio: var(--ipub-ratio, unset);
+  transform: translate(var(--ipub-offset-x, -50%), var(--ipub-offset-y, -50%));
+
+  & > * {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    border-radius: var(--ipub-radius, unset);
+
+    /* 
+    * The opacity would be, by default, zero. Here it is 0.3 for easier debugging and
+    * showing of the example ebook 
+    */
+    background-color: red;
+    opacity: 0.3;
+  }
+  &[circle] {
+    --ipub-radius: 100%;
+  }
+}
+
 [data-ipub-element="image"] {
   width: var(--ipub-width, unset);
   height: var(--ipub-height, unset);