Alex Newman
c27f07023c
Root cause: Hooks provide session_id as the source of truth. We were adding unnecessary validation (checking if sessions exist, checking status, etc.) which caused 409 conflicts when continuing sessions after /exit. Changes: 1. worker-service.ts: Removed 409 "Session already exists" check in handleInit 2. SessionStore.ts: Made createSDKSession idempotent using INSERT OR IGNORE 3. new-hook.ts: Simplified to just call createSDKSession - no findActiveSDKSession, no reactivateSession logic, no status management 4. save-hook.ts: Removed session validation, use fixed port instead of session.worker_port 5. summary-hook.ts: Removed session validation, use fixed port instead of session.worker_port Philosophy: Hooks manage lifecycle, we just save data with whatever session_id they give us. No validation, no status checks, no guessing. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
472 lines
17 KiB
Markdown
472 lines
17 KiB
Markdown
# Magic UI Landing Page Creative Ideas
|
|
|
|
Creative applications of Magic UI components for each section of the claude-mem landing page.
|
|
|
|
## Section 1: HERO - "Claude Never Forgets"
|
|
|
|
### Idea 1: "Fading Memory" Effect ⭐ WINNER
|
|
**Components**: Morphing Text, Grid Beams, Orbiting Circles, Scratch To Reveal
|
|
|
|
**Vision**:
|
|
- **Headline**: Morphing Text rotating between:
|
|
- "Claude Never Forgets"
|
|
- "Claude Always Remembers"
|
|
- "Claude Learns Forever"
|
|
- **Background**: Grid Beams in blue/purple gradient representing the "memory grid"
|
|
- **Central Visual**: Orbiting Circles around a central "brain/database" icon
|
|
- Inner orbit: File icons (representing code files)
|
|
- Middle orbit: Lightbulb icons (decisions)
|
|
- Outer orbit: Bug icons (fixes)
|
|
- **Problem Statement**: Scratch To Reveal overlay
|
|
- User must scratch to reveal: "Every /clear wipes Claude's memory"
|
|
- Makes the pain point visceral and interactive
|
|
- **CTA**: Pulsating Button "Give Claude a Memory"
|
|
|
|
### Idea 2: "Memory Timeline" Hero
|
|
**Components**: Warp Background, Arc Timeline, Aurora Text, Word Rotate
|
|
|
|
**Vision**:
|
|
- Warp Background creating perspective depth
|
|
- Arc Timeline showing "Session 1 → Session 2 → Session 3" with memories persisting across
|
|
- Aurora Text for main headline with flowing gradient
|
|
- Word Rotate cycling pain points: "Repeating" → "Explaining" → "Re-discovering" → "Forgetting"
|
|
|
|
### Idea 3: "Brain Storage" Visualization
|
|
**Components**: Particles, Magic Card, Highlighter, Pulsating Button
|
|
|
|
**Vision**:
|
|
- Particles background (subtle, neuron-like firing)
|
|
- Central Magic Card with spotlight effect containing headline
|
|
- Highlighter emphasizing "Never" and "Forgets" with animated underlines
|
|
- Pulsating Button for CTA with urgency
|
|
|
|
---
|
|
|
|
## Section 2: BEFORE/AFTER Comparison
|
|
|
|
### Idea 1: "Split Screen Wipe" ⭐ WINNER
|
|
**Components**: Safari, Text Animate, Border Beam, Scratch To Reveal
|
|
|
|
**Vision**:
|
|
- Two Safari browser mockups side by side
|
|
- **Left (Before)**: Conversation fades/blurs out showing memory loss
|
|
- **Right (After)**: Sharp, persistent content with Border Beam highlighting
|
|
- Text Animate with slideUp for conversations appearing sequentially
|
|
- Optional: Scratch To Reveal over "Before" side to uncover the painful reality
|
|
|
|
### Idea 2: "Memory Decay Visualization"
|
|
**Components**: Text Animate, Shine Border, Magic Card, Animated Theme Toggler
|
|
|
|
**Vision**:
|
|
- Before side: Text with progressive fade-out animation (opacity decreasing)
|
|
- After side: Text with Shine Border, glowing persistently
|
|
- Magic Card on After side with spotlight following mouse
|
|
- Animated Theme Toggler metaphorically switching "forgetting" → "remembering"
|
|
|
|
### Idea 3: "Conversation Replay"
|
|
**Components**: Animated List, Border Beam, Highlighter
|
|
|
|
**Vision**:
|
|
- Animated List showing conversation history
|
|
- Before: List items fade out and disappear sequentially
|
|
- After: List items persist, Border Beam appears on referenced items
|
|
- Highlighter underlining key persistent information on After side
|
|
|
|
---
|
|
|
|
## Section 3: REAL EXAMPLES (3 Scenarios)
|
|
|
|
### Idea 1: "Tabbed Experience"
|
|
**Components**: Bento Grid, Magic Card, Text Animate, Flip Text, Confetti
|
|
|
|
**Vision**:
|
|
- Bento Grid layout with 3 Magic Cards (one per scenario)
|
|
- Each card has spotlight effect on hover
|
|
- Text Animate (blurIn) for code examples appearing
|
|
- Flip Text for headings revealing scenario names
|
|
- Confetti burst when clicking through to third example (pattern recognized!)
|
|
|
|
### Idea 2: "Timeline Story" ⭐ WINNER
|
|
**Components**: Arc Timeline, Orbiting Circles, Highlighter, Animated List
|
|
|
|
**Vision**:
|
|
- Arc Timeline showing progression: "Monday Session" → "Wednesday Session"
|
|
- Each timeline node expands to show the scenario details
|
|
- Orbiting Circles around active node showing:
|
|
- Files involved (icons in orbit)
|
|
- Decisions made (decision icons)
|
|
- Bugs fixed (bug icons)
|
|
- Highlighter emphasizing key remembered details in the expanded content
|
|
- Animated List revealing the bulleted "Claude remembers" items
|
|
|
|
### Idea 3: "Memory Card Flip"
|
|
**Components**: Scratch To Reveal, Magic Card, Pulsating Button, Word Rotate
|
|
|
|
**Vision**:
|
|
- Three cards with Scratch To Reveal overlay
|
|
- Scratch to reveal what Claude remembers from previous sessions
|
|
- Magic Card underneath with gradient borders
|
|
- Pulsating Button to cycle through scenarios
|
|
- Word Rotate showing memory types: "Patterns" → "Decisions" → "Context" → "Architecture"
|
|
|
|
---
|
|
|
|
## Section 4: HOW IT WORKS (Pipeline)
|
|
|
|
### Idea 1: "Animated Data Flow"
|
|
**Components**: Magic Card, Orbiting Circles, Border Beam, Text Animate, Particles
|
|
|
|
**Vision**:
|
|
- Three connected Magic Cards showing pipeline stages:
|
|
1. "You code with Claude today"
|
|
2. "claude-mem captures & compresses"
|
|
3. "Tomorrow, Claude starts with context"
|
|
- Orbiting Circles representing data flowing between stages
|
|
- Border Beam animating along connections between cards
|
|
- Text Animate (slideUp) for each stage description on scroll
|
|
- Particles flowing from one stage to the next
|
|
|
|
### Idea 2: "Arc Timeline as Process"
|
|
**Components**: Arc Timeline, Orbiting Circles, Warp Background, Animated List, Shine Border
|
|
|
|
**Vision**:
|
|
- Arc Timeline showing 5 steps of memory system
|
|
- Each node has Orbiting Circles showing components (hooks, worker, DB, MCP, context)
|
|
- Warp Background creating depth
|
|
- Animated List revealing sub-bullets under each stage
|
|
- Shine Border on active/hovered stage
|
|
|
|
### Idea 3: "Layered Depth Model" ⭐ WINNER
|
|
**Components**: Grid Beams, Magic Card, Border Beam, Morphing Text, Highlighter
|
|
|
|
**Vision**:
|
|
- Grid Beams background representing the "storage layer"
|
|
- Three floating Magic Cards in z-space (perspective/depth):
|
|
- Top layer: "Hooks capture"
|
|
- Middle layer: "AI compresses"
|
|
- Bottom layer: "Database stores"
|
|
- Arrows with Border Beam animation showing data flow downward
|
|
- Morphing Text showing state transformation: "Capturing" → "Compressing" → "Storing" → "Retrieving"
|
|
- Highlighter emphasizing "Automatic. Zero effort. Always on."
|
|
|
|
---
|
|
|
|
## Section 5: WHAT GETS REMEMBERED (Feature List)
|
|
|
|
### Idea 1: "Checkbox Delight"
|
|
**Components**: Animated List, Text Animate, Highlighter, Confetti, Magic Card
|
|
|
|
**Vision**:
|
|
- Animated List of 6 checkmark items
|
|
- Each item appears with Text Animate (blurIn by character)
|
|
- Highlighter underlining key words: "Decisions", "Bugs Fixed", "Code Patterns", etc.
|
|
- Confetti burst when all items are visible (celebration of completeness)
|
|
- Magic Card container with subtle spotlight effect
|
|
|
|
### Idea 2: "Memory Bank Slots" ⭐ WINNER
|
|
**Components**: Bento Grid, Scratch To Reveal, Shine Border, Orbiting Circles, Pulsating Button
|
|
|
|
**Vision**:
|
|
- Bento Grid of 6 cards (one per memory type)
|
|
- Each card has Scratch To Reveal to discover what gets saved (gamification!)
|
|
- Shine Border appears around revealed cards
|
|
- Orbiting Circles showing example icons around each card type
|
|
- Pulsating indicator on most important memory types
|
|
|
|
### Idea 3: "Collector Animation"
|
|
**Components**: Magic Card, Border Beam, Flip Text, Aurora Text, Dot Pattern
|
|
|
|
**Vision**:
|
|
- Six Magic Cards arranged in grid
|
|
- Border Beam cascading through cards in sequence
|
|
- Each card flips (Flip Text) to reveal icon + description
|
|
- Aurora Text for section heading
|
|
- Dot Pattern background with subtle glow on active items
|
|
|
|
---
|
|
|
|
## Section 6: POWERFUL SEARCH
|
|
|
|
### Idea 1: "Live Search Demo" ⭐ WINNER
|
|
**Components**: Safari, Text Animate, Animated List, Highlighter, Border Beam, Morphing Text
|
|
|
|
**Vision**:
|
|
- Safari browser mockup showing search interface
|
|
- Text Animate typing out search queries with realistic timing:
|
|
- "Find all database migrations..."
|
|
- "What decisions about authentication..."
|
|
- Animated List revealing search results sequentially
|
|
- Highlighter emphasizing matched keywords in results
|
|
- Border Beam around result cards
|
|
- Morphing Text cycling search types: "Migrations" → "Decisions" → "Patterns" → "Bugs"
|
|
|
|
### Idea 2: "Search Radar"
|
|
**Components**: Orbiting Circles, Magic Card, Particles, Text Animate, Grid Beams
|
|
|
|
**Vision**:
|
|
- Orbiting Circles representing different search dimensions:
|
|
- Inner orbit: File search
|
|
- Middle orbit: Concept search
|
|
- Outer orbit: Type/date filters
|
|
- Central Magic Card with search query
|
|
- Particles radiating outward to show search happening
|
|
- Results appear with Text Animate (slideUp)
|
|
- Grid Beams background representing indexed database
|
|
|
|
### Idea 3: "Memory Retrieval Visualization"
|
|
**Components**: Warp Background, Aurora Text, Magic Card, Shine Border, Dock, Confetti
|
|
|
|
**Vision**:
|
|
- Warp Background creating depth into "memory storage"
|
|
- Search query in Aurora Text
|
|
- Seven Magic Cards (one per search tool) with Shine Border
|
|
- Dock component at bottom showing 7 search tool icons
|
|
- Confetti when "perfect match" is found
|
|
|
|
---
|
|
|
|
## Section 7: THE NUMBERS (Metrics Table)
|
|
|
|
### Idea 1: "Counting Animation"
|
|
**Components**: Safari, Text Animate, Aurora Text, Confetti, Border Beam
|
|
|
|
**Vision**:
|
|
- Safari mockup showing comparison table
|
|
- Text Animate for each metric value counting up
|
|
- "Before" values in faded text
|
|
- "After" values with Aurora Text effect (glowing)
|
|
- Confetti when hovering over dramatic improvements
|
|
- Border Beam highlighting entire "After" column
|
|
|
|
### Idea 2: "Progress Bar Transformation" ⭐ WINNER
|
|
**Components**: Magic Card, Morphing Text, Shine Border, Pulsating Button
|
|
|
|
**Vision**:
|
|
- Five Magic Cards, one per metric
|
|
- Animated progress bars showing transformation:
|
|
- Before (low/red) → After (high/green)
|
|
- Visual representation of improvement
|
|
- Morphing Text cycling through metrics
|
|
- Shine Border on cards with biggest improvements
|
|
- Pulsating Button: "See the Difference"
|
|
|
|
### Idea 3: "Flip Cards Reveal"
|
|
**Components**: Scratch To Reveal, Magic Card, Highlighter, Animated List
|
|
|
|
**Vision**:
|
|
- Five cards with Scratch To Reveal
|
|
- Scratch "Before" to reveal "After" metrics
|
|
- Each card has Magic Card spotlight effect
|
|
- Highlighter emphasizing: "Never", "0 seconds", "Rare"
|
|
- Animated List showing additional benefits below table
|
|
|
|
---
|
|
|
|
## Section 8: INSTALLATION (Quick Start)
|
|
|
|
### Idea 1: "Copy-Paste Delight" ⭐ WINNER
|
|
**Components**: Safari, Text Animate, Shiny Button, Confetti, Animated List, Highlighter
|
|
|
|
**Vision**:
|
|
- Safari mockup showing terminal window
|
|
- Text Animate typing out commands with realistic timing (typewriter effect)
|
|
- Shiny Button next to each command for copy
|
|
- Confetti celebration when installation completes
|
|
- Animated List showing 3 steps with checkmarks appearing
|
|
- Highlighter emphasizing "2 minutes"
|
|
|
|
### Idea 2: "Progress Stepper"
|
|
**Components**: Arc Timeline, Border Beam, Magic Card, Pulsating Button, Word Rotate
|
|
|
|
**Vision**:
|
|
- Arc Timeline with 3 nodes: Clone → Add → Install
|
|
- Each step expands to show code when active
|
|
- Border Beam connecting steps as they complete
|
|
- Magic Card for code blocks with spotlight
|
|
- Pulsating Button for "Get Started"
|
|
- Word Rotate: "Simple" → "Fast" → "Easy" → "Done"
|
|
|
|
### Idea 3: "Interactive Terminal"
|
|
**Components**: Grid Beams, Safari, Text Animate, Orbiting Circles, Rainbow Button, Shine Border
|
|
|
|
**Vision**:
|
|
- Grid Beams background (tech aesthetic)
|
|
- Safari terminal mockup
|
|
- Text Animate simulating command execution
|
|
- Orbiting Circles showing installed components appearing
|
|
- Rainbow Button for final "Installation Complete" CTA
|
|
- Shine Border around success message
|
|
|
|
---
|
|
|
|
## Section 9: UNDER THE HOOD (Architecture)
|
|
|
|
### Idea 1: "System Diagram"
|
|
**Components**: Bento Grid, Magic Card, Orbiting Circles, Border Beam, Dot Pattern, Text Animate, Highlighter
|
|
|
|
**Vision**:
|
|
- Bento Grid showing 5 architecture components:
|
|
- Hooks, Worker, Database, MCP, Context Injection
|
|
- Each grid cell is a Magic Card with spotlight
|
|
- Orbiting Circles showing data flow between components
|
|
- Border Beam animating along connections
|
|
- Dot Pattern background
|
|
- Text Animate for each component description
|
|
- Highlighter on "Zero maintenance. Just works."
|
|
|
|
### Idea 2: "Layered Stack" ⭐ WINNER
|
|
**Components**: Magic Card, Warp Background, Morphing Text, Particles, Shine Border
|
|
|
|
**Vision**:
|
|
- Five Magic Cards stacked with perspective (z-depth)
|
|
- Each layer slides out on scroll to reveal architecture:
|
|
1. Hooks (top)
|
|
2. Worker Service
|
|
3. SQLite Database (center)
|
|
4. MCP Server
|
|
5. Context Injection (bottom)
|
|
- Warp Background creating depth
|
|
- Morphing Text showing active layer: "Hooks" → "Worker" → "SQLite" → "MCP" → "Context"
|
|
- Particles flowing between layers
|
|
- Shine Border on active layer
|
|
|
|
### Idea 3: "Technical Orbits"
|
|
**Components**: Orbiting Circles, Grid Beams, Magic Card, Text Animate
|
|
|
|
**Vision**:
|
|
- Central "SQLite DB" icon
|
|
- Orbiting Circles representing different systems:
|
|
- Inner orbit: 5 hooks (SessionStart, UserPrompt, PostTool, Summary, SessionEnd)
|
|
- Middle orbit: Worker service (PM2 process)
|
|
- Outer orbit: MCP server (7 search tools)
|
|
- Farthest orbit: Context injection
|
|
- Grid Beams background
|
|
- Magic Card for each orbit explanation
|
|
- Text Animate (slideUp) for technical details
|
|
|
|
---
|
|
|
|
## Section 10: USE CASES (User Types)
|
|
|
|
### Idea 1: "User Journey Cards"
|
|
**Components**: Bento Grid, Magic Card, Avatar Circles, Animated List, Flip Text, Border Beam
|
|
|
|
**Vision**:
|
|
- Four Magic Cards in Bento Grid layout
|
|
- Each card has different gradient colors (gradientFrom/To)
|
|
- Avatar Circles showing user type icon
|
|
- Animated List of benefits per user type
|
|
- Flip Text for headings revealing user types
|
|
- Border Beam highlighting active/hovered card
|
|
|
|
### Idea 2: "Role Selector" ⭐ WINNER
|
|
**Components**: Dock, Magic Card, Text Animate, Highlighter, Confetti
|
|
|
|
**Vision**:
|
|
- Dock component with 4 icons representing user types:
|
|
- Solo Developer icon
|
|
- Team icon
|
|
- Learning/Student icon
|
|
- Large Refactor icon
|
|
- Click icon to expand that use case
|
|
- Magic Card expands with spotlight effect
|
|
- Text Animate revealing use case details
|
|
- Highlighter emphasizing key benefits
|
|
- Confetti celebration when selecting "your" use case (engagement!)
|
|
|
|
### Idea 3: "Story Scenarios"
|
|
**Components**: Arc Timeline, Safari, Orbiting Circles, Morphing Text, Shine Border, Animated List
|
|
|
|
**Vision**:
|
|
- Arc Timeline showing progression for each user type
|
|
- Safari mockup showing actual usage scenario
|
|
- Orbiting Circles around timeline nodes showing features being used
|
|
- Morphing Text cycling through user types
|
|
- Shine Border on selected use case
|
|
- Animated List showing specific benefits
|
|
|
|
---
|
|
|
|
## Section 11: FAQ
|
|
|
|
### Idea 1: "Expandable Cards"
|
|
**Components**: Magic Card, Text Animate, Border Beam, Highlighter, Dot Pattern, Animated List
|
|
|
|
**Vision**:
|
|
- Six Magic Cards with questions visible
|
|
- Click to expand with Text Animate (blurIn)
|
|
- Border Beam appears on expanded card
|
|
- Highlighter emphasizing key answer points
|
|
- Dot Pattern background
|
|
- Animated List for multi-point answers
|
|
|
|
### Idea 2: "Scratch to Answer" ⭐ WINNER
|
|
**Components**: Scratch To Reveal, Confetti, Magic Card, Morphing Text
|
|
|
|
**Vision**:
|
|
- Questions visible, answers hidden under scratch surface
|
|
- Scratch To Reveal to see answers (highly engaging!)
|
|
- Confetti on revealing particularly important answers (e.g., "Fully private")
|
|
- Magic Card container with spotlight
|
|
- Morphing Text cycling through common concerns: "Cost?" → "Speed?" → "Privacy?" → "Storage?"
|
|
|
|
### Idea 3: "Interactive Q&A"
|
|
**Components**: Bento Grid, Border Beam, Shine Border, Text Animate, Pulsating Button, Avatar Circles
|
|
|
|
**Vision**:
|
|
- Bento Grid of question cards
|
|
- Hover triggers Border Beam
|
|
- Click expands with Shine Border
|
|
- Text Animate typing out answers
|
|
- Pulsating Button for "More Questions?"
|
|
- Avatar Circles showing "5,000+ developers trust claude-mem"
|
|
|
|
---
|
|
|
|
## BONUS: Testimonials Section (Not in Original)
|
|
|
|
### Idea 1: "Social Proof Marquee"
|
|
**Components**: Marquee (3D), Magic Card, Avatar Circles, Highlighter, Shine Border
|
|
|
|
**Vision**:
|
|
- Marquee component in 3D mode scrolling developer testimonials
|
|
- Each testimonial in a Magic Card
|
|
- Avatar Circles showing total developer count
|
|
- Highlighter on impactful quote fragments
|
|
- Shine Border around featured testimonial
|
|
|
|
---
|
|
|
|
## Component Usage Summary
|
|
|
|
| Component | Times Used (Winners) | Primary Purpose |
|
|
|-----------|---------------------|-----------------|
|
|
| **Magic Card** | 9 | Spotlight effects, containers |
|
|
| **Text Animate** | 7 | Typing effects, reveals |
|
|
| **Border Beam** | 6 | Connections, highlights |
|
|
| **Highlighter** | 6 | Emphasis on key text |
|
|
| **Animated List** | 5 | Sequential reveals |
|
|
| **Confetti** | 5 | Celebrations, milestones |
|
|
| **Shine Border** | 5 | Premium emphasis |
|
|
| **Morphing Text** | 4 | Dynamic headlines |
|
|
| **Orbiting Circles** | 4 | Data flow, ecosystems |
|
|
| **Safari** | 4 | Browser mockups |
|
|
| **Scratch To Reveal** | 4 | Interactive discovery |
|
|
| **Pulsating Button** | 4 | CTAs |
|
|
| **Grid Beams** | 3 | Tech backgrounds |
|
|
| **Warp Background** | 3 | Depth, perspective |
|
|
| **Arc Timeline** | 2 | Progress, history |
|
|
| **Dock** | 1 | Navigation selector |
|
|
| **Aurora Text** | 1 | Premium headlines |
|
|
| **Bento Grid** | 1 | Layout organization |
|
|
|
|
## Design Principles
|
|
|
|
1. **Show, Don't Tell**: Use animations to demonstrate concepts (memory persistence, data flow)
|
|
2. **Interactive Discovery**: Scratch-to-reveal and interactive elements engage users
|
|
3. **Visual Metaphors**: Orbiting circles for data flow, layers for architecture
|
|
4. **Celebration**: Confetti at key moments creates joy
|
|
5. **Progressive Disclosure**: Animated lists and timelines reveal information naturally
|
|
6. **Spatial Depth**: Warp backgrounds and z-space create dimensional understanding
|
|
7. **Consistent Magic**: Reuse components (Magic Card, Border Beam) for cohesion
|