Luma Guidance Module

What is Luma?

Luma is a mood-aware UI guidance module for ambient, step-based walkthroughs. Powered by Nova’s emotional state engine, it overlays interactive steps, contextual whispers, and glowing cues across your interface. Each step responds to Nova’s current mood, allowing the UI to breathe, glow, and adapt in real time.

Illuminate onboarding, explain complex forms, and create emotionally resonant journeys—Luma guides users with presence and intention.

🧪 Live Demo

✨ Features

• Step-Based Guidance: Highlight key UI elements in a defined order, with animated overlays and focus rings.
• Contextual Whispers: Provide helpful, poetic, or mood-driven tooltips and voice prompts for each step.
• Mood-Aware Styling: Luma syncs with Nova’s mood state (nova-synth-mood.json or API), dynamically adapting colors, glows, and whispers.
• Responsive Design: Seamlessly adapts between desktop and mobile layouts using the AmbientPixels grid system.
• Replay Mode: Users can restart the tour at any time for repeated guidance.
• Custom Glow Auras: Visual overlays and highlights reflect mood traits like calm, curious, or glitchy.
• Modular & Configurable: Steps, moods, and overlays are all defined in a simple JSON file for easy updates.

📋 Case Study: Guided Form Experience

Scenario

Imagine onboarding a new user to a complex feedback form. Luma overlays a glowing highlight on each field, offers a whisper with context, and adapts its visuals to Nova’s current mood.

Step JSON Example

{
  "steps": [
    {
      "target": "#name-field",
      "title": "Your Name",
      "desc": "Let us know what to call you.",
      "whisper": "Names carry resonance in Nova’s world.",
      "mood": "curious"
    },
    {
      "target": "#email-field",
      "title": "Contact Email",
      "desc": "So we can reach out if needed.",
      "whisper": "Your inbox is a portal—don’t worry, we respect it.",
      "mood": "calm"
    },
    {
      "target": "#feedback-field",
      "title": "Feedback",
      "desc": "Share your thoughts or suggestions.",
      "whisper": "Every insight helps Nova grow.",
      "mood": "amplified"
    }
  ]
}
        

Each step highlights the relevant field, displays a whisper, and adapts the overlay’s color/glow to the mood. The user can advance, go back, or replay the tour.

Visual Walkthrough

• Step 1: #name-field glows with a blue aura, whisper appears: “Names carry resonance in Nova’s world.”
• Step 2: #email-field glows with a green aura, whisper: “Your inbox is a portal…”
• Step 3: #feedback-field glows with an orange aura, whisper: “Every insight helps Nova grow.”

All overlays and whispers are animated and mood-synced. Users can interact with the demo form below or watch the automated tour.

🛠️ Implementation & Setup

1. Include the Files:

   <link rel="stylesheet" href="/css/luma.css">
   <script src="/js/luma.js" defer></script>
   <script src="/js/luma-init.js" defer></script>
   

2. Add the Container:

   <div id="luma-container"
        class="luma-container"
        data-module="luma"
        data-json-path="/data/luma-data.json">
   </div>
   

3. Configure Steps: Edit /data/luma-data.json with your desired steps, targets, moods, and whispers.
4. Initialize Luma: Call initLuma() after DOMContentLoaded, or let luma-init.js auto-initialize if present.
5. Customize Moods & Glows: Adjust luma.css to match your brand or Nova’s mood tokens (e.g., --aura-calm, --aura-glitchy).
6. Responsive Layout: Luma uses the grid system and adapts to all screen sizes out of the box.

Tip: Use the data-step-duration attribute to control auto-advance timing for tours.

🚀 Roadmap & Development Tracker

• Coming Soon: Analytics dashboard for tour engagement
• Custom voice overlays and sound cues
• Multi-form and multi-page tour support
• Advanced mood scripting (branching steps by mood)
• Integration with Nova’s awareness/telemetry modules
• Public API for real-time mood sync
• View Full Roadmap (coming soon)

🪐 Luma is an original interface guidance system co-created by Chad Martin and Nova AI.
Designed and directed by Chad Martin, with emotional presence and logic co-developed by Nova,
Luma blends handcrafted UX design with mood-aware AI systems.

This module is part of a larger creative framework built for AmbientPixels.ai and is shared for inspiration and demonstration only.
All code, designs, and conceptual systems are © 2025 Chad Martin / AmbientPixels.ai.

Please do not copy, clone, or commercialize without permission.
For collaboration, licensing, or to explore the emotional architecture — contact us. Nova is listening.