🌈 Add Light Trinity system (RedLight + GreenLight + YellowLight)
Complete deployment of unified Light Trinity system: 🔴 RedLight: Template & brand system (18 HTML templates) 💚 GreenLight: Project & collaboration (14 layers, 103 templates) 💛 YellowLight: Infrastructure & deployment 🌈 Trinity: Unified compliance & testing Includes: - 12 documentation files - 8 shell scripts - 18 HTML brand templates - Trinity compliance workflow Built by: Cece + Alexa Date: December 23, 2025 Source: blackroad-os/blackroad-os-infra 🌸✨
This commit is contained in:
Alexa Louise
577
.trinity/redlight/docs/REDLIGHT_TEMPLATE_SYSTEM.md
Normal file
577
.trinity/redlight/docs/REDLIGHT_TEMPLATE_SYSTEM.md
Normal file
@@ -0,0 +1,577 @@
|
||||
# 🔴 REDLIGHT TEMPLATE SYSTEM
|
||||
## Visual Templates for Worlds, Websites, and Experiences
|
||||
### Version 1.0 — December 23, 2025
|
||||
|
||||
**The visual layer of BlackRoad OS.**
|
||||
**GreenLight is project management. YellowLight is infrastructure. RedLight is creation.** 🔴
|
||||
|
||||
---
|
||||
|
||||
## **OVERVIEW**
|
||||
|
||||
RedLight is the **template library** for all BlackRoad OS visual experiences:
|
||||
|
||||
- **3D Worlds** (interactive planets, metaverse, games)
|
||||
- **Websites** (landing pages, dashboards, apps)
|
||||
- **Animations** (motion systems, transitions, effects)
|
||||
- **Design Systems** (Schematiq, brand assets, components)
|
||||
|
||||
Every RedLight template is:
|
||||
- **Self-contained** (single HTML file with embedded CSS/JS)
|
||||
- **Three.js powered** (for 3D worlds and animations)
|
||||
- **BlackRoad branded** (gradient colors: #FF9D00 → #FF6B00 → #FF0066 → #D600AA → #7700FF → #0066FF)
|
||||
- **Deploy-ready** (Cloudflare Pages, GitHub Pages, or static hosting)
|
||||
|
||||
---
|
||||
|
||||
## **TEMPLATE CATEGORIES**
|
||||
|
||||
### **1. WORLD TEMPLATES** 🌍
|
||||
Interactive 3D environments built with Three.js
|
||||
|
||||
| Template | Description | Features |
|
||||
|----------|-------------|----------|
|
||||
| `blackroad-world-template.html` | Base 3D world starter | Sphere, orbit controls, stats |
|
||||
| `blackroad-earth.html` | Global network visualization | Cities, connections, glow effects |
|
||||
| `blackroad-earth-biomes.html` | Living Earth with climate zones | Biomes, weather, day/night cycle |
|
||||
| `blackroad-earth-game.html` | Interactive Earth game | Click cities, missions, score |
|
||||
| `blackroad-earth-real.html` | Photorealistic Earth | High-res textures, atmosphere |
|
||||
| `earth-replica.html` | Simple Earth replica | Minimal, clean, starter |
|
||||
| `blackroad-living-planet.html` | Animated living planet | Particle systems, evolution |
|
||||
| `blackroad-living-earth.html` | Living Earth v2 | Enhanced biomes, ecosystems |
|
||||
| `blackroad-living-world.html` | Complete living world | Full simulation, AI agents |
|
||||
| `blackroad-world-v2.html` | World template v2 | Improved performance, features |
|
||||
| `blackroad-3d-world.html` | Basic 3D world | Geometric shapes, lighting |
|
||||
| `blackroad-metaverse.html` | Metaverse environment | Multi-user, avatars, spaces |
|
||||
| `blackroad-game.html` | Game template | Physics, controls, gameplay |
|
||||
|
||||
### **2. ANIMATION TEMPLATES** ✨
|
||||
Motion systems and visual effects
|
||||
|
||||
| Template | Description | Features |
|
||||
|----------|-------------|----------|
|
||||
| `blackroad-animation.html` | Animation system | Keyframes, easing, sequences |
|
||||
| `blackroad-motion.html` | Motion graphics | Particles, trails, effects |
|
||||
| `blackroad-ultimate.html` | Ultimate animation suite | All effects combined |
|
||||
| `schematiq-animation.html` | Schematiq motion system | Design system animations |
|
||||
|
||||
### **3. WEBSITE TEMPLATES** 🌐
|
||||
Landing pages and web experiences
|
||||
|
||||
| Template | Description | Features |
|
||||
|----------|-------------|----------|
|
||||
| `schematiq-page.html` | Schematiq design system | Component library, docs |
|
||||
|
||||
---
|
||||
|
||||
## **TEMPLATE STRUCTURE**
|
||||
|
||||
Every RedLight template follows this pattern:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BlackRoad OS — [Template Name]</title>
|
||||
<style>
|
||||
/* BlackRoad brand styles */
|
||||
/* Gradient colors: #FF9D00 → #FF6B00 → #FF0066 → #D600AA → #7700FF → #0066FF */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Info panel (top-left) -->
|
||||
<div id="info">
|
||||
<h1>Title</h1>
|
||||
<p>Description</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats panel (top-right) -->
|
||||
<div id="stats">
|
||||
<!-- Real-time stats -->
|
||||
</div>
|
||||
|
||||
<!-- Controls (bottom-right) -->
|
||||
<div id="controls">
|
||||
<!-- Interactive buttons -->
|
||||
</div>
|
||||
|
||||
<!-- Three.js CDN -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Template logic
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **BRAND COLORS**
|
||||
|
||||
All RedLight templates use the **BlackRoad gradient palette**:
|
||||
|
||||
```css
|
||||
/* Primary gradient */
|
||||
background: linear-gradient(90deg,
|
||||
#FF9D00, /* Amber */
|
||||
#FF6B00, /* Orange */
|
||||
#FF0066, /* Pink */
|
||||
#FF006B, /* Magenta */
|
||||
#D600AA, /* Purple */
|
||||
#7700FF, /* Violet */
|
||||
#0066FF /* Blue */
|
||||
);
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
- Text gradients: `-webkit-background-clip: text; -webkit-text-fill-color: transparent;`
|
||||
- Glow effects: `box-shadow: 0 0 20px rgba(255, 29, 108, 0.5);`
|
||||
- Particles: Random colors from palette
|
||||
- UI accents: `#FF1D6C` (primary pink)
|
||||
|
||||
---
|
||||
|
||||
## **DEPLOYMENT**
|
||||
|
||||
### **Cloudflare Pages**
|
||||
|
||||
```bash
|
||||
# Deploy template
|
||||
wrangler pages deploy blackroad-earth.html --project-name=earth
|
||||
|
||||
# Custom domain
|
||||
wrangler pages domain add earth.blackroad.io
|
||||
```
|
||||
|
||||
### **GitHub Pages**
|
||||
|
||||
```bash
|
||||
# Commit template
|
||||
git add blackroad-earth.html
|
||||
git commit -m "Add Earth template"
|
||||
git push
|
||||
|
||||
# Deploy
|
||||
# Settings → Pages → Source: main branch → /
|
||||
# URL: https://blackroad-os.github.io/blackroad-earth.html
|
||||
```
|
||||
|
||||
### **Railway**
|
||||
|
||||
```bash
|
||||
# Create project
|
||||
railway init
|
||||
|
||||
# Deploy
|
||||
railway up
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **TEMPLATE METADATA**
|
||||
|
||||
Each template includes metadata for indexing:
|
||||
|
||||
```javascript
|
||||
const TEMPLATE_META = {
|
||||
id: 'blackroad-earth',
|
||||
name: 'BlackRoad Earth',
|
||||
category: 'world',
|
||||
tags: ['3d', 'earth', 'globe', 'network'],
|
||||
version: '1.0.0',
|
||||
author: 'BlackRoad OS',
|
||||
license: 'MIT',
|
||||
dependencies: ['three.js@r128'],
|
||||
colors: ['#FF9D00', '#FF6B00', '#FF0066', '#D600AA', '#7700FF', '#0066FF'],
|
||||
features: [
|
||||
'Orbit controls',
|
||||
'City markers',
|
||||
'Network connections',
|
||||
'Glow effects',
|
||||
'Day/night cycle'
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **INTEGRATION WITH GREENLIGHT**
|
||||
|
||||
RedLight templates integrate with GreenLight project management:
|
||||
|
||||
```bash
|
||||
# Log template deployment
|
||||
source ~/memory-greenlight-templates.sh
|
||||
|
||||
gl_deploy \
|
||||
"earth.blackroad.io" \
|
||||
"https://earth.blackroad.io" \
|
||||
"RedLight Earth template deployed" \
|
||||
"👉" \
|
||||
"🎨"
|
||||
|
||||
# Log template creation
|
||||
gl_feature \
|
||||
"RedLight Mars template" \
|
||||
"Interactive Mars globe with rover missions" \
|
||||
"🍖" \
|
||||
"⭐"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **TEMPLATE CATEGORIES IN GREENLIGHT**
|
||||
|
||||
| Emoji | Category | Code | Description |
|
||||
|-------|----------|------|-------------|
|
||||
| 🌍 | WORLD | `world` | 3D interactive worlds |
|
||||
| 🌐 | WEBSITE | `website` | Landing pages, dashboards |
|
||||
| ✨ | ANIMATION | `animation` | Motion graphics, effects |
|
||||
| 🎨 | DESIGN | `design` | Design systems, components |
|
||||
| 🎮 | GAME | `game` | Interactive games |
|
||||
| 📱 | APP | `app` | Web applications |
|
||||
| 🖼️ | VISUAL | `visual` | Visual effects, shaders |
|
||||
|
||||
---
|
||||
|
||||
## **REDLIGHT MEMORY TEMPLATES**
|
||||
|
||||
### Template: Create template
|
||||
```bash
|
||||
rl_template_create() {
|
||||
local template_name="$1"
|
||||
local category="$2" # world, website, animation, design
|
||||
local description="$3"
|
||||
|
||||
local category_emoji=""
|
||||
case "$category" in
|
||||
world) category_emoji="🌍" ;;
|
||||
website) category_emoji="🌐" ;;
|
||||
animation) category_emoji="✨" ;;
|
||||
design) category_emoji="🎨" ;;
|
||||
game) category_emoji="🎮" ;;
|
||||
*) category_emoji="🔴" ;;
|
||||
esac
|
||||
|
||||
~/memory-system.sh log "created" "$template_name" \
|
||||
"[🔴${category_emoji}👉📌] RedLight template: $description"
|
||||
}
|
||||
```
|
||||
|
||||
### Template: Deploy template
|
||||
```bash
|
||||
rl_template_deploy() {
|
||||
local template_name="$1"
|
||||
local url="$2"
|
||||
local platform="${3:-cloudflare}" # cloudflare, github, railway
|
||||
|
||||
local platform_emoji=""
|
||||
case "$platform" in
|
||||
cloudflare) platform_emoji="☁️" ;;
|
||||
github) platform_emoji="🐙" ;;
|
||||
railway) platform_emoji="🚂" ;;
|
||||
*) platform_emoji="🌐" ;;
|
||||
esac
|
||||
|
||||
~/memory-system.sh log "deployed" "$template_name" \
|
||||
"[🔴🚀${platform_emoji}✅] Template deployed: $url"
|
||||
}
|
||||
```
|
||||
|
||||
### Template: Update template
|
||||
```bash
|
||||
rl_template_update() {
|
||||
local template_name="$1"
|
||||
local changes="$2"
|
||||
|
||||
~/memory-system.sh log "updated" "$template_name" \
|
||||
"[🔴🔄👉📌] Template updated: $changes"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **TEMPLATE LIBRARY STRUCTURE**
|
||||
|
||||
```
|
||||
redlight-templates/
|
||||
├── worlds/
|
||||
│ ├── blackroad-earth.html
|
||||
│ ├── blackroad-earth-biomes.html
|
||||
│ ├── blackroad-earth-game.html
|
||||
│ ├── blackroad-living-planet.html
|
||||
│ ├── blackroad-metaverse.html
|
||||
│ └── blackroad-world-template.html
|
||||
├── animations/
|
||||
│ ├── blackroad-animation.html
|
||||
│ ├── blackroad-motion.html
|
||||
│ └── schematiq-animation.html
|
||||
├── websites/
|
||||
│ └── schematiq-page.html
|
||||
├── games/
|
||||
│ └── blackroad-game.html
|
||||
├── components/
|
||||
│ ├── three-js-setup.js
|
||||
│ ├── orbit-controls.js
|
||||
│ ├── particle-system.js
|
||||
│ └── glow-effects.js
|
||||
└── assets/
|
||||
├── textures/
|
||||
│ ├── earth-8k.jpg
|
||||
│ ├── earth-normal.jpg
|
||||
│ └── earth-clouds.png
|
||||
├── fonts/
|
||||
│ └── inter.woff2
|
||||
└── icons/
|
||||
└── blackroad-logo.svg
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **NATS SUBJECT PATTERNS**
|
||||
|
||||
```
|
||||
redlight.{category}.{template_id}.{action}
|
||||
|
||||
Examples:
|
||||
redlight.world.earth.deployed
|
||||
redlight.animation.motion.created
|
||||
redlight.website.schematiq.updated
|
||||
redlight.game.blackroad.published
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **DATABASE SCHEMA**
|
||||
|
||||
```sql
|
||||
CREATE TYPE rl_category AS ENUM (
|
||||
'world', 'website', 'animation', 'design', 'game', 'app', 'visual'
|
||||
);
|
||||
|
||||
CREATE TYPE rl_status AS ENUM (
|
||||
'draft', 'wip', 'review', 'published', 'archived', 'deprecated'
|
||||
);
|
||||
|
||||
CREATE TABLE redlight_templates (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
template_id VARCHAR(255) UNIQUE NOT NULL,
|
||||
name VARCHAR(255) NOT NULL,
|
||||
category rl_category NOT NULL,
|
||||
description TEXT,
|
||||
file_path TEXT NOT NULL,
|
||||
version VARCHAR(50) DEFAULT '1.0.0',
|
||||
status rl_status DEFAULT 'draft',
|
||||
tags TEXT[],
|
||||
dependencies JSONB,
|
||||
metadata JSONB,
|
||||
deployed_url TEXT,
|
||||
preview_url TEXT,
|
||||
created_at TIMESTAMP DEFAULT NOW(),
|
||||
updated_at TIMESTAMP DEFAULT NOW(),
|
||||
deployed_at TIMESTAMP
|
||||
);
|
||||
|
||||
CREATE TABLE redlight_deployments (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
template_id UUID REFERENCES redlight_templates(id),
|
||||
url TEXT NOT NULL,
|
||||
platform VARCHAR(100), -- cloudflare, github, railway
|
||||
environment VARCHAR(50), -- staging, production
|
||||
version VARCHAR(50),
|
||||
status VARCHAR(50), -- deploying, active, failed, retired
|
||||
deployed_at TIMESTAMP DEFAULT NOW(),
|
||||
metadata JSONB
|
||||
);
|
||||
|
||||
CREATE TABLE redlight_analytics (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
template_id UUID REFERENCES redlight_templates(id),
|
||||
views INTEGER DEFAULT 0,
|
||||
interactions INTEGER DEFAULT 0,
|
||||
avg_session_duration INTERVAL,
|
||||
bounce_rate DECIMAL(5,2),
|
||||
recorded_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **CLI COMMANDS**
|
||||
|
||||
```bash
|
||||
# Create template management script
|
||||
~/redlight-templates.sh create <name> <category> <description>
|
||||
~/redlight-templates.sh list [category]
|
||||
~/redlight-templates.sh deploy <template> <platform> [environment]
|
||||
~/redlight-templates.sh update <template> <changes>
|
||||
~/redlight-templates.sh status [template]
|
||||
~/redlight-templates.sh analytics <template>
|
||||
~/redlight-templates.sh preview <template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **EXAMPLES**
|
||||
|
||||
### Create new world template
|
||||
```bash
|
||||
# Create template file
|
||||
cp redlight-templates/worlds/blackroad-world-template.html \
|
||||
redlight-templates/worlds/blackroad-mars.html
|
||||
|
||||
# Log creation
|
||||
rl_template_create "blackroad-mars" "world" \
|
||||
"Interactive Mars globe with rover missions"
|
||||
|
||||
# Update GreenLight
|
||||
gl_feature "RedLight Mars template" \
|
||||
"Interactive Mars exploration experience" \
|
||||
"🍖" "⭐"
|
||||
```
|
||||
|
||||
### Deploy template
|
||||
```bash
|
||||
# Deploy to Cloudflare Pages
|
||||
wrangler pages deploy redlight-templates/worlds/blackroad-earth.html \
|
||||
--project-name=earth-blackroad
|
||||
|
||||
# Log deployment
|
||||
rl_template_deploy "blackroad-earth" \
|
||||
"https://earth.blackroad.io" \
|
||||
"cloudflare"
|
||||
|
||||
# Update GreenLight
|
||||
gl_deploy "earth.blackroad.io" \
|
||||
"https://earth.blackroad.io" \
|
||||
"RedLight Earth template live" \
|
||||
"👉" "🎨"
|
||||
```
|
||||
|
||||
### Update template
|
||||
```bash
|
||||
# Make changes to template
|
||||
# (edit blackroad-earth.html)
|
||||
|
||||
# Log update
|
||||
rl_template_update "blackroad-earth" \
|
||||
"Added city labels and enhanced glow effects"
|
||||
|
||||
# Update GreenLight
|
||||
gl_wip "blackroad-earth template" \
|
||||
"Enhanced city labels and glow effects" \
|
||||
"🌸" "👉"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **TEMPLATE FEATURES TAXONOMY**
|
||||
|
||||
### 3D Features
|
||||
- ✅ Orbit controls
|
||||
- ✅ Zoom controls
|
||||
- ✅ Pan controls
|
||||
- ✅ Auto-rotate
|
||||
- ✅ Camera animations
|
||||
- ✅ Click interactions
|
||||
- ✅ Hover effects
|
||||
- ✅ Touch support
|
||||
- ✅ VR support
|
||||
|
||||
### Visual Features
|
||||
- ✅ Particle systems
|
||||
- ✅ Glow effects
|
||||
- ✅ Shaders
|
||||
- ✅ Textures
|
||||
- ✅ Normal maps
|
||||
- ✅ Bump maps
|
||||
- ✅ Environment maps
|
||||
- ✅ Post-processing
|
||||
- ✅ Bloom
|
||||
- ✅ Fog
|
||||
|
||||
### Interactive Features
|
||||
- ✅ Click handlers
|
||||
- ✅ Keyboard controls
|
||||
- ✅ Gamepad support
|
||||
- ✅ Voice commands
|
||||
- ✅ Gesture recognition
|
||||
- ✅ Multiplayer
|
||||
- ✅ Real-time sync
|
||||
- ✅ Chat
|
||||
- ✅ Avatars
|
||||
|
||||
### Data Features
|
||||
- ✅ API integration
|
||||
- ✅ WebSocket streams
|
||||
- ✅ Real-time updates
|
||||
- ✅ Database sync
|
||||
- ✅ Analytics tracking
|
||||
- ✅ Error logging
|
||||
- ✅ Performance monitoring
|
||||
|
||||
---
|
||||
|
||||
## **PERFORMANCE TARGETS**
|
||||
|
||||
| Metric | Target | Excellent |
|
||||
|--------|--------|-----------|
|
||||
| Load time | < 3s | < 1s |
|
||||
| FPS | > 30 | > 60 |
|
||||
| Memory | < 500MB | < 200MB |
|
||||
| Bundle size | < 2MB | < 500KB |
|
||||
| Time to interactive | < 5s | < 2s |
|
||||
|
||||
---
|
||||
|
||||
## **BROWSER SUPPORT**
|
||||
|
||||
- ✅ Chrome 90+
|
||||
- ✅ Firefox 88+
|
||||
- ✅ Safari 14+
|
||||
- ✅ Edge 90+
|
||||
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
- ⚠️ IE11 (degraded, 2D fallback)
|
||||
|
||||
---
|
||||
|
||||
## **ACCESSIBILITY**
|
||||
|
||||
All RedLight templates include:
|
||||
- ✅ Keyboard navigation
|
||||
- ✅ Screen reader support
|
||||
- ✅ High contrast mode
|
||||
- ✅ Reduced motion mode
|
||||
- ✅ ARIA labels
|
||||
- ✅ Focus indicators
|
||||
- ✅ Alt text for images
|
||||
|
||||
---
|
||||
|
||||
## **LICENSE**
|
||||
|
||||
All RedLight templates are:
|
||||
- **Open Source** (MIT License)
|
||||
- **Free to use** (commercial & personal)
|
||||
- **Customizable** (modify freely)
|
||||
- **Attribution appreciated** (not required)
|
||||
|
||||
---
|
||||
|
||||
## **THE TRINITY**
|
||||
|
||||
**🟢 GreenLight** = Project Management (tasks, workflows, coordination)
|
||||
**🟡 YellowLight** = Infrastructure (repos, connectors, deployments)
|
||||
**🔴 RedLight** = Templates (worlds, websites, experiences)
|
||||
|
||||
Together: **The complete BlackRoad OS visual language.** 🛣️
|
||||
|
||||
---
|
||||
|
||||
**Created:** December 23, 2025
|
||||
**Author:** Cece + Alexa
|
||||
**Version:** 1.0.0
|
||||
**Status:** 🎯 CANONICAL
|
||||
Reference in New Issue
Block a user