From be3569222ee8372e7685044e238689c3eb57a41e Mon Sep 17 00:00:00 2001
From: Andreas Fahrecker <andreas@fahrecker.com>
Date: Wed, 2 Sep 2026 16:31:33 +0200
Subject: [PATCH 1/2] feat: :sparkles: Add arbitrary-threshold-modifiers in the
 style of tailwinds arbitrary-value convention

---
 README.md             |  7 +++++++
 src/observer/index.js | 28 +++++++++++++++++++++-------
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index a73cba5..5414103 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,13 @@ Use the `intersect-full` utility to trigger the event when when the element is f
 <div class="intersect:animate-spin intersect-full"></div>
 ```
 
+### Custom threshold
+If `intersect-half` or `intersect-full` don't fit your needs, you can set a custom threshold using Tailwind's arbitrary value syntax: `intersect-[<value>]`, where `<value>` is a number between `0` and `1`.
+```html
+<div class="intersect:animate-spin intersect-[0.3]"></div>
+```
+This triggers the event once 30% of the element is visible. Values outside the `0`–`1` range are clamped.
+
 ## Custom classes
 If you want to define the intersection behavior in a custom class (e.g. with the @apply directive), add a `intersect` class to your HTML element.
 ```html
diff --git a/src/observer/index.js b/src/observer/index.js
index cf27bb2..9690ec7 100644
--- a/src/observer/index.js
+++ b/src/observer/index.js
@@ -1,3 +1,10 @@
+const NAMED_THRESHOLDS = {
+  "intersect-full": 0.99,
+  "intersect-half": 0.5,
+};
+
+const ARBITRARY_REGEX = /(?:^|\s)intersect-\[([\d.]+)\]/;
+
 const Observer = {
     start() {
         if (document.readyState === 'loading') {
@@ -50,16 +57,23 @@ const Observer = {
         })
     },
 
+    /**
+     * 
+     * @param {Element} element 
+     * @returns {number}
+     */
     _getThreshold(element) {
-        if (element.classList.contains('intersect-full')) {
-            return 0.99
+        for (const className in NAMED_THRESHOLDS) {
+            if (element.classList.contains(className))
+                return NAMED_THRESHOLDS[className];
         }
-
-        if (element.classList.contains('intersect-half')) {
-            return 0.5
+        const match = element.className.match(ARBITRARY_REGEX);
+        if (match) {
+            const threshold = parseFloat(match[1]);
+            if (!Number.isNaN(threshold))
+                return Math.min(Math.max(0, threshold), 1);
         }
-
-        return 0
+        return 0;
     },
 
     _observers: [],

From 1a7ab5370009bd9fcd64c2ab5a74a8977f59671f Mon Sep 17 00:00:00 2001
From: Andreas Fahrecker <andreas@fahrecker.com>
Date: Wed, 2 Sep 2026 17:06:42 +0200
Subject: [PATCH 2/2] refactor: :rotating_light: Fix linter warnings

---
 src/observer/index.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/observer/index.js b/src/observer/index.js
index 9690ec7..44f5473 100644
--- a/src/observer/index.js
+++ b/src/observer/index.js
@@ -1,9 +1,9 @@
 const NAMED_THRESHOLDS = {
-  "intersect-full": 0.99,
-  "intersect-half": 0.5,
-};
+  'intersect-full': 0.99,
+  'intersect-half': 0.5,
+}
 
-const ARBITRARY_REGEX = /(?:^|\s)intersect-\[([\d.]+)\]/;
+const ARBITRARY_REGEX = /(?:^|\s)intersect-\[([\d.]+)\]/
 
 const Observer = {
     start() {
@@ -65,15 +65,15 @@ const Observer = {
     _getThreshold(element) {
         for (const className in NAMED_THRESHOLDS) {
             if (element.classList.contains(className))
-                return NAMED_THRESHOLDS[className];
+                return NAMED_THRESHOLDS[className]
         }
-        const match = element.className.match(ARBITRARY_REGEX);
+        const match = element.className.match(ARBITRARY_REGEX)
         if (match) {
-            const threshold = parseFloat(match[1]);
+            const threshold = parseFloat(match[1])
             if (!Number.isNaN(threshold))
-                return Math.min(Math.max(0, threshold), 1);
+                return Math.min(Math.max(0, threshold), 1)
         }
-        return 0;
+        return 0
     },
 
     _observers: [],