"use client" import React, { useEffect, useRef, useState } from "react" import { motion, Transition, useInView } from "motion/react" import { TextHighlighter } from "@/components/fancy/text/text-highlighter" const HIGHLIGHT_COLOR = "hsl(80, 100%, 50%)" const DEMO_USE_IN_VIEW_OPTIONS = { once: false, initial: false, amount: 0.1 } const DEMO_TRANSITION = { type: "spring", duration: 1, delay: 0.4, bounce: 0 } const SECTION_CLASSES = "min-w-full h-full snap-start flex items-center justify-center shrink-0" const CONTAINER_CLASSES = "max-w-[240px] sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl mx-auto px-4 sm:px-6" const PARAGRAPH_CLASSES = "text-sm sm:text-base md:text-lg leading-relaxed font-overusedGrotesk mb-3 sm:mb-4 last:mb-0" function Section({ children, delay = 0, }: { children: React.ReactNode delay?: number }) { const ref = useRef(null) const isInView = useInView(ref, { once: false, margin: "-20%", amount: 0.5, }) return (

{children}

) } function Paragraph({ children }: { children: React.ReactNode }) { return

{children}

} export default function TextHighlighterDemo() { const containerRef = useRef(null) const [currentSection, setCurrentSection] = useState(1) const [scrollDirection, setScrollDirection] = useState<"ltr" | "rtl">("ltr") useEffect(() => { const container = containerRef.current if (!container) return let prevScrollLeft = container.scrollLeft const handleScroll = () => { const scrollLeft = container.scrollLeft const containerWidth = container.clientWidth const sectionIndex = Math.round(scrollLeft / containerWidth) + 1 setCurrentSection(Math.min(5, Math.max(1, sectionIndex))) const scrollDiff = scrollLeft - prevScrollLeft if (Math.abs(scrollDiff) > 5) { setScrollDirection(scrollDiff > 0 ? "ltr" : "rtl") } prevScrollLeft = scrollLeft } container.addEventListener("scroll", handleScroll) return () => container.removeEventListener("scroll", handleScroll) }, []) return (

{currentSection.toString().padStart(2, "0")}

Our object detection systems identify and locate items in real-time. From facial recognition {" "} to product identification, we deliver precision at scale. Whether it's traffic monitoring for smart cities or inventory management {" "} for retail, our AI distinguishes between people, vehicles, and objects with unmatched accuracy.

Advanced video analytics track movement across frames. Our object tracking algorithms {" "} power autonomous vehicles and security systems worldwide. Scene understanding {" "} capabilities analyze spatial relationships and context. From{` `} sports performance analysis to surveillance systems , we make sense of complex visual data.

Our OCR technology {" "} converts printed and handwritten text to digital format instantly.{" "} Document automation streamlines workflows across industries. From invoice processing to accessibility solutions , our text recognition supports multiple languages and formats with exceptional accuracy.

3D depth perception enables precise spatial understanding. Our stereo vision systems {" "} power robotic automation and quality control processes. Advanced augmented reality and virtual reality applications {" "} rely on our depth analysis for immersive, interactive experiences.

Image segmentation {" "} separates objects with pixel-perfect precision. Our{` `} enhancement algorithms {" "} restore clarity and remove noise from any visual content. Generate synthetic training data and create high-resolution imagery for machine learning models and creative applications. Transform your industry {" "} with computer vision that sees, understands, and acts on visual information like never before.

) }

Text Highlighter Scroll Demo

Instalação

Dependências

Registry dependencies