mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OC: correct the diagram to the real model — interlocking drama (Persecutor/Rescuer/Victim) + empowerment (Creator/Challenger/Coach) triangles with proper transformation pairings

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-16 12:47:05 -07:00
parent 3661d41eee
commit aeb57c0a01
1 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+32 -28
View File
@@ -76,7 +76,7 @@
<article class="card feature">
<p class="card-tag">Flagship program</p>
<h3>Breaking the blame game</h3>
<p>Every shop has a blame game: a victim, a villain who gets blamed, a hero who burns out. It kills change. We move teams into a better triangle: people who <strong>own</strong> the outcome, <strong>call it straight</strong>, and <strong>build each other up</strong>.</p>
<p>Every shop runs the drama triangle: someone stuck as the <strong>victim</strong>, someone <strong>persecuting</strong> and blaming, someone <strong>rescuing</strong> and burning out. It kills change. We move people into the empowered version — a <strong>creator</strong> who owns the outcome, a <strong>challenger</strong> who calls it straight, a <strong>coach</strong> who builds others up.</p>
<p class="outcome">Stop the blame cycles that stall every change.</p>
</article>
<article class="card">
@@ -92,34 +92,38 @@
<section class="band light diagram" data-bg="light">
<div class="wrap">
<p class="eyebrow">From the blame game to ownership</p>
<h2>Two triangles, <em>one shift.</em></h2>
<svg class="triangles" viewBox="0 0 770 380" role="img" aria-labelledby="tri-title tri-desc">
<title id="tri-title">The drama triangle versus the empowerment triangle</title>
<desc id="tri-desc">On the left, the drama triangle below the line: Victim, Villain, and Rescuer. An arrow points right to the empowerment triangle above the line: Creator, Challenger, and Coach.</desc>
<g fill="none" stroke="#b8836f" stroke-width="2"><polygon points="175,95 70,295 280,295" fill="rgba(184,131,111,0.07)"/></g>
<g fill="#b8836f"><circle cx="175" cy="95" r="5"/><circle cx="70" cy="295" r="5"/><circle cx="280" cy="295" r="5"/></g>
<g text-anchor="middle" font-family="'DM Sans',sans-serif">
<text x="175" y="70" fill="#0f1729" font-size="16" font-weight="700">Rescuer</text>
<text x="175" y="86" fill="#4a5468" font-size="12.5">swoops in, burns out</text>
<text x="70" y="320" fill="#0f1729" font-size="16" font-weight="700">Victim</text>
<text x="70" y="336" fill="#4a5468" font-size="12.5">&#8220;nothing I can do&#8221;</text>
<text x="280" y="320" fill="#0f1729" font-size="16" font-weight="700">Villain</text>
<text x="280" y="336" fill="#4a5468" font-size="12.5">the one who gets blamed</text>
<text x="175" y="362" fill="#b8836f" font-size="12.5" font-weight="700" letter-spacing="1.5">BELOW THE LINE</text>
<p class="eyebrow">From the drama triangle to the empowerment dynamic</p>
<h2>From drama to <em>empowerment.</em></h2>
<svg class="triangles" viewBox="0 0 760 540" role="img" aria-labelledby="tri-title tri-desc">
<title id="tri-title">From the drama triangle to the empowerment dynamic</title>
<desc id="tri-desc">Two interlocking triangles. The grey downward triangle is the drama triangle: Persecutor (top left), Rescuer (top right) and Victim (bottom). The amber upward triangle is the empowerment dynamic: Creator (top), Challenger (bottom left) and Coach (bottom right). Dashed arrows show each drama role shifting to its empowered counterpart: Victim to Creator, Persecutor to Challenger, Rescuer to Coach.</desc>
<polygon points="233,205 527,205 380,460" fill="rgba(107,114,128,0.42)" stroke="#6b7280" stroke-width="1.5"/>
<polygon points="380,120 233,375 527,375" fill="rgba(232,155,28,0.5)" stroke="#c47f12" stroke-width="1.5"/>
<g stroke="#5b626d" stroke-width="1.4" fill="none" stroke-dasharray="5 5">
<line x1="233" y1="230" x2="233" y2="350"/>
<line x1="527" y1="230" x2="527" y2="350"/>
<line x1="380" y1="442" x2="380" y2="152"/>
</g>
<g stroke="#e89b1c" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M330,200 L432,200"/><path d="M420,191 L434,200 L420,209"/></g>
<text x="381" y="186" text-anchor="middle" fill="#4a5468" font-size="12.5" font-family="'DM Sans',sans-serif">we move teams</text>
<g fill="none" stroke="#e89b1c" stroke-width="2"><polygon points="595,95 490,295 700,295" fill="rgba(232,155,28,0.10)"/></g>
<g fill="#e89b1c"><circle cx="595" cy="95" r="5"/><circle cx="490" cy="295" r="5"/><circle cx="700" cy="295" r="5"/></g>
<g text-anchor="middle" font-family="'DM Sans',sans-serif">
<text x="595" y="70" fill="#0f1729" font-size="16" font-weight="700">Coach</text>
<text x="595" y="86" fill="#4a5468" font-size="12.5">builds people up</text>
<text x="490" y="320" fill="#0f1729" font-size="16" font-weight="700">Creator</text>
<text x="490" y="336" fill="#4a5468" font-size="12.5">owns the outcome</text>
<text x="700" y="320" fill="#0f1729" font-size="16" font-weight="700">Challenger</text>
<text x="700" y="336" fill="#4a5468" font-size="12.5">calls it straight</text>
<text x="595" y="362" fill="#c47f12" font-size="12.5" font-weight="700" letter-spacing="1.5">ABOVE THE LINE</text>
<g stroke="#5b626d" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M228,342 L233,350 L238,342"/>
<path d="M522,342 L527,350 L532,342"/>
<path d="M375,160 L380,152 L385,160"/>
</g>
<g fill="#6b7280"><circle cx="233" cy="205" r="4"/><circle cx="527" cy="205" r="4"/><circle cx="380" cy="460" r="4"/></g>
<g fill="#c47f12"><circle cx="380" cy="120" r="4"/><circle cx="233" cy="375" r="4"/><circle cx="527" cy="375" r="4"/></g>
<g font-family="'DM Sans',sans-serif">
<text x="380" y="86" text-anchor="middle" fill="#c47f12" font-size="14" font-weight="700" letter-spacing="1">CREATOR</text>
<text x="380" y="103" text-anchor="middle" fill="#6b7280" font-size="11">responsible · visionary</text>
<text x="212" y="395" text-anchor="end" fill="#c47f12" font-size="14" font-weight="700" letter-spacing="1">CHALLENGER</text>
<text x="212" y="412" text-anchor="end" fill="#6b7280" font-size="11">accountable · assertive</text>
<text x="548" y="395" text-anchor="start" fill="#c47f12" font-size="14" font-weight="700" letter-spacing="1">COACH</text>
<text x="548" y="412" text-anchor="start" fill="#6b7280" font-size="11">supportive · encouraging</text>
<text x="212" y="198" text-anchor="end" fill="#4a5468" font-size="14" font-weight="700" letter-spacing="1">PERSECUTOR</text>
<text x="212" y="215" text-anchor="end" fill="#6b7280" font-size="11">blaming · &#8220;I'm right&#8221;</text>
<text x="548" y="198" text-anchor="start" fill="#4a5468" font-size="14" font-weight="700" letter-spacing="1">RESCUER</text>
<text x="548" y="215" text-anchor="start" fill="#6b7280" font-size="11">fixing others · &#8220;I'm good&#8221;</text>
<text x="380" y="492" text-anchor="middle" fill="#4a5468" font-size="14" font-weight="700" letter-spacing="1">VICTIM</text>
<text x="380" y="509" text-anchor="middle" fill="#6b7280" font-size="11">powerless · &#8220;I'm blameless&#8221;</text>
</g>
</svg>
</div>