Interactive Diagram — Spatial / Floor-Plan Variant

What it does

• Clickable zones — every room, region, or area on the map is its own tap target with its own teaching panel
• Reveal panel — tapping a zone opens a side panel with the zone's name, purpose, and detail notes
• Hover and active states — zones highlight on hover and stay highlighted while their panel is open, keeping orientation easy
• Visited tracking — explored zones subtly mark themselves so the learner sees coverage at a glance
• Keyboard and tap friendly — works equally well on desktop click, tablet tap, and keyboard arrow navigation

Best use cases

• Interior and architecture — floor plans, room flow, lighting plans, furniture layouts
• Hospitality and events — venue maps, stage layouts, guest-flow plans
• Retail and small business — store layouts, merchandising zones, kitchen line workflows
• Real estate — property walkthroughs, lot maps, neighborhood plot orientation
• Outdoor and landscape — garden zones, trail systems, campus or facility maps

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for map background, zone fill, hover highlight, active highlight, and panel background. Swap to match interior, landscape, or schematic palettes.
• Fonts — two roles: a display font for zone names and headings, and a clean body font for detail text
• Copy — title, intro line, label per zone, and a short teaching paragraph per zone with optional dimensions or specs
• Images — replace the floor plan with any spatial map: stage layout, garden plan, store map, network topology
• Behavior — choose whether one panel opens at a time or panels stack, and tune the highlight and reveal animation speed