diff --git a/website/components/home/HeroMascot.tsx b/website/components/home/HeroMascot.tsx
index 2ed9697..a4c9339 100644
--- a/website/components/home/HeroMascot.tsx
+++ b/website/components/home/HeroMascot.tsx
@@ -1,6 +1,6 @@
'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
// Static assets live in public/ and are NOT auto-prefixed with the GitHub
// Pages basePath the way next/link is — so we prefix the
diff --git a/website/components/home/SiteMotion.tsx b/website/components/home/SiteMotion.tsx
index 6c65e58..55dc816 100644
--- a/website/components/home/SiteMotion.tsx
+++ b/website/components/home/SiteMotion.tsx
@@ -56,6 +56,27 @@ export function SiteMotion() {
}),
});
+ // 2b) Section titles wipe in left→right — a bolder editorial reveal
+ // layered over the section fade. Bento is excluded (own choreography).
+ const titles = gsap.utils.toArray(
+ '.reveal:not(.feature-section) .section-title',
+ );
+ ScrollTrigger.batch(titles, {
+ start: 'top 88%',
+ onEnter: (batch) =>
+ gsap.fromTo(
+ batch,
+ { clipPath: 'inset(0 100% 0 0)' },
+ {
+ clipPath: 'inset(0 0% 0 0)',
+ duration: 0.7,
+ ease: 'power3.inOut',
+ stagger: 0.12,
+ overwrite: 'auto',
+ },
+ ),
+ });
+
// 3) Feature bento — header in, then tiles stagger.
const bento = document.querySelector('.feature-section');
if (bento) {
diff --git a/website/components/home/VerdictDemo.tsx b/website/components/home/VerdictDemo.tsx
index e539544..ba171ae 100644
--- a/website/components/home/VerdictDemo.tsx
+++ b/website/components/home/VerdictDemo.tsx
@@ -1,10 +1,247 @@
-const TABS = ['Verdict', 'ELI5', 'Technical', 'Use Cases', 'Health', 'Red Flags', 'Tech Stack'];
+'use client';
+
+import { useEffect, useRef, useState, type ReactNode } from 'react';
/**
- * A faithful, fully themeable recreation of the real scan output — so it
- * re-skins with the toggle instead of being a screenshot that breaks in latte.
+ * A faithful, fully themeable recreation of the real scan output — now a LIVE
+ * demo: the tabs are a real tablist (click + arrow-key) that crossfades the
+ * card body, and the "Strong fit" verdict stamp slams in the first time the
+ * card scrolls into view. Everything re-skins with the theme toggle instead of
+ * being a screenshot that breaks in another palette. Motion is CSS-only and
+ * gated behind `prefers-reduced-motion` in home.css.
*/
+
+type Tab = { id: string; label: string; panel: ReactNode };
+
+const HealthBars = () => {
+ const rows: Array<[string, number]> = [
+ ['Maintenance', 82],
+ ['Activity', 71],
+ ['Documentation', 95],
+ ['Adoption', 99],
+ ];
+ return (
+
+ Express is the “hello world” of Node web servers. You hand it routes — “when someone
+ visits /users, run this function” — and it handles the plumbing in between.
+
+
+ Minimal on purpose: no database, no folder structure, no opinions. Just the
+ request-in / response-out basics, and a way to stack little functions in the middle.
+