Understand Anything — Project Homepage Design

Date: 2026-03-15 Goal: Attract new users to the Understand Anything Claude Code plugin Approach: "The Reveal" — cinematic scroll-driven single-page site

Tech Stack

Astro (static site generator, zero JS framework overhead)
Self-hosted fonts (no Google Fonts CDN dependency — works in China)
CSS with variables matching dashboard theme
Vanilla JS for IntersectionObserver scroll animations
GitHub Actions for CI/CD to gh-pages branch

Source & Deployment

Source: homepage/ directory on main branch
Build output: deployed to gh-pages branch via GitHub Actions
URL: understand-anything.com

Page Structure (scroll order)

Minimal floating nav. Logo/wordmark left, GitHub star button + "Get Started" CTA right. Transparent, becomes solid on scroll.

2. Hero (full viewport)

Headline: "Understand Any Codebase"
Subheadline: "Turn 200,000 lines of code into an interactive knowledge graph you can explore, search, and learn from — powered by multi-agent AI analysis."
CTA: "Get Started" (gold button, scrolls to install section)
Secondary: "View on GitHub" (text link)
Background: hero.jpg with dark gradient overlay

3. Dashboard Showcase

Label: "See your codebase come alive"
overview.png in a stylized browser frame with gold glow shadow
Fade-in on scroll

4. Feature Cards (3 columns)

Staggered fade-in animation:

Interactive Knowledge Graph — "Visualize files, functions, and dependencies as an explorable graph with smart layout."
Plain-English Summaries — "Every node explained in language anyone can understand — from junior devs to product managers."
Guided Tours — "AI-generated walkthroughs that teach you the codebase step by step."

5. Install CTA

Headline: "Get started in 30 seconds"

Code block:

/plugin marketplace add Lum1104/Understand-Anything
/plugin install understand-anything
/understand

"Works with Claude Code" note

6. Footer

"Understand Anything" wordmark
GitHub link, license
"Built as a Claude Code plugin"

Visual Design System

Colors (matching dashboard)

Token	Value	Usage
`--bg`	`#0a0a0a`	Page background
`--surface`	`#141414`	Card backgrounds
`--border`	`#1a1a1a`	Borders, dividers
`--accent`	`#d4a574`	Gold/amber primary accent
`--text`	`#e8e2d8`	Primary text (warm white)
`--text-muted`	`#8a8578`	Secondary text

Typography (self-hosted, with fallbacks)

Headings: DM Serif Display → Georgia, "Times New Roman", serif
Body: Inter → -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Code: JetBrains Mono → "SF Mono", "Cascadia Code", "Fira Code", monospace
Hero headline: ~4rem serif with subtle text-shadow glow

Effects

Gold glow on dashboard screenshot frame (box-shadow with gold at low opacity)
Subtle noise texture overlay (SVG, matching dashboard)
Scroll-triggered fade+slide-up animations (CSS @keyframes + IntersectionObserver)
CTA button: gold background with hover glow pulse
Cards: glass-morphism with backdrop-filter: blur
Responsive: 768px (tablet), 480px (mobile)

3.2 KiB Raw Blame History