john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
tractatus/public/about.html
TheFlow 1c00a42153 feat(phase3): apply scroll animations site-wide to all key pages 
SUMMARY:
Completed Phase 3 Task 3.1.3: Applied scroll animations to all key
content pages across the site for consistent, engaging user experience.

CHANGES:

1. Added scroll-animations.js script to 5 key pages:
   - public/researcher.html
   - public/implementer.html
   - public/leader.html
   - public/architecture.html
   - public/about.html

2. Added scroll animation classes to researcher.html:
   - Research Context section: fade-in
   - Development note (amber box): slide-up (100ms stagger)
   - Theoretical Foundations section: fade-in
   - Organisational Theory accordion: slide-up (100ms stagger)
   - Values Pluralism accordion: slide-up (200ms stagger)

ANIMATION STRATEGY:
- Section headings: fade-in (subtle entrance)
- Content boxes: slide-up with staggered delays
- Accordion items: slide-up with progressive delays (100ms, 200ms, 300ms)
- All animations respect prefers-reduced-motion

ACCESSIBILITY:
✓ Zero CSP violations maintained across all pages
✓ GPU-accelerated transitions (60fps)
✓ Respects prefers-reduced-motion user preference
✓ Progressive enhancement (graceful degradation)

PERFORMANCE:
- Intersection Observer (better than scroll listeners)
- Unobserves elements after animation (memory efficient)
- Minimal JavaScript overhead (<5KB gzipped)

UI_TRANSFORMATION_PROJECT_PLAN.md:
✓ Phase 3 Task 3.1.1: Implemented Intersection Observer
✓ Phase 3 Task 3.1.2: Added scroll animations to homepage
✓ Phase 3 Task 3.1.3: Applied scroll animations site-wide

NEXT STEPS:
- Phase 3 Task 3.2: Interactive architecture diagram (HIGH priority)
- Phase 3 Task 3.3: Data visualizations
- Phase 3 Task 3.6: Interactive documentation features

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-19 15:23:26 +13:00

256 lines
15 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Tractatus AI Safety Framework</title>
<meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.">
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=1760816800">
<style>
/* Accessibility: Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
/* Accessibility: Focus indicators (WCAG 2.4.7) */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
a:focus:not(:focus-visible) { outline: none; }
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
</style>
</head>
<body class="bg-gray-50">
<!-- Skip Link for Keyboard Navigation -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation (injected by navbar.js) -->
<script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
<!-- Breadcrumb Navigation -->
<nav class="bg-gray-50 border-b border-gray-200 py-3" aria-label="Breadcrumb">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ol class="flex items-center space-x-2 text-sm">
<li><a href="/" class="hover:underline transition-colors text-tractatus-link">Home</a></li>
<li class="text-gray-400">/</li>
<li class="text-gray-900 font-medium" aria-current="page">About</li>
</ol>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-5xl font-bold text-gray-900 mb-6" data-i18n="header.title">
About Tractatus
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="header.subtitle">
A framework for AI safety through architectural constraints, preserving human agency where it matters most.
</p>
</div>
</div>
</div>
<!-- Mission Section -->
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="mission.heading">Our Mission</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6" data-i18n-html="mission.intro">
The Tractatus Framework exists to address a fundamental problem in AI safety: current approaches rely on training, fine-tuning, and corporate governance—all of which can fail, drift, or be overridden. We propose <strong>safety through architecture</strong>.
</p>
<p class="mb-6" data-i18n-html="mission.wittgenstein">
Inspired by Ludwig Wittgenstein's <em>Tractatus Logico-Philosophicus</em>, our framework recognizes that some domains—values, ethics, cultural context, human agency—cannot be systematized. What cannot be systematized must not be automated. AI systems should have structural constraints that prevent them from crossing these boundaries.
</p>
<blockquote class="border-l-4 border-blue-600 pl-6 italic text-gray-700 my-6">
<span data-i18n-html="mission.quote">"Whereof one cannot speak, thereof one must be silent."</span><br>
<span data-i18n-html="mission.quote_source">— Ludwig Wittgenstein, <em>Tractatus</em> (§7)</span>
</blockquote>
<p class="mb-4" data-i18n-html="mission.applied">
Applied to AI: <strong>"What cannot be systematized must not be automated."</strong>
</p>
</div>
</section>
<!-- Core Values -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="core_values.heading">Core Values</h2>
<div class="space-y-6">
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-600">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.sovereignty_title">Sovereignty</h3>
<p class="text-gray-600" data-i18n="core_values.sovereignty_desc">
Individuals and communities must maintain control over decisions affecting their data, privacy, and values. AI systems must preserve human agency, not erode it.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-600">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.transparency_title">Transparency</h3>
<p class="text-gray-600" data-i18n="core_values.transparency_desc">
All AI decisions must be explainable, auditable, and reversible. No black boxes. Users deserve to understand how and why systems make choices, and have power to override them.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-600">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.harmlessness_title">Harmlessness</h3>
<p class="text-gray-600" data-i18n="core_values.harmlessness_desc">
AI systems must not cause harm through action or inaction. This includes preventing drift, detecting degradation, and enforcing boundaries against values erosion.
</p>
</div>
<div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-orange-600">
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="core_values.community_title">Community</h3>
<p class="text-gray-600" data-i18n="core_values.community_desc">
AI safety is a collective endeavor. We are committed to open collaboration, knowledge sharing, and empowering communities to shape the AI systems that affect their lives.
</p>
</div>
</div>
<div class="mt-8 text-center">
<a href="/about/values.html" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition" data-i18n="core_values.read_values_btn">
Read Our Complete Values Statement →
</a>
</div>
</section>
<!-- How It Works -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="how_it_works.heading">How It Works</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6" data-i18n="how_it_works.intro">
The Tractatus Framework consists of five integrated components that work together to enforce structural safety:
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.classifier_title">InstructionPersistenceClassifier</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.classifier_desc">
Classifies instructions by quadrant (Strategic, Operational, Tactical, System, Stochastic) and determines persistence level (HIGH/MEDIUM/LOW/VARIABLE).
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.validator_title">CrossReferenceValidator</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.validator_desc">
Validates AI actions against stored instructions to prevent pattern recognition bias (like the 27027 incident where AI's training patterns immediately overrode user's explicit "port 27027" instruction).
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.boundary_title">BoundaryEnforcer</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.boundary_desc">
Ensures AI never makes values decisions without human approval. Privacy trade-offs, user agency, cultural context—these require human judgment.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.pressure_title">ContextPressureMonitor</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.pressure_desc">
Detects when session conditions increase error probability (token pressure, message length, task complexity) and adjusts behavior or suggests handoff.
</p>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2" data-i18n="how_it_works.metacognitive_title">MetacognitiveVerifier</h3>
<p class="text-sm text-gray-600" data-i18n="how_it_works.metacognitive_desc">
AI self-checks complex reasoning before proposing actions. Evaluates alignment, coherence, completeness, safety, and alternatives.
</p>
</div>
</div>
<div class="mt-8 text-center">
<a href="/implementer.html" class="inline-block bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition" data-i18n="how_it_works.read_technical_btn">
Read Technical Documentation & Implementation Guide →
</a>
</div>
</section>
<!-- Origin Story -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="origin_story.heading">Origin Story</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6" data-i18n="origin_story.paragraph_1">
The Tractatus Framework emerged from real-world AI failures experienced during extended Claude Code sessions. The "27027 incident"—where AI's training patterns immediately overrode an explicit instruction (user said "port 27027", AI used "port 27017")—revealed that traditional safety approaches were insufficient. This wasn't forgetting; it was pattern recognition bias autocorrecting the user.
</p>
<p class="mb-6" data-i18n="origin_story.paragraph_2">
After documenting multiple failure modes (pattern recognition bias, values drift, silent degradation), we recognized a pattern: AI systems lacked structural constraints. They could theoretically "learn" safety, but in practice their training patterns overrode explicit instructions, and the problem gets worse as capabilities increase.
</p>
<p class="mb-4" data-i18n="origin_story.paragraph_3">
The solution wasn't better training—it was architecture. Drawing inspiration from Wittgenstein's insight that some things lie beyond the limits of language (and thus systematization), we built a framework that enforces boundaries through structure, not aspiration.
</p>
</div>
</section>
<!-- License & Contribution -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-6" data-i18n="license.heading">License & Contribution</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-4" data-i18n-html="license.intro">
The Tractatus Framework is open source under the <strong>Apache License 2.0</strong>. We encourage:
</p>
<ul class="mb-6">
<li data-i18n="license.encouragement_1">Academic research and validation studies</li>
<li data-i18n="license.encouragement_2">Implementation in production AI systems</li>
<li data-i18n="license.encouragement_3">Submission of failure case studies</li>
<li data-i18n="license.encouragement_4">Theoretical extensions and improvements</li>
<li data-i18n="license.encouragement_5">Community collaboration and knowledge sharing</li>
</ul>
<p class="mb-8" data-i18n="license.rationale">
The framework is intentionally permissive because AI safety benefits from transparency and collective improvement, not proprietary control.
</p>
<h3 class="text-xl font-bold text-gray-900 mt-8 mb-4" data-i18n="license.why_apache_title">Why Apache 2.0?</h3>
<p class="mb-4" data-i18n="license.why_apache_intro">
We chose Apache 2.0 over MIT because it provides:
</p>
<ul class="mb-6">
<li data-i18n-html="license.patent_protection"><strong>Patent Protection:</strong> Explicit patent grant protects users from patent litigation by contributors</li>
<li data-i18n-html="license.contributor_clarity"><strong>Contributor Clarity:</strong> Clear terms for how contributions are licensed</li>
<li data-i18n-html="license.permissive_use"><strong>Permissive Use:</strong> Like MIT, allows commercial use and inclusion in proprietary products</li>
<li data-i18n-html="license.community_standard"><strong>Community Standard:</strong> Widely used in AI/ML projects (TensorFlow, PyTorch, Apache Spark)</li>
</ul>
<p class="mt-4">
<a href="/LICENSE" class="text-blue-600 hover:text-blue-700 font-medium" data-i18n="license.view_license_link">View full Apache 2.0 License →</a>
</p>
</div>
</section>
</div>
<!-- CTA Section -->
<div class="bg-gradient-to-r from-blue-600 to-purple-600 py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
<h2 class="text-3xl font-bold mb-4" data-i18n="cta.title">Join the Movement</h2>
<p class="text-xl mb-8 opacity-90" data-i18n="cta.description">
Help build AI systems that preserve human agency through architectural guarantees.
</p>
<div class="flex justify-center space-x-4">
<a href="/researcher.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition" data-i18n="cta.for_researchers_btn">
For Researchers
</a>
<a href="/implementer.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white" data-i18n="cta.for_implementers_btn">
For Implementers
</a>
<a href="/leader.html" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white" data-i18n="cta.for_leaders_btn">
For Leaders
</a>
</div>
</div>
</div>
<!-- Footer with Te Tiriti Acknowledgment -->
<!-- Footer -->
<!-- Internationalization -->
<script src="/js/i18n-simple.js?v=1760818106"></script>
<script src="/js/components/language-selector.js?v=1760818106"></script>
<!-- Scroll Animations (Phase 3) -->
<script src="/js/scroll-animations.js"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink