kyd-shared-badge 0.2.29 → 0.2.30

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -20,7 +20,7 @@ import Skills from './components/Skills';
 import CategoryBars from './components/CategoryBars';
 import SkillsAppendixTable from './components/SkillsAppendixTable';
 import { BusinessRulesProvider } from './components/BusinessRulesContext';
-import AnimateOnMount from './components/AnimateOnMount';
+import Reveal from './components/Reveal';
 
 // const hexToRgba = (hex: string, alpha: number) => {
 //   const clean = hex.replace('#', '');
@@ -139,7 +139,7 @@ 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 */}
-      <AnimateOnMount delayMs={40} offsetY={8}>
+      <Reveal offsetY={8} durationMs={500}>
         <ReportHeader 
             badgeId={badgeId}
             developerName={badgeData.developerName}
@@ -150,16 +150,15 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
             summary={report_summary}
             countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
         />
-      </AnimateOnMount>
-      <AnimateOnMount delayMs={80} offsetY={10}>
-        <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)' }}
-        >
+      </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)' }}
+      >
 
         <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) */}
               {(() => {
@@ -168,7 +167,7 @@ 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 (
-                  <AnimateOnMount delayMs={120} offsetY={8}>
+                  <Reveal delayMs={0} offsetY={12}>
                     <GaugeCard
                       key={'technical-card'}
                       title={'KYD Technical'}
@@ -178,7 +177,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
                       topMoversTitle={'Top Score Movers'}
                     />
-                  </AnimateOnMount>
+                  </Reveal>
                 );
               })()}
 
@@ -190,7 +189,7 @@ 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 (
-                  <AnimateOnMount delayMs={160} offsetY={8}>
+                  <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.'}
@@ -200,7 +199,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       topMoversTitle={'Top Score Movers'}
                       tooltipText={tooltip}
                     />
-                  </AnimateOnMount>
+                  </Reveal>
                 );
               })()}
 
@@ -210,7 +209,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                 const label = 'AI Transparency'// TODO: calculate label frontend
                 const topMovers = ai_usage_summary?.key_findings || []
                 return (
-                  <AnimateOnMount delayMs={200} offsetY={8}>
+                  <Reveal delayMs={160} offsetY={12}>
                     <GaugeCard
                       key={'ai-card'}
                       title={'KYD AI'}
@@ -221,7 +220,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
                       topMoversTitle={'Key Findings'}
                     />
-                  </AnimateOnMount>
+                  </Reveal>
                 );
               })()}
             </div>
@@ -230,9 +229,9 @@ 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 */}
-              <AnimateOnMount delayMs={120} offsetY={8}>
+              <Reveal>
                 <div className="">
                   <GraphInsights
                     graphInsights={graphInsights}
@@ -241,14 +240,13 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                     scoringSummary={scoringSummary}
                   />
                 </div>
-              </AnimateOnMount>
+              </Reveal>
 
               {/* category bars and contributing factors */}
-              <AnimateOnMount delayMs={160} offsetY={10}>
               <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[]}
@@ -257,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) => {
@@ -289,30 +287,28 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       );
                     })}
                   </div>
-                </div>
+                </Reveal>
               </div>
-              </AnimateOnMount>
 
-              <AnimateOnMount delayMs={180} offsetY={10}>
+              <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>
-              </AnimateOnMount>
+              </Reveal>
               
             </div>
           </div>
 
 
 
-          <AnimateOnMount delayMs={200} offsetY={10}>
           <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 */}
-            <AnimateOnMount delayMs={220} offsetY={8}>
+            <Reveal>
               <div className="">
                 <GraphInsights
                   graphInsights={graphInsights}
@@ -321,11 +317,10 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                   scoringSummary={scoringSummary}
                 />
               </div>
-            </AnimateOnMount>
-            <AnimateOnMount delayMs={240} offsetY={10}>
+            </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[]}
@@ -334,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) => {
@@ -365,13 +360,12 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                     );
                   })}
                 </div>
-              </div>
+              </Reveal>
             </div>
-            </AnimateOnMount>
 
             {/* 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} />
@@ -383,7 +377,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                           </p>
                       </div>
                   </div>
-              </div>
+              </Reveal>
             ) : (
               <>
                 {(() => {
@@ -393,8 +387,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                   const fbiMatches = ss?.fbi_matches && (ss.fbi_matches.length > 0);
                   if (!(ofacMatches || cslDetails || fbiMatches)) return null;
                   return (
-                    <AnimateOnMount delayMs={260} offsetY={8}>
-                    <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 && (
@@ -454,41 +447,38 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                           </div>
                         </div>
                       )}
-                    </div>
-                    </AnimateOnMount>
+                    </Reveal>
                   );
                 })()}
-                <AnimateOnMount delayMs={280} offsetY={8}>
+                <Reveal>
                   <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
-                </AnimateOnMount>
+                </Reveal>
               </>
             )}
 
           </div>
-          </AnimateOnMount>
 
           {/* Connected Platforms */}
-          <AnimateOnMount delayMs={260} offsetY={10}>
+          <Reveal>
             <ConnectedPlatforms accounts={connected} />
-          </AnimateOnMount>
+          </Reveal>
 
         
-          <AnimateOnMount delayMs={280} offsetY={10}>
           <div className="pt-8">
             <h3 className={'text-2xl font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Appendix: Data Sources</h3>
             <div className="space-y-8">
 
               {/* Skills */}
-              <AnimateOnMount delayMs={300} offsetY={8}>
+              <Reveal>
                 <div>
                   <h4 id="appendix-skills" className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Skills</h4>
                   <SkillsAppendixTable skillsAll={skillsAll} />
                 </div>
-              </AnimateOnMount>
+              </Reveal>
 
               {/* Observations */}
               {Array.isArray(graphInsights?.business_rules_all) && graphInsights.business_rules_all.length > 0 && (
-                <AnimateOnMount delayMs={320} offsetY={8}>
+                <Reveal>
                   <div>
                     <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Observations</h4>
                     <AppendixTables
@@ -499,12 +489,12 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       developerName={developerName || 'this developer'}
                     />
                   </div>
-                </AnimateOnMount>
+                </Reveal>
               )}
               
               {/* Sanctions & Watchlists */}
               {!badgeData.optOutScreening && screening_sources && (
-                <AnimateOnMount delayMs={340} offsetY={8}>
+                <Reveal>
                   <div>
                     <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
                     {(() => {
@@ -527,15 +517,14 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                           />
                       );
                   })()}
-                </div>
-                </AnimateOnMount>
+                  </div>
+                </Reveal>
               )}
 
             </div>
           </div>
-          </AnimateOnMount>
 
-          <AnimateOnMount delayMs={300} offsetY={6}>
+          <Reveal>
             <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
                 Report Completed: {new Date(updatedAt).toLocaleString(undefined, {
                     year: 'numeric',
@@ -546,15 +535,16 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                     timeZoneName: 'short',
                 })}
             </div>
-          </AnimateOnMount>
+          </Reveal>
         </div>
       </div>
-      </AnimateOnMount>
-      <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/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;
+}
+
+

package/src/components/AnimateOnMount.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import React from 'react';
-
-type AnimateOnMountProps = {
-  children: React.ReactNode;
-  delayMs?: number;
-  durationMs?: number;
-  offsetY?: number; // positive moves up during animation
-  className?: string;
-  style?: React.CSSProperties;
-  as?: 'div' | 'section' | 'span' | 'header' | 'footer' | 'main' | 'article' | 'aside' | 'nav';
-};
-
-const AnimateOnMount: React.FC<AnimateOnMountProps> = ({
-  children,
-  delayMs = 60,
-  durationMs = 420,
-  offsetY = 10,
-  className,
-  style,
-  as = 'div',
-}) => {
-  const [mounted, setMounted] = React.useState(false);
-  const reduceMotion = React.useMemo(() => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
-    try {
-      return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    } catch {
-      return false;
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (reduceMotion) {
-      // Render immediately with no animation
-      setMounted(true);
-      return;
-    }
-    const id = requestAnimationFrame(() => setMounted(true));
-    return () => cancelAnimationFrame(id);
-  }, [reduceMotion]);
-
-  const Component = as as any;
-  const transition = `opacity ${durationMs}ms ease, transform ${durationMs}ms ease`;
-
-  return (
-    <Component
-      className={className}
-      style={{
-        opacity: mounted ? 1 : 0,
-        transform: mounted || reduceMotion ? 'translateY(0px)' : `translateY(${offsetY}px)`,
-        transition: reduceMotion ? undefined : transition,
-        transitionDelay: reduceMotion ? undefined : `${delayMs}ms`,
-        willChange: reduceMotion ? undefined : 'opacity, transform',
-        ...style,
-      }}
-    >
-      {children}
-    </Component>
-  );
-};
-
-export default AnimateOnMount;
-
-