feat: support arbitrary threshold values via intersect-[value] modifier

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

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,15 +57,22 @@ 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
     },