kyd-shared-badge 0.2.28 → 0.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -20,6 +20,7 @@ import Skills from './components/Skills';
 import CategoryBars from './components/CategoryBars';
 import SkillsAppendixTable from './components/SkillsAppendixTable';
 import { BusinessRulesProvider } from './components/BusinessRulesContext';
+import Reveal from './components/Reveal';
 
 // const hexToRgba = (hex: string, alpha: number) => {
 //   const clean = hex.replace('#', '');
@@ -138,16 +139,18 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
     <BusinessRulesProvider items={graphInsights?.business_rules_all}>
     <div className={`${wrapperMaxWidth} mx-auto`}>
       {/* Share controls removed; app-level pages render their own actions */}
-      <ReportHeader 
-          badgeId={badgeId}
-          developerName={badgeData.developerName}
-          updatedAt={updatedAt}
-          score={overallFinalPercent || 0}
-          isPublic={true}
-          badgeImageUrl={badgeData.badgeImageUrl || ''}
-          summary={report_summary}
-          countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
-      />
+      <Reveal offsetY={8} durationMs={500}>
+        <ReportHeader 
+            badgeId={badgeId}
+            developerName={badgeData.developerName}
+            updatedAt={updatedAt}
+            score={overallFinalPercent || 0}
+            isPublic={true}
+            badgeImageUrl={badgeData.badgeImageUrl || ''}
+            summary={report_summary}
+            countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
+        />
+      </Reveal>
       <div
         className={'rounded-xl shadow-xl p-6 sm:p-8 mt-8 border'}
         style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
@@ -155,7 +158,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
 
         <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
           <div className="pt-8 first:pt-0">
-            <h4 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</h4>
+            <Reveal as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
               {/* Technical semicircle gauge (refactored) */}
               {(() => {
@@ -164,15 +167,17 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                 const label = ui?.label || 'EVIDENCE';
                 const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Technical');
                 return (
-                  <GaugeCard
-                    key={'technical-card'}
-                    title={'KYD Technical'}
-                    description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
-                    percent={pct}
-                    label={label}
-                    topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                    topMoversTitle={'Top Score Movers'}
-                  />
+                  <Reveal delayMs={0} offsetY={12}>
+                    <GaugeCard
+                      key={'technical-card'}
+                      title={'KYD Technical'}
+                      description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
+                      percent={pct}
+                      label={label}
+                      topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
+                      topMoversTitle={'Top Score Movers'}
+                    />
+                  </Reveal>
                 );
               })()}
 
@@ -184,15 +189,17 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                 const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Risk');
                 const tooltip = 'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.';
                 return (
-                  <RiskCard
-                    title={'KYD Risk'}
-                    description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
-                    percentGood={pctGood}
-                    label={label}
-                    topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
-                    topMoversTitle={'Top Score Movers'}
-                    tooltipText={tooltip}
-                  />
+                  <Reveal delayMs={80} offsetY={12}>
+                    <RiskCard
+                      title={'KYD Risk'}
+                      description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
+                      percentGood={pctGood}
+                      label={label}
+                      topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
+                      topMoversTitle={'Top Score Movers'}
+                      tooltipText={tooltip}
+                    />
+                  </Reveal>
                 );
               })()}
 
@@ -202,16 +209,18 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                 const label = 'AI Transparency'// TODO: calculate label frontend
                 const topMovers = ai_usage_summary?.key_findings || []
                 return (
-                  <GaugeCard
-                    key={'ai-card'}
-                    title={'KYD AI'}
-                    description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
-                    percent={ai_usage_summary?.transparency_score}
-                    label={label}
-                    // id non-functional
-                    topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
-                    topMoversTitle={'Key Findings'}
-                  />
+                  <Reveal delayMs={160} offsetY={12}>
+                    <GaugeCard
+                      key={'ai-card'}
+                      title={'KYD AI'}
+                      description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
+                      percent={ai_usage_summary?.transparency_score}
+                      label={label}
+                      // id non-functional
+                      topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
+                      topMoversTitle={'Key Findings'}
+                    />
+                  </Reveal>
                 );
               })()}
             </div>
@@ -220,22 +229,24 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
           {/* Technical Scores */}
           <div className="mt-8" >
             <div key={'Technical'} className='pt-8 space-y-8' style={{ borderColor: 'var(--icon-button-secondary)'}}>
-              <h4 className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical</h4>
+              <Reveal as={'h4'} offsetY={8} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical</Reveal>
               {/* technical graph insights */}
-              <div className="">
-                <GraphInsights
-                  graphInsights={graphInsights}
-                  categories={genreMapping?.['Technical'] as string[]}
-                  genre={'Technical'}
-                  scoringSummary={scoringSummary}
-                />
-              </div>
+              <Reveal>
+                <div className="">
+                  <GraphInsights
+                    graphInsights={graphInsights}
+                    categories={genreMapping?.['Technical'] as string[]}
+                    genre={'Technical'}
+                    scoringSummary={scoringSummary}
+                  />
+                </div>
+              </Reveal>
 
               {/* category bars and contributing factors */}
               <div className="grid grid-cols-1 lg:grid-cols-12 w-full gap-8 items-stretch py-8 border-t" style={{ borderColor: 'var(--icon-button-secondary)'}}>
                 
                 {/* Left: Bars */}
-                <div className="lg:col-span-8 h-full">
+                <Reveal className="lg:col-span-8 h-full">
                   <CategoryBars
                     title={'Technical Category Contributions - Percentages'}
                     categories={genreMapping?.['Technical'] as string[]}
@@ -244,10 +255,10 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                     getCategoryTooltipCopy={getCategoryTooltipCopy}
                     barHeight={16}
                   />
-                </div>
+                </Reveal>
 
                 {/* Right: Contributing Factors */}
-                <div className="lg:col-span-4 w-full ml-20 flex flex-col items-start justify-start">
+                <Reveal className="lg:col-span-4 w-full ml-20 flex flex-col items-start justify-start" delayMs={80}>
                   <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
                   <div className="space-y-4">
                     {(genreMapping?.['Technical'] || []).map((cat: string) => {
@@ -276,15 +287,17 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       );
                     })}
                   </div>
-                </div>
+                </Reveal>
               </div>
 
-              <div className="pt-8 border-t" style={{ borderColor: 'var(--icon-button-secondary)'}}>
-                <h3 className={'text-xl font-bold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical - Skills Insights</h3>
-                <div className={'prose prose-sm max-w-none mb-6 space-y-4'} style={{ color: 'var(--text-secondary)' }}>
-                  <Skills skillsMatrix={skillsMatrix} skillsCategoryRadar={graphInsights?.skillsCategoryRadar} />
+              <Reveal>
+                <div className="pt-8 border-t" style={{ borderColor: 'var(--icon-button-secondary)'}}>
+                  <h3 className={'text-xl font-bold mb-3'} style={{ color: 'var(--text-main)' }}>KYD Technical - Skills Insights</h3>
+                  <div className={'prose prose-sm max-w-none mb-6 space-y-4'} style={{ color: 'var(--text-secondary)' }}>
+                    <Skills skillsMatrix={skillsMatrix} skillsCategoryRadar={graphInsights?.skillsCategoryRadar} />
+                  </div>
                 </div>
-              </div>
+              </Reveal>
               
             </div>
           </div>
@@ -292,20 +305,22 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
 
 
           <div className="pt-8 space-y-8">
-            <h3 className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</h3>
+            <Reveal as={'h3'} offsetY={8} className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
             
             {/* Risk Graph Insights and Category Bars */}
-            <div className="">
-              <GraphInsights
-                graphInsights={graphInsights}
-                categories={genreMapping?.['Risk'] as string[]}
-                genre={'Risk'}
-                scoringSummary={scoringSummary}
-              />
-            </div>
+            <Reveal>
+              <div className="">
+                <GraphInsights
+                  graphInsights={graphInsights}
+                  categories={genreMapping?.['Risk'] as string[]}
+                  genre={'Risk'}
+                  scoringSummary={scoringSummary}
+                />
+              </div>
+            </Reveal>
             <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-stretch py-8 border-y" style={{ borderColor: 'var(--icon-button-secondary)' }}>
               {/* Left: Bars */}
-              <div className="lg:col-span-8 h-full">
+              <Reveal className="lg:col-span-8 h-full">
                 <CategoryBars
                   title={'KYD Risk - Category Insights'}
                   categories={genreMapping?.['Risk'] as string[]}
@@ -314,9 +329,9 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                   getCategoryTooltipCopy={getCategoryTooltipCopy}
                   barHeight={16}
                 />
-              </div>
+              </Reveal>
               {/* Right: Contributing Factors */}
-              <div className="lg:col-span-4 w-full ml-20 flex flex-col items-start justify-start">
+              <Reveal className="lg:col-span-4 w-full ml-20 flex flex-col items-start justify-start" delayMs={80}>
                 <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
                 <div className="space-y-4">
                   {genreMapping?.['Risk']?.map((cat: string) => {
@@ -345,12 +360,12 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                     );
                   })}
                 </div>
-              </div>
+              </Reveal>
             </div>
 
             {/* cyber risk display */}
             {badgeData.optOutScreening ? (
-              <div className={'p-4 rounded-lg border'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
+              <Reveal className={'p-4 rounded-lg border'} style={{ backgroundColor: 'var(--icon-button-secondary)', borderColor: 'var(--icon-button-secondary)' }}>
                   <div className="flex items-start">
                       <span className="h-5 w-5 mr-3 mt-0.5 flex-shrink-0" style={{ color: yellow }}>
                           <FiAlertTriangle size={20} />
@@ -362,7 +377,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                           </p>
                       </div>
                   </div>
-              </div>
+              </Reveal>
             ) : (
               <>
                 {(() => {
@@ -372,7 +387,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                   const fbiMatches = ss?.fbi_matches && (ss.fbi_matches.length > 0);
                   if (!(ofacMatches || cslDetails || fbiMatches)) return null;
                   return (
-                    <div className={'mb-8 rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
+                    <Reveal className={'mb-8 rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' }}>
                       <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>3A. Sanctions Matches</h4>
                       {/* OFAC matches */}
                       {ofacMatches && (
@@ -432,17 +447,21 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                           </div>
                         </div>
                       )}
-                    </div>
+                    </Reveal>
                   );
                 })()}
-                <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+                <Reveal>
+                  <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+                </Reveal>
               </>
             )}
 
           </div>
 
           {/* Connected Platforms */}
-          <ConnectedPlatforms accounts={connected} />
+          <Reveal>
+            <ConnectedPlatforms accounts={connected} />
+          </Reveal>
 
         
           <div className="pt-8">
@@ -450,30 +469,35 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
             <div className="space-y-8">
 
               {/* Skills */}
-              <div>
-                <h4 id="appendix-skills" className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Skills</h4>
-                <SkillsAppendixTable skillsAll={skillsAll} />
-              </div>
+              <Reveal>
+                <div>
+                  <h4 id="appendix-skills" className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Skills</h4>
+                  <SkillsAppendixTable skillsAll={skillsAll} />
+                </div>
+              </Reveal>
 
               {/* Observations */}
               {Array.isArray(graphInsights?.business_rules_all) && graphInsights.business_rules_all.length > 0 && (
-                <div>
-                  <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Observations</h4>
-                  <AppendixTables
-                    type="business_rules"
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    sources={graphInsights.business_rules_all as any}
-                    searchedAt={updatedAt}
-                    developerName={developerName || 'this developer'}
-                  />
-                </div>
+                <Reveal>
+                  <div>
+                    <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Observations</h4>
+                    <AppendixTables
+                      type="business_rules"
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      sources={graphInsights.business_rules_all as any}
+                      searchedAt={updatedAt}
+                      developerName={developerName || 'this developer'}
+                    />
+                  </div>
+                </Reveal>
               )}
               
               {/* Sanctions & Watchlists */}
               {!badgeData.optOutScreening && screening_sources && (
-                <div>
-                  <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
-                  {(() => {
+                <Reveal>
+                  <div>
+                    <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
+                    {(() => {
                       const ofacProvided = screening_sources.ofac_screen?.sources || [];
                       const lists = [...(screening_sources.ofac_lists || []), ...ofacProvided];
                       const seen: { [k: string]: boolean } = {};
@@ -493,29 +517,34 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                           />
                       );
                   })()}
-                </div>
+                  </div>
+                </Reveal>
               )}
 
             </div>
           </div>
 
-          <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
-              Report Completed: {new Date(updatedAt).toLocaleString(undefined, {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                  hour: 'numeric',
-                  minute: '2-digit',
-                  timeZoneName: 'short',
-              })}
-          </div>
+          <Reveal>
+            <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
+                Report Completed: {new Date(updatedAt).toLocaleString(undefined, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    timeZoneName: 'short',
+                })}
+            </div>
+          </Reveal>
         </div>
       </div>
-      <footer className={'mt-12 pt-6 border-t'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-        <p className={'text-center text-xs max-w-4xl mx-auto'} style={{ color: 'var(--text-secondary)' }}>
-          © 2025 Know Your Developer, LLC. All rights reserved. KYD Self-Check™, and associated marks are trademarks of Know Your Developer, LLC. This document is confidential, proprietary, and intended solely for the individual or entity to whom it is addressed. Unauthorized use, disclosure, copying, or distribution of this document or any of its contents is strictly prohibited and may be unlawful. Know Your Developer, LLC assumes no responsibility or liability for any errors or omissions contained herein. Report validity subject to the terms and conditions stated on the official Know Your Developer website located at https://knowyourdeveloper.ai.
-        </p>
-      </footer>
+      <Reveal>
+        <footer className={'mt-12 pt-6 border-t'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
+          <p className={'text-center text-xs max-w-4xl mx-auto'} style={{ color: 'var(--text-secondary)' }}>
+            © 2025 Know Your Developer, LLC. All rights reserved. KYD Self-Check™, and associated marks are trademarks of Know Your Developer, LLC. This document is confidential, proprietary, and intended solely for the individual or entity to whom it is addressed. Unauthorized use, disclosure, copying, or distribution of this document or any of its contents is strictly prohibited and may be unlawful. Know Your Developer, LLC assumes no responsibility or liability for any errors or omissions contained herein. Report validity subject to the terms and conditions stated on the official Know Your Developer website located at https://knowyourdeveloper.ai.
+          </p>
+        </footer>
+      </Reveal>
     </div>
     </BusinessRulesProvider>
   );

package/src/components/Reveal.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import React, { CSSProperties, PropsWithChildren } from 'react';
+import { useInViewOnce } from './useInViewOnce';
+
+type RevealProps = PropsWithChildren<{
+  as?: keyof JSX.IntrinsicElements;
+  /** px to translate on Y axis initially */
+  offsetY?: number;
+  /** px to translate on X axis initially (rarely needed) */
+  offsetX?: number;
+  /** ms */
+  durationMs?: number;
+  /** ms */
+  delayMs?: number;
+  /** Optional className passed to the wrapper */
+  className?: string;
+  /** Optional style merged into wrapper */
+  style?: CSSProperties;
+  /** Intersection thresholds */
+  threshold?: number | number[];
+  /** Root margin for preloading */
+  rootMargin?: string;
+}>;
+
+const Reveal: React.FC<RevealProps> = ({
+  as = 'div',
+  offsetY = 12,
+  offsetX = 0,
+  durationMs = 500,
+  delayMs = 0,
+  className,
+  style,
+  threshold,
+  rootMargin,
+  children,
+}) => {
+  const Tag = as as any;
+  const { ref, hasIntersected } = useInViewOnce({ threshold, rootMargin });
+
+  // Respect reduced motion is handled in the hook by triggering immediately.
+  const baseTransform = `translate(${offsetX}px, ${offsetY}px)`;
+  const eased = 'cubic-bezier(0.22, 1, 0.36, 1)'; // subtle spring-ish ease
+
+  const inlineStyles: CSSProperties = {
+    opacity: hasIntersected ? 1 : 0,
+    transform: hasIntersected ? 'none' : baseTransform,
+    transition: `opacity ${durationMs}ms ${eased} ${delayMs}ms, transform ${durationMs}ms ${eased} ${delayMs}ms`,
+    willChange: hasIntersected ? undefined : 'opacity, transform',
+    ...style,
+  };
+
+  return (
+    <Tag ref={ref} className={className} style={inlineStyles}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Reveal;
+
+

package/src/components/RiskCard.tsx

@@ -26,9 +26,9 @@ export default function RiskCard({
   const pctGood = Math.max(0, Math.min(100, Math.round(Number(percentGood ?? 0))));
   const displayLabel = label || '';
 
-  // bar heights descending representation
-  const bars = [140, 110, 85, 60, 40];
-  let activeIndex = 0; // Default to the tallest bar (highest risk)
+  // bar heights ascending representation
+  const bars = [40, 60, 85, 110, 140];
+  let activeIndex = 0; // Default to the shortest bar (highest risk)
   if (pctGood >= 80) {
     activeIndex = 4;
   } else if (pctGood >= 60) {

package/src/components/useInViewOnce.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Observes the provided element and returns true the first time it enters the viewport.
+ * Uses IntersectionObserver under the hood and disconnects after first intersection.
+ */
+export function useInViewOnce<T extends HTMLElement>(options?: IntersectionObserverInit) {
+  const targetRef = useRef<T | null>(null);
+  const [hasIntersected, setHasIntersected] = useState<boolean>(false);
+  const [hasMounted, setHasMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (hasIntersected) return; // already observed once
+    const element = targetRef.current;
+    if (!element) return;
+
+    // Respect reduced motion
+    const prefersReducedMotion = typeof window !== 'undefined' &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReducedMotion) {
+      setHasIntersected(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries, obs) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setHasIntersected(true);
+            obs.disconnect();
+            break;
+          }
+        }
+      },
+      {
+        root: options?.root || null,
+        rootMargin: options?.rootMargin ?? '0px 0px -10% 0px',
+        threshold: options?.threshold ?? 0.1,
+      }
+    );
+
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [options?.root, options?.rootMargin, options?.threshold, hasIntersected]);
+
+  return { ref: targetRef, isVisible: hasIntersected || !hasMounted ? false : hasIntersected, hasIntersected } as const;
+}
+
+