airkjw/claude-mem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bcad4c484de12957ca79153fea5e85e2b1b287c9
claude-mem/context/magic-ui/creative-ideas.md
T
Alex Newman c27f07023c fix: Remove all session validation to prevent continuation errors after /exit 
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>
2025-10-21 21:44:58 -04:00

17 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink