feat(hero): redesign landing with MonoLisa-only typography + script variant

- Migrate entire font system to MonoLisa (64 Unicode subsets on GCS).
  Drop Fraunces and Inter; use italic + ss02 stylistic set as editorial accent.
- Rework hero copy: "the open plot catalogue", "steal like an artist.",
  lowercase throughout, broader vision-aligned intro (no Python focus).
- Add live GitHub release tag to masthead (main + v1.1.0 linked).
- New NumbersStrip: 5 quiet stats (languages, libraries, specs, implementations,
  lines of code) hanging under hero; libraries section peeks below (88svh).
- Stack secondary CTAs next to primary button.
- Add lines_of_code to /stats endpoint.
- Cursor fade after typewriter finishes; script variant enabled globally.
- Update README, vision.md, LegalPage disclaimer to drop Python-specific framing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

README.md

@@ -8,15 +8,16 @@
 [![Ruff](https://github.com/MarkusNeusinger/anyplot/actions/workflows/ci-lint.yml/badge.svg?branch=main)](https://github.com/MarkusNeusinger/anyplot/actions/workflows/ci-lint.yml)
 [![codecov](https://codecov.io/github/MarkusNeusinger/anyplot/graph/badge.svg?token=4EGPSHH0H0)](https://codecov.io/github/MarkusNeusinger/anyplot)
 
-> library-agnostic, ai-powered python plotting examples.
+> library-agnostic, ai-powered plotting examples.
 
 ---
 
 ## What is anyplot?
 
-**anyplot** is an AI-powered platform for Python data visualization that automatically discovers, generates, tests, and
-maintains plotting examples. Browse hundreds of plots across all major Python libraries - matplotlib, seaborn, plotly,
-bokeh, altair, plotnine, pygal, highcharts, and lets-plot.
+**anyplot** is an AI-powered platform for data visualization that automatically discovers, generates, tests, and
+maintains plotting examples. Browse hundreds of plots across major visualization libraries — matplotlib, seaborn,
+plotly, bokeh, altair, plotnine, pygal, highcharts, and lets-plot — with an architecture ready to welcome additional
+ecosystems over time.
 
 **Community-driven, AI-maintained** - Propose plot ideas via GitHub Issues, AI generates the code, automated quality
 checks ensure excellence. Zero manual coding required.

api/routers/stats.py

@@ -3,12 +3,12 @@
 from fastapi import APIRouter, Depends
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from api.cache import cache_key, get_cache, get_or_set_cache
+from api.cache import cache_key, get_or_set_cache
 from api.dependencies import optional_db
 from api.schemas import StatsResponse
 from core.config import settings
 from core.constants import LIBRARIES_METADATA
-from core.database import LibraryRepository, SpecRepository
+from core.database import ImplRepository, LibraryRepository, SpecRepository
 from core.database.connection import get_db_context
 
 
@@ -17,26 +17,22 @@
 
 async def _refresh_stats() -> StatsResponse:
     """Standalone factory for background refresh (creates own DB session)."""
-    # Try to derive from already-cached endpoint responses
-    specs_cached = get_cache(cache_key("specs_list"))
-    libs_cached = get_cache(cache_key("libraries"))
-
-    if specs_cached is not None and libs_cached is not None:
-        return StatsResponse(
-            specs=len(specs_cached),
-            plots=sum(item.library_count for item in specs_cached),
-            libraries=len(libs_cached["libraries"]),
-        )
-
     async with get_db_context() as db:
         spec_repo = SpecRepository(db)
         lib_repo = LibraryRepository(db)
+        impl_repo = ImplRepository(db)
         specs = await spec_repo.get_all()
         libraries = await lib_repo.get_all()
+        total_loc = await impl_repo.get_total_code_lines()
 
     specs_with_impls = [s for s in specs if s.impls]
     total_impls = sum(len(s.impls) for s in specs)
-    return StatsResponse(specs=len(specs_with_impls), plots=total_impls, libraries=len(libraries))
+    return StatsResponse(
+        specs=len(specs_with_impls),
+        plots=total_impls,
+        libraries=len(libraries),
+        lines_of_code=total_loc,
+    )
 
 
 @router.get("/stats", response_model=StatsResponse)
@@ -50,26 +46,21 @@ async def get_stats(db: AsyncSession | None = Depends(optional_db)):
         return StatsResponse(specs=0, plots=0, libraries=len(LIBRARIES_METADATA))
 
     async def _fetch() -> StatsResponse:
-        # Try to derive from already-cached endpoint responses
-        specs_cached = get_cache(cache_key("specs_list"))
-        libs_cached = get_cache(cache_key("libraries"))
-
-        if specs_cached is not None and libs_cached is not None:
-            return StatsResponse(
-                specs=len(specs_cached),
-                plots=sum(item.library_count for item in specs_cached),
-                libraries=len(libs_cached["libraries"]),
-            )
-
-        # Fallback: DB query (only on cold start if /stats arrives before /specs)
         spec_repo = SpecRepository(db)
         lib_repo = LibraryRepository(db)
+        impl_repo = ImplRepository(db)
         specs = await spec_repo.get_all()
         libraries = await lib_repo.get_all()
+        total_loc = await impl_repo.get_total_code_lines()
 
         specs_with_impls = [s for s in specs if s.impls]
         total_impls = sum(len(s.impls) for s in specs)
-        return StatsResponse(specs=len(specs_with_impls), plots=total_impls, libraries=len(libraries))
+        return StatsResponse(
+            specs=len(specs_with_impls),
+            plots=total_impls,
+            libraries=len(libraries),
+            lines_of_code=total_loc,
+        )
 
     return await get_or_set_cache(
         cache_key("stats"), _fetch, refresh_after=settings.cache_refresh_after, refresh_factory=_refresh_stats

api/schemas.py

@@ -117,3 +117,4 @@ class StatsResponse(BaseModel):
     specs: int
     plots: int
     libraries: int
+    lines_of_code: int = 0

app/index.html

@@ -25,10 +25,6 @@
     <link rel="preconnect" href="https://storage.googleapis.com" crossorigin>
     <!-- Preconnect to API for faster first request -->
     <link rel="preconnect" href="https://api.anyplot.ai" crossorigin>
-    <!-- Google Fonts: Fraunces (serif headlines) + Inter (sans UI) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <!-- Preload MonoLisa Basic Latin (most used, variable font = all weights) -->
     <link rel="preload" href="https://storage.googleapis.com/anyplot-static/fonts/0-MonoLisa-normal.woff2" as="font" type="font/woff2" crossorigin>

app/src/components/Header.tsx

@@ -10,7 +10,7 @@ import ShuffleIcon from '@mui/icons-material/Shuffle';
 import { colors, typography, semanticColors } from '../theme';
 
 interface HeaderProps {
-  stats?: { specs: number; plots: number; libraries: number } | null;
+  stats?: { specs: number; plots: number; libraries: number; lines_of_code?: number } | null;
   onRandom?: (method: 'click' | 'space' | 'doubletap') => void;
 }
 

app/src/components/HeroSection.tsx

@@ -7,7 +7,7 @@ import { PlotOfTheDayTerminal } from './PlotOfTheDayTerminal';
 import type { PlotOfTheDayData } from '../hooks/usePlotOfTheDay';
 
 interface HeroSectionProps {
-  stats: { specs: number; plots: number; libraries: number } | null;
+  stats: { specs: number; plots: number; libraries: number; lines_of_code?: number } | null;
   potd?: PlotOfTheDayData | null;
 }
 
@@ -35,8 +35,7 @@ export function HeroSection({ stats, potd = null }: HeroSectionProps) {
             animation: 'rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards',
             fontFamily: typography.mono,
             fontSize: '11px',
-            textTransform: 'uppercase',
-            letterSpacing: '0.15em',
+            letterSpacing: '0.08em',
             color: colors.primary,
             mb: 3,
             display: 'flex',
@@ -51,7 +50,7 @@ export function HeroSection({ stats, potd = null }: HeroSectionProps) {
             },
           }}
         >
-          Data Visualization Catalogue
+          the open plot catalogue
         </Box>
 
         <Box
@@ -65,7 +64,7 @@ export function HeroSection({ stats, potd = null }: HeroSectionProps) {
             letterSpacing: '-0.03em',
             color: 'var(--ink)',
             m: 0,
-            mb: 4,
+            mb: 3,
           }}
         >
           <Box
@@ -93,28 +92,59 @@ export function HeroSection({ stats, potd = null }: HeroSectionProps) {
             <Box component="span" sx={{ fontWeight: 400, opacity: 0.45 }}>()</Box>
           </Box>
           <br />
-          <Box component="span" sx={{ fontFamily: typography.serif, fontWeight: 400 }}>
+          <Box
+            component="span"
+            sx={{
+              fontFamily: typography.serif,
+              fontWeight: 400,
+              fontStyle: 'italic',
+              fontFeatureSettings: '"ss02"',
+              whiteSpace: 'nowrap',
+              fontSize: '0.75em',
+            }}
+          >
             — any library.
           </Box>
         </Box>
 
+        <Box
+          component="p"
+          sx={{
+            animation: 'rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards',
+            fontFamily: typography.serif,
+            fontSize: { xs: '0.9375rem', sm: '1rem', md: '1.125rem' },
+            lineHeight: 1.4,
+            color: 'var(--ink)',
+            mt: 0,
+            mb: 2.5,
+            fontWeight: 500,
+            letterSpacing: '-0.005em',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          one spec · every library · always current.
+        </Box>
+
         <Box
           sx={{
             animation: 'rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards',
             fontFamily: typography.serif,
             fontSize: { xs: '1rem', md: '1.1875rem' },
-            lineHeight: 1.5,
+            lineHeight: 1.55,
             color: 'var(--ink-soft)',
             mb: 4,
             fontWeight: 300,
           }}
         >
-          A curated catalogue of visualization examples — human ideas,
-          AI-drafted specs, open implementations across nine Python libraries.
+          every plot begins as a library-agnostic spec. ai drafts implementations across every
+          supported library, validates them against quality criteria, and keeps them current. you
+          discover, copy, and adapt — plug in <em>your</em>
+          {' '}data. that&apos;s it.
         </Box>
 
         <TypewriterText
-          lines={['get inspired.', 'grab the code.', 'make it yours.']}
+          lines={['steal like an artist.']}
+          charDelay={68}
           sx={{
             animation: 'rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s backwards',
             fontFamily: typography.serif,
@@ -130,55 +160,19 @@ export function HeroSection({ stats, potd = null }: HeroSectionProps) {
         <Box
           sx={{
             display: 'flex',
-            gap: 1.5,
+            alignItems: 'center',
+            gap: 2.5,
             flexWrap: 'wrap',
             animation: 'rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards',
           }}
         >
-          <PrimaryCta to="/plots" label="Browse the catalogue" />
-          <GhostCta to="/mcp" label="use via MCP" />
+          <PrimaryCta to="/plots" label="browse plots" />
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
+            <SecondaryLink to="/mcp" label="or connect via mcp" />
+            <SecondaryLink href="https://github.com/MarkusNeusinger/anyplot" label="or clone on github" external />
+          </Box>
         </Box>
 
-        {stats && (
-          <Box
-            sx={{
-              mt: 5,
-              pt: 3,
-              borderTop: '1px solid var(--rule)',
-              display: 'flex',
-              gap: 4,
-              flexWrap: 'wrap',
-              fontFamily: typography.mono,
-              fontSize: '11px',
-              color: 'var(--ink-muted)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.1em',
-            }}
-          >
-            {[
-              { value: String(stats.specs), label: 'specs' },
-              { value: stats.plots.toLocaleString(), label: 'implementations' },
-              { value: String(stats.libraries), label: 'libraries' },
-            ].map((item, i) => (
-              <Box key={i}>
-                <Box
-                  sx={{
-                    color: 'var(--ink)',
-                    fontWeight: 500,
-                    fontSize: { xs: '1.25rem', md: '1.625rem' },
-                    letterSpacing: '-0.02em',
-                    textTransform: 'none',
-                    mb: 0.5,
-                    fontFamily: typography.serif,
-                  }}
-                >
-                  {item.value}
-                </Box>
-                {item.label}
-              </Box>
-            ))}
-          </Box>
-        )}
       </Box>
 
       {/* Right: terminal plot */}
@@ -217,24 +211,40 @@ function PrimaryCta({ to, label }: { to: string; label: string }) {
   );
 }
 
-function GhostCta({ to, label }: { to: string; label: string }) {
+function SecondaryLink({
+  to,
+  href,
+  label,
+  external,
+}: {
+  to?: string;
+  href?: string;
+  label: string;
+  external?: boolean;
+}) {
+  const linkProps = external
+    ? { component: 'a' as const, href, target: '_blank', rel: 'noopener noreferrer' }
+    : { component: RouterLink, to };
+
   return (
     <Box
-      component={RouterLink}
-      to={to}
+      {...linkProps}
       sx={{
         textDecoration: 'none',
         fontFamily: typography.mono,
         fontSize: '13px',
-        padding: '13px 22px',
-        borderRadius: '99px',
-        border: '1px solid var(--rule)',
-        color: 'var(--ink)',
-        transition: 'all 0.2s',
-        '&:hover': { borderColor: 'var(--ink)' },
+        color: 'var(--ink-soft)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 0.5,
+        transition: 'color 0.2s',
+        '& .arrow': { transition: 'transform 0.2s' },
+        '&:hover': { color: colors.primary },
+        '&:hover .arrow': { transform: 'translateX(3px)' },
+        '&:focus-visible': { outline: `2px solid ${colors.primary}`, outlineOffset: 2, borderRadius: '2px' },
       }}
     >
-      {label}
+      {label}&nbsp;<Box component="span" className="arrow">→</Box>
     </Box>
   );
 }

app/src/components/Layout.tsx

@@ -21,7 +21,7 @@ export function AppDataProvider({ children }: { children: ReactNode }) {
   const themeMode = useThemeMode();
   const [specsData, setSpecsData] = useState<SpecInfo[]>([]);
   const [librariesData, setLibrariesData] = useState<LibraryInfo[]>([]);
-  const [stats, setStats] = useState<{ specs: number; plots: number; libraries: number } | null>(null);
+  const [stats, setStats] = useState<{ specs: number; plots: number; libraries: number; lines_of_code?: number } | null>(null);
 
   // Persistent home state (both ref for sync access and state for reactivity)
   const [homeState, setHomeState] = useState<HomeState>(initialHomeState);