ENOTRIUM - Landing Page

A high-performance, theme-aware landing page built with Next.js 16, React 19, and Tailwind CSS 4. Features sleek animations, interactive visualizations, and a minimalistic design optimized for YC-level SaaS presentation.

Quick Start

Prerequisites

Node.js 20+
npm 10+

Installation

# Install dependencies
npm install --legacy-peer-deps

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

The site will be available at http://localhost:3000

Project Structure

enotrium-v3/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── layout.tsx            # Root layout with theme provider
│   │   ├── page.tsx              # Home page (lazy loads sections)
│   │   ├── globals.css           # Global styles & CSS variables
│   │   └── favicon.ico           # Site favicon
│   │
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Navbar.tsx        # Main navigation with theme toggle
│   │   │   └── Footer.tsx        # Simple footer with CTA
│   │   │
│   │   ├── sections/             # Page sections (all lazy-loaded except Hero)
│   │   │   ├── HeroSection.tsx   # Landing hero with text hover effect
│   │   │   ├── ManifestoSection.tsx    # Scroll-reveal text section
│   │   │   └── SupplyChainSection.tsx  # Globe visualization section
│   │   │
│   │   ├── ui/                   # Reusable UI components
│   │   │   ├── background-grid.tsx     # Animated dot grid background
│   │   │   ├── button.tsx              # Base button component
│   │   │   ├── calendar-picker.tsx     # Custom calendar component (unused)
│   │   │   ├── scroll-reveal.tsx       # Scroll-triggered animations
│   │   │   ├── text-hover-effect.tsx   # SVG text hover animation
│   │   │   ├── text-reveal-optimized.tsx # Progressive text reveal
│   │   │   └── typewriter.tsx          # Typewriter text effect
│   │   │
│   │   ├── visualizations/       # Complex visual components
│   │   │   ├── DarkVeil.tsx      # WebGL shader background (dark mode only)
│   │   │   ├── Globe.tsx         # 3D rotating globe (cobe)
│   │   │   └── USMap.tsx         # SVG USA map outline
│   │   │
│   │   └── theme-provider.tsx    # next-themes wrapper
│   │
│   ├── config/
│   │   └── content.ts            # Centralized content configuration
│   │
│   ├── lib/
│   │   └── utils.ts              # Utility functions (cn helper)
│   │
│   └── types/
│       └── index.ts              # TypeScript type definitions
│
├── public/                       # Static assets (currently empty)
├── package.json                  # Dependencies & scripts
├── tsconfig.json                 # TypeScript configuration
├── next.config.ts                # Next.js configuration
├── postcss.config.mjs            # PostCSS/Tailwind configuration
├── eslint.config.mjs             # ESLint configuration
└── tailwind.config.ts            # Tailwind CSS configuration (if exists)

Technology Stack

Core Framework

Next.js 16.0.6 - React framework with App Router
React 19.2.0 - UI library
TypeScript 5 - Type safety

Styling

Tailwind CSS 4 - Utility-first CSS framework
PostCSS - CSS processing
next-themes - Theme management (dark/light mode)

Animation & Interaction

Framer Motion 12.23.25 - Animation library
cobe 0.6.5 - 3D globe visualization
ogl 1.0.11 - WebGL shader rendering (DarkVeil)

UI Components

Radix UI - Headless UI primitives
Lucide React - Icon library
react-simple-maps - SVG map rendering

Utilities

clsx - Conditional className utility
tailwind-merge - Merge Tailwind classes
class-variance-authority - Component variants

External Libraries & Components

1. Cobe Globe (`Globe.tsx`)

Library: cobe (v0.6.5)
Purpose: Renders a 3D rotating Earth globe with country outlines
Configuration:

mapSamples: 8000 - Reduced for performance
devicePixelRatio: 2 - Capped for performance
Theme-aware colors (dark/light mode)
Auto-rotation at 0.003 rad/frame

Usage:

import { Globe } from "@/components/visualizations/Globe";
<Globe className="w-full h-full" />;

2. DarkVeil Shader (`DarkVeil.tsx`)

Library: ogl (v1.0.11)
Purpose: WebGL shader background with CPPN neural network pattern
Features:

Only renders in dark mode
Resolution scale: 0.35 (optimized for performance)
Custom fragment shader with hue shifting
Auto-cleanup on theme change

3. Framer Motion Animations

Library: framer-motion (v12.23.25)
Used in:

ScrollReveal.tsx - Scroll-triggered animations
TextRevealOptimized.tsx - Progressive text reveal
All section transitions

Common patterns:

// Fade up animation
<ScrollReveal animation="fade-up" delay={0.2}>
  <div>Content</div>
</ScrollReveal>

4. Background Grid (`BackgroundGrid.tsx`)

Implementation: Pure CSS + React state
Features:

Two-layer dot grid (base + interactive)
Mouse-following radial highlight
RAF-throttled for performance
Theme-aware dot colors

5. Text Hover Effect (`TextHoverEffect.tsx`)

Implementation: SVG + Canvas
Features:

Radial gradient reveal on hover
Theme-specific gradient colors
Used for "ENOTRIUM" title in Hero

6. Calendar Picker (`CalendarPicker.tsx`)

Implementation: Custom React component
Features:

Month/year navigation
Date selection
Theme-aware styling
Ready for scheduling flows

Content Management

All site content is centralized in src/config/content.ts:

export const siteConfig = {
  name: "ENOTRIUM",
  description: "Securing America's Industrial Base",
  nav: [...],
  hero: {...},
  manifesto: {...},
  supplyChain: {...},
  contact: {
    ctaHref: "https://calendly.com/enotrium/demo" // update to your booking link or scheduling service
  }
}

To Update Content

Edit src/config/content.ts
Changes automatically reflect across all sections
Type-safe with TypeScript definitions in src/types/index.ts

Styling & Theming

Theme System

Uses next-themes with class-based dark mode:

CSS Variables (globals.css):

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --border: #e5e5e5;
  --accent: #3b82f6;
}

.dark {
  --background: #000000;
  --foreground: #ededed;
  --muted: #171717;
  --muted-foreground: #a3a3a3;
  --border: #262626;
  --accent: #60a5fa;
}

Tailwind Usage

// Theme-aware classes
<div className="bg-background text-foreground">
  <p className="text-muted-foreground">Text</p>
</div>

Custom Utilities

cn() - Merge Tailwind classes (from lib/utils.ts)

import { cn } from "@/lib/utils";
<div className={cn("base-class", condition && "conditional-class")} />;

Performance Optimizations

1. Lazy Loading

All sections except Hero are lazy-loaded:

const ManifestoSection = dynamic(
  () => import("@/components/sections/ManifestoSection"),
  { ssr: true },
);

2. Component Memoization

Heavy components use React.memo:

export const Globe = memo(function Globe({ className }) {
  // Component logic
});

3. Animation Throttling

Background grid uses requestAnimationFrame throttling
Scroll reveals trigger only once (once: true)

4. Reduced Render Costs

Globe: mapSamples: 8000 (down from 16000)
DarkVeil: resolutionScale: 0.35 (down from 0.5)
Background grid: 24px spacing (fewer dots)

5. Build Optimization

Next.js 16 with Turbopack
Automatic code splitting
Image optimization (if images added)

Deployment

Vercel (Recommended)

Connect Repository:

# Push to GitHub
git init
git add .
git commit -m "Initial commit"
git remote add origin <your-repo-url>
git push -u origin main

Deploy on Vercel:
- Go to vercel.com
- Import your GitHub repository
- Vercel auto-detects Next.js
- Click "Deploy"
Environment Variables: None required for current setup

Other Platforms

Build command: npm run build
Output directory: .next
Install command: npm install --legacy-peer-deps
Node version: 20+

Production Checklist

Replace placeholder content in config/content.ts
Add favicon/metadata in app/layout.tsx
Set up analytics (Google Analytics, Plausible, etc.)
Configure CSP headers in next.config.ts

Development Guidelines

Adding a New Section

Create component:

// src/components/sections/NewSection.tsx
"use client";
import { ScrollReveal } from "@/components/ui/scroll-reveal";
import { siteConfig } from "@/config/content";

export function NewSection() {
  return (
    <section id="new-section">
      <ScrollReveal>
        <h2>{siteConfig.newSection.title}</h2>
      </ScrollReveal>
    </section>
  );
}

Add to content config:

// src/config/content.ts
export const siteConfig = {
  // ...
  newSection: {
    title: "New Section",
    description: "...",
  },
};

Add to page:

// src/app/page.tsx
const NewSection = dynamic(() => import("@/components/sections/NewSection"));

// In component:
<NewSection />;

Theme-Aware Components

Always use CSS variables or Tailwind's dark mode:

// Good
<div className="bg-background text-foreground dark:border-white/10">

// Avoid
<div style={{ background: '#000' }}>

Performance Best Practices

Memoize expensive components:

export const MyComponent = memo(function MyComponent() {
  // ...
});

Use useCallback for event handlers:

const handleClick = useCallback(() => {
  // handler logic
}, [dependencies]);

Lazy load below-the-fold content:

const HeavyComponent = dynamic(() => import("./Heavy"), {
  ssr: false,
});

Code Organization

Components: One component per file
Naming: PascalCase for components, camelCase for utilities
Exports: Named exports preferred over default
Types: Define in src/types/index.ts or colocate with component

Troubleshooting

Common Issues

Issue: Globe not rendering
Solution: Check browser console for WebGL errors. Ensure cobe is installed.

Issue: Theme not switching
Solution: Verify ThemeProvider wraps app in layout.tsx

Issue: Build fails
Solution: Run npm install --legacy-peer-deps to resolve peer dependency conflicts

Issue: Slow performance
Solution: Check if DarkVeil is rendering in light mode (should not be). Verify lazy loading is working.

Development Tips

Use npm run dev for hot reload during development
Check http://localhost:3000 in browser console for errors
TypeScript errors will show in terminal and editor
Use React DevTools to debug component renders

License

Support

For questions or issues, contact the development team.

Last Updated: December 2025
Next.js Version: 16.0.6
React Version: 19.2.0

Technical Architecture — Investor/VC Reference

NOT FOR PUBLIC DISTRIBUTION. This section contains proprietary technical specifications removed from public-facing pages. Share only under NDA with qualified investors or partners.

Vector Semantic AI — Architecture Specifications

Core Compute Primitive

System	Operation	Cost
Transformer	Multiply-Accumulate (MAC)	46× more expensive
Enotrium VSA	XOR + popcount (bitwise)	Baseline

The MAC-to-XOR energy gap is a physics constraint, not an engineering problem. No quantization or optimization closes it.

Claimed Efficiency at Scale

Scale	Efficiency Gain vs. Transformers
Tiny	—
Small	—
Medium	—
Large	—
XL	22,992×

100,000× more energy efficient at MCU/milliwatt power budgets
Single-pass learning — no backpropagation through time (BPTT), no gradient descent

Proprietary Methods

RefineHD — iterative hypervector refinement process
VSA superposition — Vector Symbolic Architecture encoding for distributed representation
Hypervectors + semantic embeddings — category-theoretic algebra of distributed representation
Hardware-defined models — architecture co-designed for MCU/FPGA execution

Hardware Targets

MCU class: milliwatt power budgets
FPGA: primary validation platform
Edge deployment: UAVs, manufacturing systems, offline infrastructure

Arthedain SNN — Technical Specifications

Neuron Model

Leaky Integrate-and-Fire (LIF) dynamics:

τ_m · dV/dt = -(V - V_rest) + R · I(t)

Spike when V ≥ V_threshold, then reset to V_reset.

Dual Eligibility Trace Parameters

Trace	Time Constant
Fast	τ_fast = 120 ms
Slow	τ_slow = 700 ms

Used for online reward-modulated STDP learning — enables single-pass adaptation without stored gradients.

Benchmarks vs. GPU Transformers

Metric	Advantage
Energy efficiency	70× higher (SynOp/J or TOPS/W vs. NVIDIA GPUs)
Memory usage	28–35% lower (vs. BPTT)
CO₂ & water footprint	50–100× lower (vs. cloud data centers)

Validation Datasets

MC Maze — neural motor decoding benchmark
Zenodo Indy — primate motor cortex recordings

FPGA Validation Strategy

Architecture mapped to FPGA for real-hardware energy measurement
SynOp count verified against simulation
Latency profiled at inference time on constrained silicon

Named Proprietary Systems

System	Description
Arthedain	Spiking Neural Network engine with LIF neurons and dual eligibility traces
Icarus	UAV/drone perception and control system
AIP (Arthedain Inference Pipeline)	Edge inference runtime
RefineHD	Hypervector refinement algorithm
VSA	Vector Symbolic Architecture encoding layer

Accuracy vs. Transformers

Specific benchmark accuracy gaps available in internal results (arthedain/results/RESULTS.md). Public site intentionally omits per-task accuracy comparisons to avoid handing competitors a target spec sheet.

Enterprise Deployment — Removed Specs

Exact Energy per Inference (by tier)

Tier	Hardware	Energy per Inference
Edge Micro	ARM Cortex-M / RISC-V MCU	2.4 nJ
Edge Pro	FPGA / ARM Cortex-A	0.36 nJ
On-Premise	x86 Server / Custom ASIC	0.036 nJ
Enterprise Cluster	Multi-node distributed	0.0036 nJ

Fault Tolerance Spec

100% accuracy maintained under 10% stuck-at-0 hardware faults

Supply Chain Detection Accuracy

99.5%+ anomaly detection accuracy at 1/10,000th the energy cost of transformer equivalents

Training Paradigm (Enterprise Custom Model)

Single-pass RefineHD training — no backpropagation, no gradient descent
VSA superposition encoding: new knowledge binds to existing representations without overwriting

Exact Efficiency Claim

22,992× less energy than equivalent transformer models at XL scale
99.995% energy reduction vs. traditional AI infrastructure

Edge AI — Removed Specs

Learning mechanism: dual-timescale plasticity (fast τ ≈ 120 ms, slow τ ≈ 700 ms)
Primary accelerator targets: FPGA and edge-class MCUs

Name		Name	Last commit message	Last commit date
Latest commit History 577 Commits
public		public
src		src
temp		temp
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
hero_section.png		hero_section.png
netlify.toml		netlify.toml
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
safari_glitch.png		safari_glitch.png
task_progress.json		task_progress.json
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

ENOTRIUM - Landing Page

Table of Contents

Quick Start

Prerequisites

Installation

Project Structure

Technology Stack

Core Framework

Styling

Animation & Interaction

UI Components

Utilities

External Libraries & Components

1. Cobe Globe (Globe.tsx)

2. DarkVeil Shader (DarkVeil.tsx)

3. Framer Motion Animations

4. Background Grid (BackgroundGrid.tsx)

5. Text Hover Effect (TextHoverEffect.tsx)

6. Calendar Picker (CalendarPicker.tsx)

Content Management

To Update Content

Styling & Theming

Theme System

Tailwind Usage

Custom Utilities

Performance Optimizations

1. Lazy Loading

2. Component Memoization

3. Animation Throttling

4. Reduced Render Costs

5. Build Optimization

Deployment

Vercel (Recommended)

Other Platforms

Production Checklist

Development Guidelines

Adding a New Section

Theme-Aware Components

Performance Best Practices

Code Organization

Troubleshooting

Common Issues

Development Tips

License

Support

Technical Architecture — Investor/VC Reference

Vector Semantic AI — Architecture Specifications

Core Compute Primitive

Claimed Efficiency at Scale

Proprietary Methods

Hardware Targets

Arthedain SNN — Technical Specifications

Neuron Model

Dual Eligibility Trace Parameters

Benchmarks vs. GPU Transformers

Validation Datasets

FPGA Validation Strategy

Named Proprietary Systems

Accuracy vs. Transformers

Enterprise Deployment — Removed Specs

Exact Energy per Inference (by tier)

Fault Tolerance Spec

Supply Chain Detection Accuracy

Training Paradigm (Enterprise Custom Model)

Exact Efficiency Claim

Edge AI — Removed Specs

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

1. Cobe Globe (`Globe.tsx`)

2. DarkVeil Shader (`DarkVeil.tsx`)

4. Background Grid (`BackgroundGrid.tsx`)

5. Text Hover Effect (`TextHoverEffect.tsx`)

6. Calendar Picker (`CalendarPicker.tsx`)

Packages