kyd-shared-badge 0.2.28 → 0.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "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 AnimateOnMount from './components/AnimateOnMount';
 
 // const hexToRgba = (hex: string, alpha: number) => {
 //   const clean = hex.replace('#', '');
@@ -138,20 +139,23 @@ 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) || []}
-      />
-      <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)' }}
-      >
+      <AnimateOnMount delayMs={40} offsetY={8}>
+        <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) || []}
+        />
+      </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)' }}
+        >
 
         <div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
           <div className="pt-8 first:pt-0">
@@ -164,15 +168,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'}
-                  />
+                  <AnimateOnMount delayMs={120} offsetY={8}>
+                    <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'}
+                    />
+                  </AnimateOnMount>
                 );
               })()}
 
@@ -184,15 +190,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}
-                  />
+                  <AnimateOnMount delayMs={160} offsetY={8}>
+                    <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}
+                    />
+                  </AnimateOnMount>
                 );
               })()}
 
@@ -202,16 +210,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'}
-                  />
+                  <AnimateOnMount delayMs={200} offsetY={8}>
+                    <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'}
+                    />
+                  </AnimateOnMount>
                 );
               })()}
             </div>
@@ -222,16 +232,19 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
             <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>
               {/* technical graph insights */}
-              <div className="">
-                <GraphInsights
-                  graphInsights={graphInsights}
-                  categories={genreMapping?.['Technical'] as string[]}
-                  genre={'Technical'}
-                  scoringSummary={scoringSummary}
-                />
-              </div>
+              <AnimateOnMount delayMs={120} offsetY={8}>
+                <div className="">
+                  <GraphInsights
+                    graphInsights={graphInsights}
+                    categories={genreMapping?.['Technical'] as string[]}
+                    genre={'Technical'}
+                    scoringSummary={scoringSummary}
+                  />
+                </div>
+              </AnimateOnMount>
 
               {/* 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 */}
@@ -278,31 +291,38 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                   </div>
                 </div>
               </div>
+              </AnimateOnMount>
 
-              <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} />
+              <AnimateOnMount delayMs={180} offsetY={10}>
+                <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>
+              </AnimateOnMount>
               
             </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>
             
             {/* Risk Graph Insights and Category Bars */}
-            <div className="">
-              <GraphInsights
-                graphInsights={graphInsights}
-                categories={genreMapping?.['Risk'] as string[]}
-                genre={'Risk'}
-                scoringSummary={scoringSummary}
-              />
-            </div>
+            <AnimateOnMount delayMs={220} offsetY={8}>
+              <div className="">
+                <GraphInsights
+                  graphInsights={graphInsights}
+                  categories={genreMapping?.['Risk'] as string[]}
+                  genre={'Risk'}
+                  scoringSummary={scoringSummary}
+                />
+              </div>
+            </AnimateOnMount>
+            <AnimateOnMount delayMs={240} offsetY={10}>
             <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">
@@ -347,6 +367,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                 </div>
               </div>
             </div>
+            </AnimateOnMount>
 
             {/* cyber risk display */}
             {badgeData.optOutScreening ? (
@@ -372,6 +393,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)' }}>
                       <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>3A. Sanctions Matches</h4>
                       {/* OFAC matches */}
@@ -433,47 +455,59 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                         </div>
                       )}
                     </div>
+                    </AnimateOnMount>
                   );
                 })()}
-                <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+                <AnimateOnMount delayMs={280} offsetY={8}>
+                  <IpRiskAnalysisDisplay ipRiskAnalysis={screening_sources?.ip_risk_analysis} />
+                </AnimateOnMount>
               </>
             )}
 
           </div>
+          </AnimateOnMount>
 
           {/* Connected Platforms */}
-          <ConnectedPlatforms accounts={connected} />
+          <AnimateOnMount delayMs={260} offsetY={10}>
+            <ConnectedPlatforms accounts={connected} />
+          </AnimateOnMount>
 
         
+          <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 */}
-              <div>
-                <h4 id="appendix-skills" className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Skills</h4>
-                <SkillsAppendixTable skillsAll={skillsAll} />
-              </div>
+              <AnimateOnMount delayMs={300} offsetY={8}>
+                <div>
+                  <h4 id="appendix-skills" className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Skills</h4>
+                  <SkillsAppendixTable skillsAll={skillsAll} />
+                </div>
+              </AnimateOnMount>
 
               {/* 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>
+                <AnimateOnMount delayMs={320} offsetY={8}>
+                  <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>
+                </AnimateOnMount>
               )}
               
               {/* Sanctions & Watchlists */}
               {!badgeData.optOutScreening && screening_sources && (
-                <div>
-                  <h4 className={'text-lg font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Sanctions & Watchlists</h4>
-                  {(() => {
+                <AnimateOnMount delayMs={340} offsetY={8}>
+                  <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 } = {};
@@ -494,23 +528,28 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
                       );
                   })()}
                 </div>
+                </AnimateOnMount>
               )}
 
             </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>
+          </AnimateOnMount>
+
+          <AnimateOnMount delayMs={300} offsetY={6}>
+            <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>
+          </AnimateOnMount>
         </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.

package/src/components/AnimateOnMount.tsx

@@ -0,0 +1,66 @@
+'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;
+
+

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) {