@srsergio/taptapp-ar 1.0.80 → 1.0.82

package/dist/compiler/controller.d.ts

@@ -65,12 +65,9 @@ declare class Controller {
     }>;
     _trackAndUpdate(inputData: any, lastModelViewTransform: number[][], targetIndex: number): Promise<{
         modelViewTransform: any;
-        screenCoords: {
-            x: number;
-            y: number;
-        }[];
+        screenCoords: any[];
         reliabilities: number[];
-        stabilities: any[];
+        stabilities: number[];
     }>;
     processVideo(input: any): void;
     stopProcessVideo(): void;

package/dist/compiler/controller.js

@@ -192,51 +192,73 @@ class Controller {
         const state = this.trackingStates[targetIndex];
         if (!state.pointStabilities)
             state.pointStabilities = [];
+        if (!state.lastScreenCoords)
+            state.lastScreenCoords = [];
         if (!state.pointStabilities[octaveIndex]) {
-            // Initialize stabilities for this octave if not exists
             const numPoints = this.tracker.prebuiltData[targetIndex][octaveIndex].px.length;
-            state.pointStabilities[octaveIndex] = new Float32Array(numPoints).fill(0.5); // Start at 0.5
+            state.pointStabilities[octaveIndex] = new Float32Array(numPoints).fill(0);
+            state.lastScreenCoords[octaveIndex] = new Array(numPoints).fill(null);
         }
         const stabilities = state.pointStabilities[octaveIndex];
-        const currentStabilities = [];
-        // Update all points in this octave
+        const lastCoords = state.lastScreenCoords[octaveIndex];
+        // Update stability for ALL points in the current octave
         for (let i = 0; i < stabilities.length; i++) {
-            const isTracked = indices.includes(i);
-            if (isTracked) {
-                stabilities[i] = Math.min(1.0, stabilities[i] + 0.35); // Fast recovery (approx 3 frames)
+            const isCurrentlyTracked = indices.includes(i);
+            if (isCurrentlyTracked) {
+                const idxInResult = indices.indexOf(i);
+                stabilities[i] = Math.min(1.0, stabilities[i] + 0.4); // Fast attack
+                lastCoords[i] = screenCoords[idxInResult]; // Update last known position
             }
             else {
-                stabilities[i] = Math.max(0.0, stabilities[i] - 0.12); // Slightly more forgiving loss
+                stabilities[i] = Math.max(0.0, stabilities[i] - 0.08); // Slow decay (approx 12 frames/0.2s)
             }
         }
-        // Collect stabilities and FILTER OUT excessive flickerers (Dead Zone)
-        const filteredWorldCoords = [];
-        const filteredScreenCoords = [];
-        const filteredStabilities = [];
-        for (let i = 0; i < indices.length; i++) {
-            const s = stabilities[indices[i]];
-            if (s > 0.3) { // Hard Cutoff: points with <30% stability are ignored
-                filteredWorldCoords.push(worldCoords[i]);
-                filteredScreenCoords.push(screenCoords[i]);
-                filteredStabilities.push(s);
+        // Collect points for the UI: both currently tracked AND hibernating
+        const finalScreenCoords = [];
+        const finalReliabilities = [];
+        const finalStabilities = [];
+        const finalWorldCoords = [];
+        for (let i = 0; i < stabilities.length; i++) {
+            if (stabilities[i] > 0) {
+                const isCurrentlyTracked = indices.includes(i);
+                finalScreenCoords.push(lastCoords[i]);
+                finalStabilities.push(stabilities[i]);
+                if (isCurrentlyTracked) {
+                    const idxInResult = indices.indexOf(i);
+                    finalReliabilities.push(reliabilities[idxInResult]);
+                    finalWorldCoords.push(worldCoords[idxInResult]);
+                }
+                else {
+                    finalReliabilities.push(0); // Hibernating points have 0 reliability
+                }
             }
         }
-        // STRICT QUALITY CHECK: Prevent "sticky" tracking on background noise.
-        // We require a minimum number of high-confidence AND STABLE points.
-        const stableAndReliable = reliabilities.filter((r, idx) => r > 0.75 && stabilities[indices[idx]] > 0.5).length;
-        if (stableAndReliable < 6 || filteredWorldCoords.length < 8) {
-            return { modelViewTransform: null, screenCoords: [], reliabilities: [], stabilities: [] };
+        // STRICT QUALITY CHECK: We only update the transform if we have enough HIGH CONFIDENCE points
+        const stableAndReliable = reliabilities.filter((r, idx) => r > 0.8 && stabilities[indices[idx]] > 0.6).length;
+        if (stableAndReliable < 6 || finalWorldCoords.length < 8) {
+            return {
+                modelViewTransform: null,
+                screenCoords: finalScreenCoords,
+                reliabilities: finalReliabilities,
+                stabilities: finalStabilities
+            };
         }
         const modelViewTransform = await this._workerTrackUpdate(lastModelViewTransform, {
-            worldCoords: filteredWorldCoords,
-            screenCoords: filteredScreenCoords,
-            stabilities: filteredStabilities
+            worldCoords: finalWorldCoords,
+            screenCoords: finalWorldCoords.map((_, i) => {
+                const globalIdx = indices[i];
+                return lastCoords[globalIdx];
+            }),
+            stabilities: finalWorldCoords.map((_, i) => {
+                const globalIdx = indices[i];
+                return stabilities[globalIdx];
+            })
         });
         return {
             modelViewTransform,
-            screenCoords: filteredScreenCoords,
-            reliabilities: reliabilities.filter((_, idx) => stabilities[indices[idx]] > 0.3),
-            stabilities: filteredStabilities
+            screenCoords: finalScreenCoords,
+            reliabilities: finalReliabilities,
+            stabilities: finalStabilities
         };
     }
     processVideo(input) {
@@ -282,9 +304,10 @@ class Controller {
                         const result = await this._trackAndUpdate(inputData, trackingState.currentModelViewTransform, i);
                         if (result === null || result.modelViewTransform === null) {
                             trackingState.isTracking = false;
-                            trackingState.screenCoords = [];
-                            trackingState.reliabilities = [];
-                            trackingState.stabilities = [];
+                            // Keep points for the last update so they can be shown as it "asoma"
+                            trackingState.screenCoords = result?.screenCoords || [];
+                            trackingState.reliabilities = result?.reliabilities || [];
+                            trackingState.stabilities = result?.stabilities || [];
                         }
                         else {
                             trackingState.currentModelViewTransform = result.modelViewTransform;
@@ -297,24 +320,27 @@ class Controller {
                     trackingState.showing = this.featureManager.shouldShow(i, trackingState.isTracking);
                     if (wasShowing && !trackingState.showing) {
                         trackingState.trackingMatrix = null;
-                        this.onUpdate && this.onUpdate({ type: "updateMatrix", targetIndex: i, worldMatrix: null });
                         this.featureManager.notifyUpdate({ type: "reset", targetIndex: i });
                     }
-                    if (trackingState.showing) {
-                        const worldMatrix = this._glModelViewMatrix(trackingState.currentModelViewTransform, i);
-                        // Calculate confidence score based on point stability
-                        const stabilities = trackingState.stabilities || [];
-                        const avgStability = stabilities.length > 0
-                            ? stabilities.reduce((a, b) => a + b, 0) / stabilities.length
-                            : 0;
-                        const filteredMatrix = this.featureManager.applyWorldMatrixFilters(i, worldMatrix, { stability: avgStability });
-                        trackingState.trackingMatrix = filteredMatrix;
-                        let finalMatrix = [...filteredMatrix];
-                        const isInputRotated = input.width === this.inputHeight && input.height === this.inputWidth;
-                        if (isInputRotated) {
-                            const rotationFeature = this.featureManager.getFeature("auto-rotation");
-                            if (rotationFeature) {
-                                finalMatrix = rotationFeature.rotate(finalMatrix);
+                    // Always notify update if we have points or if visibility changed
+                    if (trackingState.showing || (trackingState.screenCoords && trackingState.screenCoords.length > 0) || (wasShowing && !trackingState.showing)) {
+                        const worldMatrix = trackingState.showing ? this._glModelViewMatrix(trackingState.currentModelViewTransform, i) : null;
+                        let finalMatrix = null;
+                        if (worldMatrix) {
+                            // Calculate confidence score based on point stability
+                            const stabilities = trackingState.stabilities || [];
+                            const avgStability = stabilities.length > 0
+                                ? stabilities.reduce((a, b) => a + b, 0) / stabilities.length
+                                : 0;
+                            const filteredMatrix = this.featureManager.applyWorldMatrixFilters(i, worldMatrix, { stability: avgStability });
+                            trackingState.trackingMatrix = filteredMatrix;
+                            finalMatrix = [...filteredMatrix];
+                            const isInputRotated = input.width === this.inputHeight && input.height === this.inputWidth;
+                            if (isInputRotated) {
+                                const rotationFeature = this.featureManager.getFeature("auto-rotation");
+                                if (rotationFeature) {
+                                    finalMatrix = rotationFeature.rotate(finalMatrix);
+                                }
                             }
                         }
                         this.onUpdate && this.onUpdate({

package/dist/compiler/simple-ar.js

@@ -114,6 +114,36 @@ class SimpleAR {
                 this._updateDebugPanel(this.isTracking);
         }
         const { targetIndex, worldMatrix, modelViewTransform, screenCoords, reliabilities, stabilities } = data;
+        // Project points to screen coordinates
+        let projectedPoints = [];
+        if (screenCoords && screenCoords.length > 0) {
+            const containerRect = this.container.getBoundingClientRect();
+            const videoW = this.video.videoWidth;
+            const videoH = this.video.videoHeight;
+            const isPortrait = containerRect.height > containerRect.width;
+            const isVideoLandscape = videoW > videoH;
+            const needsRotation = isPortrait && isVideoLandscape;
+            const proj = this.controller.projectionTransform;
+            const vW = needsRotation ? videoH : videoW;
+            const vH = needsRotation ? videoW : videoH;
+            const pScale = Math.max(containerRect.width / vW, containerRect.height / vH);
+            const dW = vW * pScale;
+            const dH = vH * pScale;
+            const oX = (containerRect.width - dW) / 2;
+            const oY = (containerRect.height - dH) / 2;
+            projectedPoints = screenCoords.map((p) => {
+                let sx, sy;
+                if (needsRotation) {
+                    sx = oX + (dW / 2) - (p.y - proj[1][2]) * pScale;
+                    sy = oY + (dH / 2) + (p.x - proj[0][2]) * pScale;
+                }
+                else {
+                    sx = oX + (dW / 2) + (p.x - proj[0][2]) * pScale;
+                    sy = oY + (dH / 2) + (p.y - proj[1][2]) * pScale;
+                }
+                return { x: sx, y: sy };
+            });
+        }
         if (worldMatrix) {
             if (!this.isTracking) {
                 this.isTracking = true;
@@ -121,60 +151,25 @@ class SimpleAR {
                 this.onFound && this.onFound({ targetIndex });
             }
             this.lastMatrix = worldMatrix;
-            // We use the matrix from the controller directly (it's already filtered there)
             this._positionOverlay(modelViewTransform, targetIndex);
-            // Project points to screen coordinates
-            let projectedPoints = [];
-            if (screenCoords && screenCoords.length > 0) {
-                const containerRect = this.container.getBoundingClientRect();
-                const videoW = this.video.videoWidth;
-                const videoH = this.video.videoHeight;
-                const isPortrait = containerRect.height > containerRect.width;
-                const isVideoLandscape = videoW > videoH;
-                const needsRotation = isPortrait && isVideoLandscape;
-                const proj = this.controller.projectionTransform;
-                const vW = needsRotation ? videoH : videoW;
-                const vH = needsRotation ? videoW : videoH;
-                const pScale = Math.max(containerRect.width / vW, containerRect.height / vH);
-                const dW = vW * pScale;
-                const dH = vH * pScale;
-                const oX = (containerRect.width - dW) / 2;
-                const oY = (containerRect.height - dH) / 2;
-                projectedPoints = screenCoords.map((p) => {
-                    let sx, sy;
-                    if (needsRotation) {
-                        sx = oX + (dW / 2) - (p.y - proj[1][2]) * pScale;
-                        sy = oY + (dH / 2) + (p.x - proj[0][2]) * pScale;
-                    }
-                    else {
-                        sx = oX + (dW / 2) + (p.x - proj[0][2]) * pScale;
-                        sy = oY + (dH / 2) + (p.y - proj[1][2]) * pScale;
-                    }
-                    return { x: sx, y: sy };
-                });
-            }
-            this.onUpdateCallback && this.onUpdateCallback({
-                targetIndex,
-                worldMatrix,
-                screenCoords: projectedPoints,
-                reliabilities,
-                stabilities
-            });
         }
         else {
             if (this.isTracking) {
                 this.isTracking = false;
                 this.overlay && (this.overlay.style.opacity = '0');
                 this.onLost && this.onLost({ targetIndex });
-                this.onUpdateCallback && this.onUpdateCallback({
-                    targetIndex,
-                    worldMatrix: null,
-                    screenCoords: [],
-                    reliabilities: [],
-                    stabilities: []
-                });
             }
         }
+        // Always notify the callback if we have points, or if we just lost tracking
+        if (projectedPoints.length > 0 || (worldMatrix === null && data.type === 'updateMatrix')) {
+            this.onUpdateCallback && this.onUpdateCallback({
+                targetIndex,
+                worldMatrix,
+                screenCoords: projectedPoints,
+                reliabilities: reliabilities || [],
+                stabilities: stabilities || []
+            });
+        }
     }
     _positionOverlay(mVT, targetIndex) {
         if (!this.overlay || !this.markerDimensions[targetIndex])

package/dist/react/TaptappAR.js

@@ -12,13 +12,20 @@ export const TaptappAR = ({ config, className = "", showScanningOverlay = true,
         const url = config.videoSrc.toLowerCase().split('?')[0];
         return videoExtensions.some(ext => url.endsWith(ext)) || config.videoSrc.includes('video');
     }, [config.videoSrc]);
-    return (_jsxs("div", { className: `taptapp-ar-wrapper ${className} ${status}`, style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [showScanningOverlay && status === "scanning" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-scanning", children: _jsxs("div", { className: "scanning-content", children: [_jsxs("div", { className: "scanning-frame", children: [_jsx("img", { className: "target-preview", src: config.targetImageSrc, alt: "Target", crossOrigin: "anonymous" }), _jsx("div", { className: "scanning-line" })] }), _jsx("p", { className: "scanning-text", children: "Apunta a la imagen para comenzar" })] }) })), showErrorOverlay && status === "error" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-error", children: _jsxs("div", { className: "error-content", children: [_jsx("span", { className: "error-icon", children: "\u26A0\uFE0F" }), _jsx("p", { className: "error-title", children: "No se pudo iniciar AR" }), _jsx("p", { className: "error-text", children: "Verifica los permisos de c\u00E1mara" }), _jsx("button", { className: "retry-btn", onClick: () => window.location.reload(), children: "Reintentar" })] }) })), _jsx("div", { ref: containerRef, className: "taptapp-ar-container", onClick: toggleVideo, style: { width: '100%', height: '100%' }, children: isVideo ? (_jsx("video", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc, preload: "auto", loop: true, playsInline: true, muted: true, crossOrigin: "anonymous" })) : (_jsx("img", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc || config.targetImageSrc, crossOrigin: "anonymous", alt: "AR Overlay" })) }), status === "tracking" && (_jsx("div", { className: "taptapp-ar-points-overlay", children: trackedPoints.filter(p => p.reliability > 0.7).map((point, i) => (_jsx("div", { className: "tracking-point", style: {
-                        left: `${point.x}px`,
-                        top: `${point.y}px`,
-                        width: `${(2 + point.reliability * 6) * (0.4 + point.stability * 0.6)}px`,
-                        height: `${(2 + point.reliability * 6) * (0.4 + point.stability * 0.6)}px`,
-                        opacity: (0.3 + (point.reliability * 0.4)) * (0.2 + point.stability * 0.8)
-                    } }, i))) })), _jsx("style", { children: `
+    return (_jsxs("div", { className: `taptapp-ar-wrapper ${className} ${status}`, style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [showScanningOverlay && status === "scanning" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-scanning", children: _jsxs("div", { className: "scanning-content", children: [_jsxs("div", { className: "scanning-frame", children: [_jsx("img", { className: "target-preview", src: config.targetImageSrc, alt: "Target", crossOrigin: "anonymous" }), _jsx("div", { className: "scanning-line" })] }), _jsx("p", { className: "scanning-text", children: "Apunta a la imagen para comenzar" })] }) })), showErrorOverlay && status === "error" && (_jsx("div", { className: "taptapp-ar-overlay taptapp-ar-error", children: _jsxs("div", { className: "error-content", children: [_jsx("span", { className: "error-icon", children: "\u26A0\uFE0F" }), _jsx("p", { className: "error-title", children: "No se pudo iniciar AR" }), _jsx("p", { className: "error-text", children: "Verifica los permisos de c\u00E1mara" }), _jsx("button", { className: "retry-btn", onClick: () => window.location.reload(), children: "Reintentar" })] }) })), _jsx("div", { ref: containerRef, className: "taptapp-ar-container", onClick: toggleVideo, style: { width: '100%', height: '100%' }, children: isVideo ? (_jsx("video", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc, preload: "auto", loop: true, playsInline: true, muted: true, crossOrigin: "anonymous" })) : (_jsx("img", { ref: overlayRef, className: "taptapp-ar-overlay-element", src: config.videoSrc || config.targetImageSrc, crossOrigin: "anonymous", alt: "AR Overlay" })) }), trackedPoints.length > 0 && (_jsx("div", { className: "taptapp-ar-points-overlay", style: { opacity: status === "tracking" ? 1 : 0.6 }, children: trackedPoints
+                    .map((point, i) => {
+                    const isStable = point.stability > 0.8 && point.reliability > 0.5;
+                    const size = (2 + point.reliability * 6) * (0.6 + point.stability * 0.4);
+                    return (_jsx("div", { className: `tracking-point ${!isStable ? 'flickering' : ''}`, style: {
+                            left: `${point.x}px`,
+                            top: `${point.y}px`,
+                            width: `${size}px`,
+                            height: `${size}px`,
+                            opacity: (0.3 + (point.reliability * 0.5)) * (0.2 + point.stability * 0.8),
+                            backgroundColor: isStable ? 'black' : '#00ff00',
+                            boxShadow: isStable ? '0 0 2px rgba(255, 255, 255, 0.8)' : '0 0 8px #00ff00'
+                        } }, i));
+                }) })), _jsx("style", { children: `
                 .taptapp-ar-wrapper {
                     background: #000;
                     color: white;
@@ -114,11 +121,15 @@ export const TaptappAR = ({ config, className = "", showScanningOverlay = true,
                 .tracking-point {
                     position: absolute;
                     background: black;
-                    border: 1px solid rgba(255,255,255,0.5); /* Better contrast */
+                    border: 1px solid rgba(255,255,255,0.5);
                     border-radius: 50%;
                     transform: translate(-50%, -50%);
                     box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
                     pointer-events: none;
+                    transition: background-color 0.3s ease, box-shadow 0.3s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
+                }
+                .tracking-point.flickering {
+                    z-index: 101;
                 }
             ` })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.80",
+    "version": "1.0.82",
     "description": "Ultra-fast Augmented Reality (AR) SDK for Node.js and Browser. Image tracking with 100% pure JavaScript, zero-dependencies, and high-performance compilation.",
     "keywords": [
         "augmented reality",
@@ -51,7 +51,8 @@
     "scripts": {
         "build": "tsc",
         "prepublishOnly": "npm run build",
-        "test": "vitest"
+        "test": "vitest",
+        "test:react": "vite --port 4321 --open tests/react-test.html"
     },
     "peerDependencies": {
         "aframe": ">=1.5.0",

package/src/compiler/controller.ts

@@ -264,58 +264,80 @@ class Controller {
 
         const state = this.trackingStates[targetIndex];
         if (!state.pointStabilities) state.pointStabilities = [];
+        if (!state.lastScreenCoords) state.lastScreenCoords = [];
+
         if (!state.pointStabilities[octaveIndex]) {
-            // Initialize stabilities for this octave if not exists
             const numPoints = (this.tracker as any).prebuiltData[targetIndex][octaveIndex].px.length;
-            state.pointStabilities[octaveIndex] = new Float32Array(numPoints).fill(0.5); // Start at 0.5
+            state.pointStabilities[octaveIndex] = new Float32Array(numPoints).fill(0);
+            state.lastScreenCoords[octaveIndex] = new Array(numPoints).fill(null);
         }
 
         const stabilities = state.pointStabilities[octaveIndex];
-        const currentStabilities: number[] = [];
+        const lastCoords = state.lastScreenCoords[octaveIndex];
 
-        // Update all points in this octave
+        // Update stability for ALL points in the current octave
         for (let i = 0; i < stabilities.length; i++) {
-            const isTracked = indices.includes(i);
-            if (isTracked) {
-                stabilities[i] = Math.min(1.0, stabilities[i] + 0.35); // Fast recovery (approx 3 frames)
+            const isCurrentlyTracked = indices.includes(i);
+            if (isCurrentlyTracked) {
+                const idxInResult = indices.indexOf(i);
+                stabilities[i] = Math.min(1.0, stabilities[i] + 0.4); // Fast attack
+                lastCoords[i] = screenCoords[idxInResult]; // Update last known position
             } else {
-                stabilities[i] = Math.max(0.0, stabilities[i] - 0.12); // Slightly more forgiving loss
+                stabilities[i] = Math.max(0.0, stabilities[i] - 0.08); // Slow decay (approx 12 frames/0.2s)
             }
         }
 
-        // Collect stabilities and FILTER OUT excessive flickerers (Dead Zone)
-        const filteredWorldCoords = [];
-        const filteredScreenCoords = [];
-        const filteredStabilities = [];
-
-        for (let i = 0; i < indices.length; i++) {
-            const s = stabilities[indices[i]];
-            if (s > 0.3) { // Hard Cutoff: points with <30% stability are ignored
-                filteredWorldCoords.push(worldCoords[i]);
-                filteredScreenCoords.push(screenCoords[i]);
-                filteredStabilities.push(s);
+        // Collect points for the UI: both currently tracked AND hibernating
+        const finalScreenCoords: any[] = [];
+        const finalReliabilities: number[] = [];
+        const finalStabilities: number[] = [];
+        const finalWorldCoords: any[] = [];
+
+        for (let i = 0; i < stabilities.length; i++) {
+            if (stabilities[i] > 0) {
+                const isCurrentlyTracked = indices.includes(i);
+                finalScreenCoords.push(lastCoords[i]);
+                finalStabilities.push(stabilities[i]);
+
+                if (isCurrentlyTracked) {
+                    const idxInResult = indices.indexOf(i);
+                    finalReliabilities.push(reliabilities[idxInResult]);
+                    finalWorldCoords.push(worldCoords[idxInResult]);
+                } else {
+                    finalReliabilities.push(0); // Hibernating points have 0 reliability
+                }
             }
         }
 
-        // STRICT QUALITY CHECK: Prevent "sticky" tracking on background noise.
-        // We require a minimum number of high-confidence AND STABLE points.
-        const stableAndReliable = reliabilities.filter((r: number, idx: number) => r > 0.75 && stabilities[indices[idx]] > 0.5).length;
+        // STRICT QUALITY CHECK: We only update the transform if we have enough HIGH CONFIDENCE points
+        const stableAndReliable = reliabilities.filter((r: number, idx: number) => r > 0.8 && stabilities[indices[idx]] > 0.6).length;
 
-        if (stableAndReliable < 6 || filteredWorldCoords.length < 8) {
-            return { modelViewTransform: null, screenCoords: [], reliabilities: [], stabilities: [] };
+        if (stableAndReliable < 6 || finalWorldCoords.length < 8) {
+            return {
+                modelViewTransform: null,
+                screenCoords: finalScreenCoords,
+                reliabilities: finalReliabilities,
+                stabilities: finalStabilities
+            };
         }
 
         const modelViewTransform = await this._workerTrackUpdate(lastModelViewTransform, {
-            worldCoords: filteredWorldCoords,
-            screenCoords: filteredScreenCoords,
-            stabilities: filteredStabilities
+            worldCoords: finalWorldCoords,
+            screenCoords: finalWorldCoords.map((_, i) => {
+                const globalIdx = indices[i];
+                return lastCoords[globalIdx];
+            }),
+            stabilities: finalWorldCoords.map((_, i) => {
+                const globalIdx = indices[i];
+                return stabilities[globalIdx];
+            })
         });
 
         return {
             modelViewTransform,
-            screenCoords: filteredScreenCoords,
-            reliabilities: reliabilities.filter((_, idx) => stabilities[indices[idx]] > 0.3),
-            stabilities: filteredStabilities
+            screenCoords: finalScreenCoords,
+            reliabilities: finalReliabilities,
+            stabilities: finalStabilities
         };
     }
 
@@ -371,9 +393,10 @@ class Controller {
                         );
                         if (result === null || result.modelViewTransform === null) {
                             trackingState.isTracking = false;
-                            trackingState.screenCoords = [];
-                            trackingState.reliabilities = [];
-                            trackingState.stabilities = [];
+                            // Keep points for the last update so they can be shown as it "asoma"
+                            trackingState.screenCoords = result?.screenCoords || [];
+                            trackingState.reliabilities = result?.reliabilities || [];
+                            trackingState.stabilities = result?.stabilities || [];
                         } else {
                             trackingState.currentModelViewTransform = result.modelViewTransform;
                             trackingState.screenCoords = result.screenCoords;
@@ -387,29 +410,33 @@ class Controller {
 
                     if (wasShowing && !trackingState.showing) {
                         trackingState.trackingMatrix = null;
-                        this.onUpdate && this.onUpdate({ type: "updateMatrix", targetIndex: i, worldMatrix: null });
                         this.featureManager.notifyUpdate({ type: "reset", targetIndex: i });
                     }
 
-                    if (trackingState.showing) {
-                        const worldMatrix = this._glModelViewMatrix(trackingState.currentModelViewTransform, i);
+                    // Always notify update if we have points or if visibility changed
+                    if (trackingState.showing || (trackingState.screenCoords && trackingState.screenCoords.length > 0) || (wasShowing && !trackingState.showing)) {
+                        const worldMatrix = trackingState.showing ? this._glModelViewMatrix(trackingState.currentModelViewTransform, i) : null;
+
+                        let finalMatrix = null;
 
-                        // Calculate confidence score based on point stability
-                        const stabilities = trackingState.stabilities || [];
-                        const avgStability = stabilities.length > 0
-                            ? stabilities.reduce((a: number, b: number) => a + b, 0) / stabilities.length
-                            : 0;
+                        if (worldMatrix) {
+                            // Calculate confidence score based on point stability
+                            const stabilities = trackingState.stabilities || [];
+                            const avgStability = stabilities.length > 0
+                                ? stabilities.reduce((a: number, b: number) => a + b, 0) / stabilities.length
+                                : 0;
 
-                        const filteredMatrix = this.featureManager.applyWorldMatrixFilters(i, worldMatrix, { stability: avgStability });
-                        trackingState.trackingMatrix = filteredMatrix;
+                            const filteredMatrix = this.featureManager.applyWorldMatrixFilters(i, worldMatrix, { stability: avgStability });
+                            trackingState.trackingMatrix = filteredMatrix;
 
-                        let finalMatrix = [...filteredMatrix];
+                            finalMatrix = [...filteredMatrix];
 
-                        const isInputRotated = input.width === this.inputHeight && input.height === this.inputWidth;
-                        if (isInputRotated) {
-                            const rotationFeature = this.featureManager.getFeature<AutoRotationFeature>("auto-rotation");
-                            if (rotationFeature) {
-                                finalMatrix = rotationFeature.rotate(finalMatrix);
+                            const isInputRotated = input.width === this.inputHeight && input.height === this.inputWidth;
+                            if (isInputRotated) {
+                                const rotationFeature = this.featureManager.getFeature<AutoRotationFeature>("auto-rotation");
+                                if (rotationFeature) {
+                                    finalMatrix = rotationFeature.rotate(finalMatrix);
+                                }
                             }
                         }
 

package/src/compiler/simple-ar.ts

@@ -165,6 +165,38 @@ class SimpleAR {
 
         const { targetIndex, worldMatrix, modelViewTransform, screenCoords, reliabilities, stabilities } = data;
 
+        // Project points to screen coordinates
+        let projectedPoints = [];
+        if (screenCoords && screenCoords.length > 0) {
+            const containerRect = this.container.getBoundingClientRect();
+            const videoW = this.video!.videoWidth;
+            const videoH = this.video!.videoHeight;
+            const isPortrait = containerRect.height > containerRect.width;
+            const isVideoLandscape = videoW > videoH;
+            const needsRotation = isPortrait && isVideoLandscape;
+            const proj = this.controller!.projectionTransform;
+
+            const vW = needsRotation ? videoH : videoW;
+            const vH = needsRotation ? videoW : videoH;
+            const pScale = Math.max(containerRect.width / vW, containerRect.height / vH);
+            const dW = vW * pScale;
+            const dH = vH * pScale;
+            const oX = (containerRect.width - dW) / 2;
+            const oY = (containerRect.height - dH) / 2;
+
+            projectedPoints = screenCoords.map((p: any) => {
+                let sx, sy;
+                if (needsRotation) {
+                    sx = oX + (dW / 2) - (p.y - proj[1][2]) * pScale;
+                    sy = oY + (dH / 2) + (p.x - proj[0][2]) * pScale;
+                } else {
+                    sx = oX + (dW / 2) + (p.x - proj[0][2]) * pScale;
+                    sy = oY + (dH / 2) + (p.y - proj[1][2]) * pScale;
+                }
+                return { x: sx, y: sy };
+            });
+        }
+
         if (worldMatrix) {
             if (!this.isTracking) {
                 this.isTracking = true;
@@ -173,63 +205,24 @@ class SimpleAR {
             }
 
             this.lastMatrix = worldMatrix;
-
-            // We use the matrix from the controller directly (it's already filtered there)
             this._positionOverlay(modelViewTransform, targetIndex);
-
-            // Project points to screen coordinates
-            let projectedPoints = [];
-            if (screenCoords && screenCoords.length > 0) {
-                const containerRect = this.container.getBoundingClientRect();
-                const videoW = this.video!.videoWidth;
-                const videoH = this.video!.videoHeight;
-                const isPortrait = containerRect.height > containerRect.width;
-                const isVideoLandscape = videoW > videoH;
-                const needsRotation = isPortrait && isVideoLandscape;
-                const proj = this.controller!.projectionTransform;
-
-                const vW = needsRotation ? videoH : videoW;
-                const vH = needsRotation ? videoW : videoH;
-                const pScale = Math.max(containerRect.width / vW, containerRect.height / vH);
-                const dW = vW * pScale;
-                const dH = vH * pScale;
-                const oX = (containerRect.width - dW) / 2;
-                const oY = (containerRect.height - dH) / 2;
-
-                projectedPoints = screenCoords.map((p: any) => {
-                    let sx, sy;
-                    if (needsRotation) {
-                        sx = oX + (dW / 2) - (p.y - proj[1][2]) * pScale;
-                        sy = oY + (dH / 2) + (p.x - proj[0][2]) * pScale;
-                    } else {
-                        sx = oX + (dW / 2) + (p.x - proj[0][2]) * pScale;
-                        sy = oY + (dH / 2) + (p.y - proj[1][2]) * pScale;
-                    }
-                    return { x: sx, y: sy };
-                });
+        } else {
+            if (this.isTracking) {
+                this.isTracking = false;
+                this.overlay && (this.overlay.style.opacity = '0');
+                this.onLost && this.onLost({ targetIndex });
             }
+        }
 
+        // Always notify the callback if we have points, or if we just lost tracking
+        if (projectedPoints.length > 0 || (worldMatrix === null && data.type === 'updateMatrix')) {
             this.onUpdateCallback && this.onUpdateCallback({
                 targetIndex,
                 worldMatrix,
                 screenCoords: projectedPoints,
-                reliabilities,
-                stabilities
+                reliabilities: reliabilities || [],
+                stabilities: stabilities || []
             });
-
-        } else {
-            if (this.isTracking) {
-                this.isTracking = false;
-                this.overlay && (this.overlay.style.opacity = '0');
-                this.onLost && this.onLost({ targetIndex });
-                this.onUpdateCallback && this.onUpdateCallback({
-                    targetIndex,
-                    worldMatrix: null as any,
-                    screenCoords: [],
-                    reliabilities: [],
-                    stabilities: []
-                });
-            }
         }
     }
 

package/src/react/TaptappAR.tsx

@@ -90,21 +90,29 @@ export const TaptappAR: React.FC<TaptappARProps> = ({
             </div>
 
             {/* Tracking Points Layer */}
-            {status === "tracking" && (
-                <div className="taptapp-ar-points-overlay">
-                    {trackedPoints.filter(p => p.reliability > 0.7).map((point, i) => (
-                        <div
-                            key={i}
-                            className="tracking-point"
-                            style={{
-                                left: `${point.x}px`,
-                                top: `${point.y}px`,
-                                width: `${(2 + point.reliability * 6) * (0.4 + point.stability * 0.6)}px`,
-                                height: `${(2 + point.reliability * 6) * (0.4 + point.stability * 0.6)}px`,
-                                opacity: (0.3 + (point.reliability * 0.4)) * (0.2 + point.stability * 0.8)
-                            }}
-                        />
-                    ))}
+            {trackedPoints.length > 0 && (
+                <div className="taptapp-ar-points-overlay" style={{ opacity: status === "tracking" ? 1 : 0.6 }}>
+                    {trackedPoints
+                        .map((point, i) => {
+                            const isStable = point.stability > 0.8 && point.reliability > 0.5;
+                            const size = (2 + point.reliability * 6) * (0.6 + point.stability * 0.4);
+
+                            return (
+                                <div
+                                    key={i}
+                                    className={`tracking-point ${!isStable ? 'flickering' : ''}`}
+                                    style={{
+                                        left: `${point.x}px`,
+                                        top: `${point.y}px`,
+                                        width: `${size}px`,
+                                        height: `${size}px`,
+                                        opacity: (0.3 + (point.reliability * 0.5)) * (0.2 + point.stability * 0.8),
+                                        backgroundColor: isStable ? 'black' : '#00ff00',
+                                        boxShadow: isStable ? '0 0 2px rgba(255, 255, 255, 0.8)' : '0 0 8px #00ff00'
+                                    }}
+                                />
+                            );
+                        })}
                 </div>
             )}
 
@@ -204,11 +212,15 @@ export const TaptappAR: React.FC<TaptappARProps> = ({
                 .tracking-point {
                     position: absolute;
                     background: black;
-                    border: 1px solid rgba(255,255,255,0.5); /* Better contrast */
+                    border: 1px solid rgba(255,255,255,0.5);
                     border-radius: 50%;
                     transform: translate(-50%, -50%);
                     box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
                     pointer-events: none;
+                    transition: background-color 0.3s ease, box-shadow 0.3s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
+                }
+                .tracking-point.flickering {
+                    z-index: 101;
                 }
             `}</style>
         </div>