[V0_FILE]typescriptreact:file="components/anatomical-hero.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" export function AnatomicalHero() { const [typedText, setTypedText] = useState("") const [showCursor, setShowCursor] = useState(true) const fullText = "Where Mechanism Meets Morphology" useEffect(() => { // Mechanical typewriter effect let currentIndex = 0 const typingInterval = setInterval(() => { if (currentIndex <= fullText.length) { setTypedText(fullText.slice(0, currentIndex)) currentIndex++ } else { clearInterval(typingInterval) setShowCursor(false) } }, 80) return () => clearInterval(typingInterval) }, []) return (

{/* Anatomical Grid Overlay */}

{/* Central Content Specimen */}

{/* Specimen Label */}

{/* Classification Numbers */}

{"[SPECIMEN_001-α]"}

{/* Main Heading - Anatomical Serif */}

Advancing Human Knowledge Through Systematic Inquiry

{/* Horizontal Dissection Line */}

{/* Typed Subtitle - Monospace */}

{typedText} {showCursor && }

{/* Descriptive Annotation */}

The Anatomical Institute stands as a monument to the marriage of organic curiosity and mechanical precision. Here, within these hallowed halls, we dissect not merely flesh and bone, but the very fabric of understanding itself.

{/* Call-to-Action Levers */}

{/* Corner Annotations */}

EST. MDCCCXCII

VERITAS • MECHANICA

{/* Schematic Callouts */}

{[ { num: "247+", label: "Published Findings", code: "DATA_001" }, { num: "52", label: "Active Researchers", code: "DATA_002" }, { num: "∞", label: "Questions Remaining", code: "DATA_003" }, ].map((stat, index) => (

{stat.num}

{stat.label}

{`[${stat.code}]`}

))}

{/* Anatomical Diagram Watermark */}

) } [V0_FILE]typescriptreact:file="components/schematic-footer.tsx" isMerged="true" "use client" import Link from "next/link" export function SchematicFooter() { const footerSections = [ { title: "Navigation", code: "NAV", links: [ { label: "Research Domains", href: "/research" }, { label: "Faculty Directory", href: "/faculty" }, { label: "Publication Archive", href: "/archives" }, { label: "Contact Bureau", href: "/contact" }, ], }, { title: "Resources", code: "RES", links: [ { label: "Research Guidelines", href: "/guidelines" }, { label: "Equipment Registry", href: "/equipment" }, { label: "Library Catalog", href: "/library" }, { label: "Specimen Database", href: "/specimens" }, ], }, { title: "Information", code: "INF", links: [ { label: "About the Institute", href: "/about" }, { label: "Historical Record", href: "/history" }, { label: "Ethical Framework", href: "/ethics" }, { label: "Collaboration Terms", href: "/collaborate" }, ], }, ] return ( ) } [V0_FILE]typescriptreact:file="components/alchemical-symbols.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" export function AlchemicalSymbols() { const [opacity1, setOpacity1] = useState(0.03) const [opacity2, setOpacity2] = useState(0.05) useEffect(() => { // Breathing palimpsest effect const interval = setInterval(() => { setOpacity1((prev) => (prev === 0.03 ? 0.07 : 0.03)) setOpacity2((prev) => (prev === 0.05 ? 0.02 : 0.05)) }, 8000) return () => clearInterval(interval) }, []) return (

{/* Anatomical Diagram Layer */} {/* Mechanical Blueprint Layer */} {/* Alchemical Symbol Layer */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { IM_Fell_English, VT323 } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const imFell = IM_Fell_English({ weight: ["400"], subsets: ["latin"], variable: "--font-fell", }) const vt323 = VT323({ weight: ["400"], subsets: ["latin"], variable: "--font-vt323", }) export const metadata: Metadata = { title: "The Anatomical Institute • Research & Discovery", description: "A sanctuary of chrono-organic research where mechanical precision meets biological curiosity", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Chrono-Organic Brutalism mapped to oklch */ --background: oklch(0.96 0.01 80); /* parchment #f4f0e8 */ --foreground: oklch(0.2 0 0); /* ink #2a2a2a */ --card: oklch(0.93 0.01 80); /* slightly darker parchment */ --card-foreground: oklch(0.2 0 0); --popover: oklch(0.96 0.01 80); --popover-foreground: oklch(0.2 0 0); --primary: oklch(0.66 0.09 192); /* verdigris #43b3ae */ --primary-foreground: oklch(0.96 0.01 80); --secondary: oklch(0.81 0.03 75); /* sepia #d4c5a9 */ --secondary-foreground: oklch(0.2 0 0); --muted: oklch(0.81 0.03 75); --muted-foreground: oklch(0.3 0 0); /* charcoal */ --accent: oklch(0.66 0.09 192); /* verdigris */ --accent-foreground: oklch(0.96 0.01 80); --destructive: oklch(0.52 0.19 25); /* sanguine #c23b22 */ --destructive-foreground: oklch(0.96 0.01 80); --border: oklch(0.2 0 0 / 0.15); --input: oklch(0.2 0 0 / 0.15); --ring: oklch(0.66 0.09 192); --chart-1: oklch(0.66 0.09 192); /* verdigris */ --chart-2: oklch(0.72 0.12 85); /* alchemical gold */ --chart-3: oklch(0.52 0.19 25); /* sanguine */ --chart-4: oklch(0.3 0 0); /* charcoal */ --chart-5: oklch(0.81 0.03 75); /* sepia */ --radius: 0rem; --sidebar: oklch(0.96 0.01 80); --sidebar-foreground: oklch(0.2 0 0); --sidebar-primary: oklch(0.66 0.09 192); --sidebar-primary-foreground: oklch(0.96 0.01 80); --sidebar-accent: oklch(0.93 0.01 80); --sidebar-accent-foreground: oklch(0.2 0 0); --sidebar-border: oklch(0.2 0 0 / 0.15); --sidebar-ring: oklch(0.66 0.09 192); } .dark { --background: oklch(0.2 0 0); --foreground: oklch(0.96 0.01 80); --card: oklch(0.25 0 0); --card-foreground: oklch(0.96 0.01 80); --popover: oklch(0.2 0 0); --popover-foreground: oklch(0.96 0.01 80); --primary: oklch(0.66 0.09 192); --primary-foreground: oklch(0.2 0 0); --secondary: oklch(0.3 0 0); --secondary-foreground: oklch(0.96 0.01 80); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.66 0.09 192); --accent-foreground: oklch(0.2 0 0); --destructive: oklch(0.52 0.19 25); --destructive-foreground: oklch(0.96 0.01 80); --border: oklch(0.3 0 0); --input: oklch(0.3 0 0); --ring: oklch(0.66 0.09 192); --chart-1: oklch(0.66 0.09 192); --chart-2: oklch(0.72 0.12 85); --chart-3: oklch(0.52 0.19 25); --chart-4: oklch(0.7 0 0); --chart-5: oklch(0.81 0.03 75); --sidebar: oklch(0.2 0 0); --sidebar-foreground: oklch(0.96 0.01 80); --sidebar-primary: oklch(0.66 0.09 192); --sidebar-primary-foreground: oklch(0.96 0.01 80); --sidebar-accent: oklch(0.3 0 0); --sidebar-accent-foreground: oklch(0.96 0.01 80); --sidebar-border: oklch(0.3 0 0); --sidebar-ring: oklch(0.66 0.09 192); } @theme inline { --font-sans: "IM Fell English", "serif"; --font-mono: "VT323", "monospace"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Custom Chrono-Organic variables for direct use */ --color-parchment: oklch(0.96 0.01 80); --color-sepia: oklch(0.81 0.03 75); --color-ink: oklch(0.2 0 0); --color-charcoal: oklch(0.3 0 0); --color-verdigris: oklch(0.66 0.09 192); --color-alchemical-gold: oklch(0.72 0.12 85); --color-sanguine: oklch(0.52 0.19 25); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground relative overflow-x-hidden; font-feature-settings: "liga" 1, "calt" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; } /* Living Parchment Texture */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.4; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3CfeColorMatrix values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); animation: textureShift 60s infinite linear; } @keyframes textureShift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } /* Anatomical Grid Lines - Imperfect */ .anatomical-grid { position: relative; } .anatomical-grid::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 31px, rgba(42, 42, 42, 0.08) 31px, rgba(42, 42, 42, 0.08) 32px ), repeating-linear-gradient( 90deg, transparent, transparent 31px, rgba(42, 42, 42, 0.08) 31px, rgba(42, 42, 42, 0.08) 32px ); pointer-events: none; filter: url(#gridTremor); } /* Mechanical Typography */ .font-mono { letter-spacing: 0.05em; line-height: 1.2; } /* Etched Borders */ .etched { border: 2px solid oklch(0.2 0 0); box-shadow: inset 1px 1px 0 rgba(42, 42, 42, 0.3), inset -1px -1px 0 rgba(244, 240, 232, 0.5); } /* Wabi-Sabi Imperfections */ @keyframes jitter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-0.5px, 0.5px); } 50% { transform: translate(0.5px, -0.5px); } 75% { transform: translate(-0.5px, -0.5px); } } .imperfect-line { position: relative; } .imperfect-line::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: currentColor; animation: jitter 4s infinite; } } /* Clockwork Transitions */ @layer utilities { .transition-clockwork { transition: all 0.3s steps(3, end); } .transition-mechanical { transition: all 0.2s cubic-bezier(0.4, 0, 1, 1); } } [V0_FILE]typescriptreact:file="components/biological-nav.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { useState, useEffect } from "react" export function BiologicalNav() { const [isUnfurled, setIsUnfurled] = useState(false) useEffect(() => { // Organic unfurling on mount const timer = setTimeout(() => setIsUnfurled(true), 100) return () => clearTimeout(timer) }, []) const navItems = [ { label: "Research", href: "/research" }, { label: "Discoveries", href: "/discoveries" }, { label: "Faculty", href: "/faculty" }, { label: "Archives", href: "/archives" }, ] return (

{/* Institution Mark */}

The Anatomical {"[INSTITUTE_OF_RESEARCH]"}

{/* Wax Seal Decoration */}

EST

{/* Navigation Links - Mechanical Reveal */}

{navItems.map((item, index) => ( {item.label} {`[0${index + 1}]`} ))}

{/* Contact Pressure Plate */} {">>INQUIRE<<"} {/* Lever mechanism */}

) } [V0_FILE]typescriptreact:file="components/research-grid.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" const researchAreas = [ { id: "bio-mech", title: "Bio-Mechanical Synthesis", code: "RM_001", description: "The convergence of living tissue and mechanical apparatus. Our researchers explore the boundaries where flesh becomes machine, and machine becomes flesh.", findings: "23 active studies", lead: "Dr. Erasmus Volt", }, { id: "chrono-bio", title: "Chrono-Biological Systems", code: "RM_002", description: "Investigating the clockwork mechanisms inherent in biological processes. Time is not linear; it ticks within every cell.", findings: "17 active studies", lead: "Prof. Temperance Gearwright", }, { id: "anatomical-arch", title: "Anatomical Architecture", code: "RM_003", description: "Structures modeled after organic systems. Buildings that breathe, bridges that pulse, machines that digest.", findings: "31 active studies", lead: "Dr. Vesalius Iron", }, { id: "alchemical-comp", title: "Alchemical Computing", code: "RM_004", description: "Computation through chemical transformation. Algorithms inscribed in reagents, data stored in precipitates.", findings: "12 active studies", lead: "Dr. Aurelia Crucible", }, ] export function ResearchGrid() { const [activeCard, setActiveCard] = useState(null) return (

{/* Section Header */}

{"[SECTION_02]"}

Domains of Inquiry

Our research spans the liminal spaces between disciplines, where traditional categories dissolve and new forms of knowledge crystallize.

{/* Research Cards Grid */}

{researchAreas.map((area, index) => (

setActiveCard(area.id)} onMouseLeave={() => setActiveCard(null)} style={{ transform: activeCard === area.id ? "scale(1.02)" : "scale(1)", }} > {/* Card Header */}

{area.code}

{`0${index + 1}`}

{area.title}

{/* Card Body */}

{area.description}

{/* Metadata */}

STATUS: {area.findings}

PRINCIPAL: {area.lead}

{/* Hover Activation Lever */}

{/* Schematic Background Pattern */}

{/* Corner Perforation */}

))}

{/* Schematic Note */}

{"NOTE:"} All research domains operate under the principle of Reciprocal Causation—where the observer and observed are bound in perpetual transformation.

) } [V0_FILE]typescriptreact:file="components/dithered-scene.tsx" isMerged="true" "use client" import { Canvas } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { useRef, useMemo } from "react" import * as THREE from "three" import { useFrame } from "@react-three/fiber" // Custom dithering shader material const DitheredMaterial = () => { const materialRef = useRef(null) const vertexShader = ` varying vec2 vUv; varying vec3 vNormal; varying vec3 vPosition; void main() { vUv = uv; vNormal = normalize(normalMatrix * normal); vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` const fragmentShader = ` uniform float uTime; uniform vec3 uColorParchment; uniform vec3 uColorVerdigris; uniform vec3 uColorInk; varying vec2 vUv; varying vec3 vNormal; varying vec3 vPosition; // Bayer matrix dithering float dither8x8(vec2 position, float brightness) { int x = int(mod(position.x, 8.0)); int y = int(mod(position.y, 8.0)); int index = x + y * 8; float limit = 0.0; if (x < 8) { if (index == 0) limit = 0.0/64.0; if (index == 1) limit = 32.0/64.0; if (index == 2) limit = 8.0/64.0; if (index == 3) limit = 40.0/64.0; if (index == 4) limit = 2.0/64.0; if (index == 5) limit = 34.0/64.0; if (index == 6) limit = 10.0/64.0; if (index == 7) limit = 42.0/64.0; if (index == 8) limit = 48.0/64.0; if (index == 9) limit = 16.0/64.0; if (index == 10) limit = 56.0/64.0; if (index == 11) limit = 24.0/64.0; if (index == 12) limit = 50.0/64.0; if (index == 13) limit = 18.0/64.0; if (index == 14) limit = 58.0/64.0; if (index == 15) limit = 26.0/64.0; if (index == 16) limit = 12.0/64.0; if (index == 17) limit = 44.0/64.0; if (index == 18) limit = 4.0/64.0; if (index == 19) limit = 36.0/64.0; if (index == 20) limit = 14.0/64.0; if (index == 21) limit = 46.0/64.0; if (index == 22) limit = 6.0/64.0; if (index == 23) limit = 38.0/64.0; if (index == 24) limit = 60.0/64.0; if (index == 25) limit = 28.0/64.0; if (index == 26) limit = 52.0/64.0; if (index == 27) limit = 20.0/64.0; if (index == 28) limit = 62.0/64.0; if (index == 29) limit = 30.0/64.0; if (index == 30) limit = 54.0/64.0; if (index == 31) limit = 22.0/64.0; if (index == 32) limit = 3.0/64.0; if (index == 33) limit = 35.0/64.0; if (index == 34) limit = 11.0/64.0; if (index == 35) limit = 43.0/64.0; if (index == 36) limit = 1.0/64.0; if (index == 37) limit = 33.0/64.0; if (index == 38) limit = 9.0/64.0; if (index == 39) limit = 41.0/64.0; if (index == 40) limit = 51.0/64.0; if (index == 41) limit = 19.0/64.0; if (index == 42) limit = 59.0/64.0; if (index == 43) limit = 27.0/64.0; if (index == 44) limit = 49.0/64.0; if (index == 45) limit = 17.0/64.0; if (index == 46) limit = 57.0/64.0; if (index == 47) limit = 25.0/64.0; if (index == 48) limit = 15.0/64.0; if (index == 49) limit = 47.0/64.0; if (index == 50) limit = 7.0/64.0; if (index == 51) limit = 39.0/64.0; if (index == 52) limit = 13.0/64.0; if (index == 53) limit = 45.0/64.0; if (index == 54) limit = 5.0/64.0; if (index == 55) limit = 37.0/64.0; if (index == 56) limit = 63.0/64.0; if (index == 57) limit = 31.0/64.0; if (index == 58) limit = 55.0/64.0; if (index == 59) limit = 23.0/64.0; if (index == 60) limit = 61.0/64.0; if (index == 61) limit = 29.0/64.0; if (index == 62) limit = 53.0/64.0; if (index == 63) limit = 21.0/64.0; } return brightness < limit ? 0.0 : 1.0; } void main() { // Calculate lighting based on normal vec3 light = normalize(vec3(0.5, 1.0, 0.5)); float diff = max(dot(vNormal, light), 0.0); // Animate with time float pulse = sin(uTime * 0.5 + vPosition.y * 0.5) * 0.5 + 0.5; float brightness = diff * 0.7 + pulse * 0.3; // Apply dithering at higher resolution vec2 ditherPos = gl_FragCoord.xy * 2.0; float dithered = dither8x8(ditherPos, brightness); // Mix colors based on dithering vec3 darkColor = mix(uColorInk, uColorVerdigris, pulse * 0.3); vec3 lightColor = uColorParchment; vec3 finalColor = mix(darkColor, lightColor, dithered); gl_FragColor = vec4(finalColor, 0.6); } ` const uniforms = useMemo( () => ({ uTime: { value: 0 }, uColorParchment: { value: new THREE.Color(0.957, 0.941, 0.91) }, uColorVerdigris: { value: new THREE.Color(0.263, 0.702, 0.682) }, uColorInk: { value: new THREE.Color(0.165, 0.165, 0.165) }, }), [], ) useFrame((state) => { if (materialRef.current) { materialRef.current.uniforms.uTime.value = state.clock.elapsedTime } }) return ( ) } // Rotating anatomical torus function AnatomicalTorus() { const meshRef = useRef(null) useFrame((state) => { if (meshRef.current) { // Clockwork rotation - stepped, mechanical const step = Math.floor(state.clock.elapsedTime * 2) / 2 meshRef.current.rotation.x = step * 0.2 meshRef.current.rotation.y = step * 0.3 } }) return ( ) } // Pulsing organic sphere function OrganicSphere() { const meshRef = useRef(null) useFrame((state) => { if (meshRef.current) { // Organic pulsing - breathing effect const pulse = Math.sin(state.clock.elapsedTime * 0.8) * 0.15 + 1 meshRef.current.scale.setScalar(pulse) // Slow drift meshRef.current.position.x = Math.sin(state.clock.elapsedTime * 0.3) * 1.5 meshRef.current.position.y = Math.cos(state.clock.elapsedTime * 0.2) * 0.5 } }) return ( ) } // Mechanical polyhedron function MechanicalPolyhedron() { const meshRef = useRef(null) useFrame((state) => { if (meshRef.current) { // Gear-like rotation const step = Math.floor(state.clock.elapsedTime * 3) / 3 meshRef.current.rotation.x = step * 0.5 meshRef.current.rotation.z = step * 0.4 } }) return ( ) } export function DitheredScene() { return (

) } [V0_FILE]typescriptreact:file="components/mechanical-hero.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" export function MechanicalHero() { const titleRef = useRef(null) const subtitleRef = useRef(null) const lineRef = useRef(null) useEffect(() => { // Mechanical typewriter reveal if (titleRef.current) { const chars = titleRef.current.textContent?.split("") || [] titleRef.current.textContent = "" chars.forEach((char, i) => { const span = document.createElement("span") span.textContent = char span.style.opacity = "0" titleRef.current?.appendChild(span) // Stepped, mechanical timing gsap.to(span, { opacity: 1, duration: 0.05, delay: i * 0.08, ease: "steps(1)", }) }) } // Organic unfurling of subtitle if (subtitleRef.current) { gsap.fromTo( subtitleRef.current, { scaleX: 0, transformOrigin: "left center" }, { scaleX: 1, duration: 1.5, delay: 1.5, ease: "power2.out" }, ) } // Etched line drawing if (lineRef.current) { gsap.fromTo(lineRef.current, { width: "0%" }, { width: "100%", duration: 2, delay: 2, ease: "steps(12)" }) } }, []) return (

{/* Decorative corner marks */}

{/* Mechanical label */}

Specimen №: XVII-MMXXV

{/* Hero title - mechanical typewriter */}

The Anatomical Institute

{/* Etched dividing line */}

{/* Subtitle - organic unfurling */}

Where mechanical precision meets biological curiosity. A sanctuary of chrono-organic research transcending temporal boundaries.

{/* Pressure plate button */}

{/* Annotation marks */}

EST. MDCCCLI • REVISED MMXXV

System Operational

) } [V0_FILE]typescriptreact:file="components/organic-features.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger) } const features = [ { label: "I. Chrono-Organic Synthesis", title: "Temporal Mechanics", description: "Bridging epochs through systematic observation. Our methodologies merge Renaissance anatomical precision with industrial-age mechanical instrumentation.", notation: "φ = ∫ψ(t)dt", }, { label: "II. Biological Apparatus", title: "Living Systems", description: "Documentation of organic processes through etched diagrams and cross-sectioned specimens. Each observation inscribed with trembling precision.", notation: "Δσ ∝ ∂Ω/∂t", }, { label: "III. Mechanical Scrawl", title: "Archival Records", description: "Typewritten annotations on aged parchment. Every discovery catalogued with the irregular rhythm of a worn mechanism.", notation: "λ → μ ⊕ ε", }, ] export function OrganicFeatures() { const sectionRef = useRef(null) const cardsRef = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { if (!sectionRef.current) return // GSAP ScrollTrigger for organic unfurling cardsRef.current.forEach((card, index) => { if (!card) return gsap.fromTo( card, { opacity: 0, y: 60, scaleY: 0.8, transformOrigin: "top center", }, { opacity: 1, y: 0, scaleY: 1, duration: 1, ease: "power2.out", scrollTrigger: { trigger: card, start: "top 80%", end: "top 50%", toggleActions: "play none none reverse", }, }, ) // Staggered mechanical reveal of inner content const children = card.querySelectorAll(".feature-content > *") children.forEach((child, i) => { gsap.fromTo( child, { opacity: 0, x: -20 }, { opacity: 1, x: 0, duration: 0.3, delay: index * 0.1 + i * 0.1, ease: "steps(3)", scrollTrigger: { trigger: card, start: "top 70%", }, }, ) }) }) }, []) return (

{/* Section header */}

Research Domains

Areas of Investigation

{/* Feature cards */}

{features.map((feature, index) => (

{ cardsRef.current[index] = el }} className="group relative anatomical-grid p-8 border-2 border-foreground bg-card hover:bg-primary/5 transition-clockwork" > {/* Etched corner decorations */}

{/* Roman numeral label */}

{feature.label}

{/* Title */}

{feature.title}

{/* Mathematical notation */}

{feature.notation}

{/* Description */}

{feature.description}

{/* Wax seal decoration */}

Authenticated

))}

) } [V0_FILE]typescriptreact:file="components/schematic-cta.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" export function SchematicCTA() { const formRef = useRef(null) const gearRef = useRef(null) useEffect(() => { // Rotating gear animation if (gearRef.current) { gsap.to(gearRef.current, { rotation: 360, duration: 8, repeat: -1, ease: "steps(12)", }) } }, []) return (

{/* Decorative gears */}

{/* Label */}

Application for Admission

{/* Title */}

Join the Institute

{/* Description */}

Submit your credentials for consideration. Successful applicants will receive access to our archival systems and research apparatus.

{/* Form */}

{/* Name field */}

Full Designation

{/* Email field */}

Telegraph Address

{/* Research interest */}

Research Focus

{/* Submit button */}

{/* Footer note */}

Applications reviewed quarterly • Next review: SPRING MMXXV

) } [V0_FILE]typescriptreact:file="app/research/page.tsx" isMerged="true" import { ResearchHero } from "@/components/research-hero" import { ResearchDomains } from "@/components/research-domains" import { ActiveProjects } from "@/components/active-projects" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function ResearchPage() { return (

) } [V0_FILE]typescriptreact:file="app/discoveries/page.tsx" isMerged="true" import { DiscoveriesHero } from "@/components/discoveries-hero" import { DiscoveriesTimeline } from "@/components/discoveries-timeline" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function DiscoveriesPage() { return (

) } [V0_FILE]typescriptreact:file="app/faculty/page.tsx" isMerged="true" import { FacultyHero } from "@/components/faculty-hero" import { FacultyGrid } from "@/components/faculty-grid" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function FacultyPage() { return (

) } [V0_FILE]typescriptreact:file="app/archives/page.tsx" isMerged="true" import { ArchivesHero } from "@/components/archives-hero" import { ArchivesGrid } from "@/components/archives-grid" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function ArchivesPage() { return (

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" import { ContactHero } from "@/components/contact-hero" import { ContactForm } from "@/components/contact-form" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function ContactPage() { return (

) } [V0_FILE]typescriptreact:file="app/guidelines/page.tsx" isMerged="true" import { GuidelinesHero } from "@/components/guidelines-hero" import { GuidelinesContent } from "@/components/guidelines-content" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function GuidelinesPage() { return (

) } [V0_FILE]typescriptreact:file="app/equipment/page.tsx" isMerged="true" import { EquipmentHero } from "@/components/equipment-hero" import { EquipmentRegistry } from "@/components/equipment-registry" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function EquipmentPage() { return (

) } [V0_FILE]typescriptreact:file="app/library/page.tsx" isMerged="true" import { LibraryHero } from "@/components/library-hero" import { LibraryCatalog } from "@/components/library-catalog" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function LibraryPage() { return (

) } [V0_FILE]typescriptreact:file="app/specimens/page.tsx" isMerged="true" import { SpecimensHero } from "@/components/specimens-hero" import { SpecimenDatabase } from "@/components/specimen-database" import { DitheredScene } from "@/components/dithered-scene" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function SpecimensPage() { return (

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import { AboutHero } from "@/components/about-hero" import { AboutTimeline } from "@/components/about-timeline" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function AboutPage() { return (

) } [V0_FILE]typescriptreact:file="app/history/page.tsx" isMerged="true" import { HistoryHero } from "@/components/history-hero" import { HistoricalRecord } from "@/components/historical-record" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function HistoryPage() { return (

) } [V0_FILE]typescriptreact:file="app/ethics/page.tsx" isMerged="true" import { EthicsHero } from "@/components/ethics-hero" import { EthicsFramework } from "@/components/ethics-framework" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function EthicsPage() { return (

) } [V0_FILE]typescriptreact:file="app/collaborate/page.tsx" isMerged="true" import { CollaborateHero } from "@/components/collaborate-hero" import { CollaborationTerms } from "@/components/collaboration-terms" import { AlchemicalSymbols } from "@/components/alchemical-symbols" export default function CollaboratePage() { return (

) } [V0_FILE]typescriptreact:file="components/research-hero.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" export function ResearchHero() { const titleRef = useRef(null) useEffect(() => { if (titleRef.current) { const chars = titleRef.current.textContent?.split("") || [] titleRef.current.textContent = "" chars.forEach((char, i) => { const span = document.createElement("span") span.textContent = char span.style.opacity = "0" titleRef.current?.appendChild(span) gsap.to(span, { opacity: 1, duration: 0.05, delay: i * 0.06, ease: "steps(1)", }) }) } }, []) return (

Research Compendium

Research Domains

Our investigations span the confluence of temporal mechanics, biological systems, and mechanical apparatus. Each domain represents decades of meticulous documentation.

) } [V0_FILE]typescriptreact:file="components/research-domains.tsx" isMerged="true" "use client" import Link from "next/link" import { useEffect, useRef } from "react" import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger) } const domains = [ { number: "I", title: "Chrono-Organic Synthesis", description: "Investigating the intersection of temporal flow and biological processes through systematic observation and mechanical documentation.", notation: "∂Ω/∂t = ∫ψ(x,t)dx", specimens: 847, publications: 234, }, { number: "II", title: "Anatomical Mechanics", description: "Detailed cross-sectional analysis of biological systems, documented through etched diagrams and preserved specimens.", notation: "Σ(F·dr) = ΔE_kinetic", specimens: 1203, publications: 412, }, { number: "III", title: "Alchemical Processes", description: "Chemical transformations observed and recorded using methodologies preserved from pre-industrial laboratories.", notation: "φ → ψ + ε [reversible]", specimens: 629, publications: 189, }, { number: "IV", title: "Mechanical Biology", description: "The study of biological systems through the lens of mechanical engineering, revealing nature's clockwork precision.", notation: "τ = r × F [momentum]", specimens: 954, publications: 298, }, ] export function ResearchDomains() { const cardsRef = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { cardsRef.current.forEach((card, index) => { if (!card) return gsap.fromTo( card, { opacity: 0, y: 60 }, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: card, start: "top 80%", toggleActions: "play none none reverse", }, }, ) }) }, []) return (

{domains.map((domain, index) => (

{ cardsRef.current[index] = el }} className="group anatomical-grid p-8 border-2 border-foreground bg-card hover:bg-primary/5 transition-clockwork" >

[DOMAIN {domain.number}]

{domain.title}

{domain.notation}

{domain.description}

SPECIMENS

{domain.specimens}

PUBLICATIONS

{domain.publications}

View Research →

))}

) } [V0_FILE]typescriptreact:file="components/active-projects.tsx" isMerged="true" "use client" import Link from "next/link" const projects = [ { id: "PROJ-001", title: "Temporal Displacement in Organic Matter", lead: "Dr. Elisabeth Hartwell", status: "Active", progress: 67, }, { id: "PROJ-002", title: "Mechanical Augmentation of Cellular Processes", lead: "Prof. Nathaniel Cross", status: "Analysis", progress: 42, }, { id: "PROJ-003", title: "Cross-Sectional Study of Botanical Clockworks", lead: "Dr. Margaret Ashford", status: "Active", progress: 89, }, ] export function ActiveProjects() { return (

Current Investigations

Active Projects

{projects.map((project) => (

[{project.id}]

{project.title}

Principal Investigator: {project.lead}

{project.progress}%

{project.status}

Details →

))}

) } [V0_FILE]typescriptreact:file="components/discoveries-hero.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" export function DiscoveriesHero() { const titleRef = useRef(null) useEffect(() => { if (titleRef.current) { const chars = titleRef.current.textContent?.split("") || [] titleRef.current.textContent = "" chars.forEach((char, i) => { const span = document.createElement("span") span.textContent = char span.style.opacity = "0" titleRef.current?.appendChild(span) gsap.to(span, { opacity: 1, duration: 0.05, delay: i * 0.06, ease: "steps(1)", }) }) } }, []) return (

Chronicle of Findings

Notable Discoveries

A chronological record of significant breakthroughs, documented with mechanical precision and preserved for posterity.

) } [V0_FILE]typescriptreact:file="components/discoveries-timeline.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger) } const discoveries = [ { year: "MDCCCXCII", date: "March 17, 1892", title: "The Clockwork Cell Hypothesis", researcher: "Dr. Edmund Bartholomew", description: "First observation of cellular mechanics operating with clock-like precision. This groundbreaking discovery revealed biological processes following deterministic patterns.", impact: "Foundation for Mechanical Biology", }, { year: "MCMXIV", date: "November 3, 1914", title: "Temporal Stasis in Botanical Specimens", researcher: "Prof. Adelaide Whitmore", description: "Documentation of plants exhibiting suspended animation when exposed to specific alchemical compounds. Specimens remain preserved in Institute vault.", impact: "Chrono-Organic Synthesis Established", }, { year: "MCMXLVIII", date: "June 22, 1948", title: "The Verdigris Reaction", researcher: "Dr. Malcolm Ashford", description: "Discovery of copper-based compounds capable of enhancing cellular communication. The characteristic green oxidation became symbolic of our work.", impact: "Medical Applications", }, { year: "MCMLXXXI", date: "September 9, 1981", title: "Organic Circuit Integration", researcher: "Dr. Elisabeth Hartwell", description: "Successful integration of biological tissue with mechanical apparatus, maintaining viability for extended periods. Ethical framework established.", impact: "Bioengineering Revolution", }, { year: "MMXV", date: "April 15, 2015", title: "Temporal Displacement Theorem", researcher: "Prof. Nathaniel Cross", description: "Mathematical proof demonstrating biological systems can be influenced across temporal boundaries through quantum mechanical processes.", impact: "Ongoing Research Focus", }, ] export function DiscoveriesTimeline() { const itemsRef = useRef<(HTMLDivElement | null)[]>([]) const lineRef = useRef(null) useEffect(() => { if (lineRef.current) { gsap.fromTo( lineRef.current, { height: "0%" }, { height: "100%", duration: 2, ease: "power2.out", scrollTrigger: { trigger: lineRef.current, start: "top 80%", end: "bottom 20%", scrub: 1, }, }, ) } itemsRef.current.forEach((item, index) => { if (!item) return gsap.fromTo( item, { opacity: 0, x: index % 2 === 0 ? -50 : 50 }, { opacity: 1, x: 0, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: item, start: "top 80%", toggleActions: "play none none reverse", }, }, ) }) }, []) return (

{/* Central timeline */}

{/* Timeline items */}

{discoveries.map((discovery, index) => (

{ itemsRef.current[index] = el }} className={`flex gap-8 ${index % 2 === 0 ? "flex-row" : "flex-row-reverse"}`} >

{discovery.year}

{discovery.title}

{discovery.date}

{discovery.researcher}

{discovery.description}

Impact: {discovery.impact}

{/* Center marker */}

))}

) } [V0_FILE]typescriptreact:file="components/faculty-hero.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" export function FacultyHero() { const titleRef = useRef(null) useEffect(() => { if (titleRef.current) { const chars = titleRef.current.textContent?.split("") || [] titleRef.current.textContent = "" chars.forEach((char, i) => { const span = document.createElement("span") span.textContent = char span.style.opacity = "0" titleRef.current?.appendChild(span) gsap.to(span, { opacity: 1, duration: 0.05, delay: i * 0.06, ease: "steps(1)", }) }) } }, []) return (

Personnel Directory

Faculty & Researchers

Our distinguished faculty represents generations of accumulated knowledge, each contributing unique expertise to the Institute's mission.

) } [V0_FILE]typescriptreact:file="components/faculty-grid.tsx" isMerged="true" "use client" import Link from "next/link" import { useEffect, useRef } from "react" import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger) } const faculty = [ { id: "hartwell", name: "Dr. Elisabeth Hartwell", title: "Director of Chrono-Organic Studies", specialization: "Temporal Mechanics in Biological Systems", joined: "MCMXCVIII", publications: 87, notation: "∂t/∂Ω", }, { id: "cross", name: "Prof. Nathaniel Cross", title: "Chair of Mechanical Biology", specialization: "Anatomical Engineering & Apparatus Design", joined: "MMIV", publications: 124, notation: "F=ma", }, { id: "ashford", name: "Dr. Margaret Ashford", title: "Lead Botanist", specialization: "Botanical Clockwork Systems", joined: "MMIX", publications: 63, notation: "φ→ψ", }, { id: "blackwood", name: "Prof. Theodore Blackwood", title: "Senior Alchemist", specialization: "Chemical Transformations & Synthesis", joined: "MCMXCI", publications: 156, notation: "A⇌B+C", }, { id: "sterling", name: "Dr. Victoria Sterling", title: "Anatomical Archivist", specialization: "Historical Documentation & Preservation", joined: "MMXII", publications: 42, notation: "Σ→∞", }, { id: "grimshaw", name: "Prof. Ambrose Grimshaw", title: "Theoretical Mechanist", specialization: "Mathematical Modeling of Organic Systems", joined: "MMI", publications: 98, notation: "∫f(x)dx", }, ] export function FacultyGrid() { const cardsRef = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { cardsRef.current.forEach((card) => { if (!card) return gsap.fromTo( card, { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", scrollTrigger: { trigger: card, start: "top 85%", toggleActions: "play none none reverse", }, }, ) }) }, []) return (

{faculty.map((member, index) => (

{ cardsRef.current[index] = el }} className="group anatomical-grid p-6 border-2 border-foreground bg-card hover:bg-primary/5 transition-clockwork" >

{/* Portrait placeholder */}

{member.name.charAt(0)}

[PORTRAIT]

{member.name}

{member.title}

{member.specialization}

{member.notation}

JOINED

{member.joined}

PAPERS

{member.publications}

View Profile →

))}

) } [V0_FILE]typescriptreact:file="components/archives-hero.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" export function ArchivesHero() { const titleRef = useRef(null) useEffect(() => { if (titleRef.current) { const chars = titleRef.current.textContent?.split("") || [] titleRef.current.textContent = "" chars.forEach((char, i) => { const span = document.createElement("span") span.textContent = char span.style.opacity = "0" titleRef.current?.appendChild(span) gsap.to(span, { opacity: 1, duration: 0.05, delay: i * 0.06, ease: "steps(1)", }) }) } }, []) return (

Publication Archive

Research Archives

A comprehensive repository of all Institute publications, preserved on aged parchment and catalogued with mechanical precision.

) } [V0_FILE]typescriptreact:file="components/archives-grid.tsx" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" const publications = [ { id: "PUB-1892-001", year: "1892", title: "On the Mechanical Nature of Cellular Division", author: "Dr. Edmund Bartholomew", journal: "Journal of Anatomical Mechanics", pages: "147-203", citations: 1247, }, { id: "PUB-1914-037", year: "1914", title: "Temporal Stasis: A New Paradigm in Botanical Preservation", author: "Prof. Adelaide Whitmore", journal: "Chrono-Organic Review", pages: "23-68", citations: 892, }, { id: "PUB-1948-124", year: "1948", title: "The Verdigris Reaction and Its Applications in Cellular Communication", author: "Dr. Malcolm Ashford", journal: "Alchemical Proceedings", pages: "301-356", citations: 2134, }, { id: "PUB-1981-289", year: "1981", title: "Integration of Organic Tissue with Mechanical Apparatus", author: "Dr. Elisabeth Hartwell", journal: "Bioengineering Quarterly", pages: "89-142", citations: 3421, }, { id: "PUB-2015-476", year: "2015", title: "Mathematical Proof of Temporal Displacement in Biological Systems", author: "Prof. Nathaniel Cross", journal: "Temporal Mechanics Journal", pages: "1-87", citations: 567, }, { id: "PUB-2023-612", year: "2023", title: "Cross-Sectional Analysis of Botanical Clockwork Mechanisms", author: "Dr. Margaret Ashford", journal: "Botanical Mechanics Review", pages: "203-271", citations: 124, }, ] const categories = ["All", "Chrono-Organic", "Mechanical", "Alchemical", "Theoretical"] export function ArchivesGrid() { const [selectedCategory, setSelectedCategory] = useState("All") return (

{/* Filter */}

{categories.map((category) => ( ))}

{/* Publications list */}

{publications.map((pub) => (

[{pub.id}] {pub.year}

{pub.title}

{pub.author}

{pub.journal}, pp. {pub.pages}

Citations: {pub.citations}

View →

))}

) } [V0_FILE]typescriptreact:file="components/contact-hero.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import gsap from "gsap" export function ContactHero() { const titleRef = useRef(null) useEffect(() => { if (titleRef.current) { const chars = titleRef.current.textContent?.split("") || [] titleRef.current.textContent = "" chars.forEach((char, i) => { const span = document.createElement("span") span.textContent = char span.style.opacity = "0" titleRef.current?.appendChild(span) gsap.to(span, { opacity: 1, duration: 0.05, delay: i * 0.06, ease: "steps(1)", }) }) } }, []) return (

Bureau of Correspondence

Contact

Submit inquiries, collaboration proposals, or requests for archival access through our correspondence system.

) } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true" "use client" import { useState } from "react" export function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", institution: "", subject: "general", message: "", }) return (

{/* Contact Information */}

Location

The Anatomical Institute

47 Clockwork Lane

London, United Kingdom

Coordinates: 51.5074° N, 0.1278° W

Operating Hours

Monday - Friday: 0900 - 1700

Saturday: 1000 - 1400

Sunday: Closed

Research facilities accessible 24/7 for authorized personnel

Telegraph

General: inquiry@anatomical.institute

Research: research@anatomical.institute

Archives: archives@anatomical.institute

{/* Contact Form */}

Full Designation setFormData({ ...formData, name: e.target.value })} className="w-full px-4 py-3 border-2 border-foreground bg-background text-foreground font-mono focus:border-primary focus:outline-none transition-clockwork" placeholder="Dr. [Name], [Title]" />

Telegraph Address setFormData({ ...formData, email: e.target.value })} className="w-full px-4 py-3 border-2 border-foreground bg-background text-foreground font-mono focus:border-primary focus:outline-none transition-clockwork" placeholder="correspondence@institution.edu" />

Institution setFormData({ ...formData, institution: e.target.value })} className="w-full px-4 py-3 border-2 border-foreground bg-background text-foreground font-mono focus:border-primary focus:outline-none transition-clockwork" placeholder="University / Research Center" />

Subject Matter

Message

setFormData({ ...formData, message: e.target.value })}
                  rows={6}
                  className="w-full px-4 py-3 border-2 border-foreground bg-background text-foreground font-mono focus:border-primary focus:outline-none transition-clockwork resize-none"
                  placeholder="Detailed description of your inquiry..."
                />
              </div>

<button
                type="submit"
                className="w-full group relative px-8 py-4 font-mono text-lg border-2 border-foreground bg-primary text-background hover:bg-foreground transition-clockwork overflow-hidden"
              >
                <span className="relative z-10">Transmit Message</span>
              </button>

<div className="font-mono text-xs text-muted-foreground text-center pt-4">
                Responses typically within 3-5 business days
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/guidelines-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function GuidelinesHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

return (
    <section className="relative z-10 py-32 px-8">
      <div className="max-w-5xl mx-auto anatomical-grid p-12 etched bg-background/90 backdrop-blur-sm">
        <div className="absolute top-2 left-2 w-8 h-8 border-t-2 border-l-2 border-foreground" />
        <div className="absolute top-2 right-2 w-8 h-8 border-t-2 border-r-2 border-foreground" />
        <div className="absolute bottom-2 left-2 w-8 h-8 border-b-2 border-l-2 border-foreground" />
        <div className="absolute bottom-2 right-2 w-8 h-8 border-b-2 border-r-2 border-foreground" />

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
            Procedural Documentation
          </div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            Research Guidelines
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            Established protocols for conducting investigations within the Institute, ensuring rigor and ethical
            compliance.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/guidelines-content.tsx" isMerged="true"
"use client"

const guidelines = [
  {
    section: "I. Documentation Standards",
    rules: [
      "All observations must be recorded in permanent ink on parchment-grade paper",
      "Mechanical typewriters or handwritten annotations are required for official records",
      "Digital transcriptions may supplement but not replace physical documentation",
      "Cross-sectional diagrams must include scale markers and temporal notation",
    ],
  },
  {
    section: "II. Specimen Handling",
    rules: [
      "Biological specimens require refrigeration at precisely 4°C unless otherwise specified",
      "All specimens must be catalogued within 24 hours of collection",
      "Preservation solutions follow formulas established in MDCCCXCII",
      "Handling requires sterilized instruments and documented procedure",
    ],
  },
  {
    section: "III. Equipment Operation",
    rules: [
      "Mechanical apparatus must be wound and calibrated daily",
      "Unauthorized modifications to Institute equipment are prohibited",
      "Maintenance logs must be updated after each use",
      "Safety protocols require two researchers present during high-risk procedures",
    ],
  },
  {
    section: "IV. Collaboration Protocol",
    rules: [
      "External collaborations require approval from the Ethics Committee",
      "Data sharing agreements must be formalized in writing",
      "Attribution follows chronological order of contribution",
      "Intellectual property remains with the Institute unless otherwise negotiated",
    ],
  },
]

export function GuidelinesContent() {
  return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-4xl mx-auto space-y-12">
        {guidelines.map((guideline, index) => (
          <div key={index} className="anatomical-grid p-8 border-2 border-foreground bg-card">
            <div className="space-y-6">
              <h2 className="text-3xl font-sans text-foreground border-b-2 border-primary pb-4">{guideline.section}</h2>
              <ul className="space-y-4">
                {guideline.rules.map((rule, rIndex) => (
                  <li key={rIndex} className="flex gap-4">
                    <span className="font-mono text-sm text-primary mt-1 flex-shrink-0">
                      [{String.fromCharCode(65 + rIndex)}]
                    </span>
                    <p className="font-mono text-sm text-muted-foreground leading-relaxed">{rule}</p>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}

<div className="anatomical-grid p-8 border-2 border-primary bg-primary/5">
          <div className="font-mono text-sm text-foreground space-y-3">
            <div className="font-sans text-xl text-primary">Notice</div>
            <p className="leading-relaxed">
              These guidelines are subject to revision by the Institute Board. Last updated: Spring MMXXV. Questions
              regarding interpretation should be directed to the Director of Operations.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/equipment-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function EquipmentHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">Apparatus Catalog</div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            Equipment Registry
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            A comprehensive inventory of mechanical apparatus, preserved instruments, and research equipment available
            for authorized use.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/equipment-registry.tsx" isMerged="true"
"use client"

import Link from "next/link"

const equipment = [
  {
    id: "EQ-001",
    name: "Bartholomew Chronograph",
    category: "Temporal Measurement",
    year: "MDCCCXCIV",
    status: "Operational",
    location: "Laboratory A",
    description: "Precision clockwork mechanism for measuring temporal displacement in biological specimens.",
  },
  {
    id: "EQ-012",
    name: "Whitmore Stasis Chamber",
    category: "Preservation",
    year: "MCMXVI",
    status: "Operational",
    location: "Cold Storage",
    description: "Temperature-controlled environment maintaining specimens in suspended animation.",
  },
  {
    id: "EQ-034",
    name: "Ashford Catalyst Apparatus",
    category: "Chemical Synthesis",
    year: "MCML",
    status: "Operational",
    location: "Alchemical Lab",
    description: "Copper-based reaction vessel for producing verdigris compounds and derivatives.",
  },
  {
    id: "EQ-056",
    name: "Hartwell Integration Platform",
    category: "Bioengineering",
    year: "MCMLXXXIII",
    status: "Operational",
    location: "Laboratory C",
    description: "Sterile environment for organic-mechanical integration procedures.",
  },
  {
    id: "EQ-078",
    name: "Cross Computational Engine",
    category: "Mathematical Analysis",
    year: "MMXVII",
    status: "Operational",
    location: "Theory Wing",
    description: "Mechanical calculator with quantum augmentation for complex temporal equations.",
  },
  {
    id: "EQ-091",
    name: "Victorian Microscope Array",
    category: "Optical Analysis",
    year: "MDCCCLXVIII",
    status: "Preserved",
    location: "Historical Collection",
    description: "Original brass microscopes from Institute founding, maintained for historical research.",
  },
]

export function EquipmentRegistry() {
  return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-7xl mx-auto space-y-6">
        {equipment.map((item) => (
          <div
            key={item.id}
            className="anatomical-grid p-6 border-2 border-foreground bg-card hover:bg-primary/5 transition-clockwork group"
          >
            <div className="flex flex-col md:flex-row gap-6">
              <div className="flex-1 space-y-3">
                <div className="flex items-baseline gap-3">
                  <span className="font-mono text-xs text-primary">[{item.id}]</span>
                  <h3 className="text-2xl font-sans text-foreground group-hover:text-primary transition-clockwork">
                    {item.name}
                  </h3>
                </div>
                <div className="flex flex-wrap gap-4 font-mono text-sm text-muted-foreground">
                  <div>Category: {item.category}</div>
                  <div>•</div>
                  <div>Year: {item.year}</div>
                  <div>•</div>
                  <div>Location: {item.location}</div>
                </div>
                <p className="font-mono text-sm leading-relaxed text-muted-foreground">{item.description}</p>
              </div>
              <div className="flex flex-col gap-3 justify-center">
                <div
                  className={`px-4 py-2 border font-mono text-xs text-center ${
                    item.status === "Operational"
                      ? "border-primary bg-primary/10 text-primary"
                      : "border-muted-foreground bg-muted text-muted-foreground"
                  }`}
                >
                  {item.status}
                </div>
                <Link
                  href={`/equipment/${item.id.toLowerCase()}`}
                  className="px-4 py-2 border-2 border-foreground bg-background hover:bg-foreground hover:text-background transition-clockwork font-mono text-xs text-center"
                >
                  Details →
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/library-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function LibraryHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">Collected Wisdom</div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            Library Catalog
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            An extensive collection spanning centuries of scientific inquiry, preserved in temperature-controlled
            vaults.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/library-catalog.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { useState } from "react"

const collections = [
  {
    section: "Anatomical Studies",
    volumes: 847,
    items: [
      { title: "Gray's Anatomy (1858 Edition)", author: "Henry Gray", year: "MDCCCLVIII" },
      { title: "De Humani Corporis Fabrica", author: "Andreas Vesalius", year: "MDXLIII" },
      { title: "Anatomical Cross-Sections Vol. I-XII", author: "Institute Collection", year: "MDCCCLI-MCMXIV" },
    ],
  },
  {
    section: "Mechanical Philosophy",
    volumes: 623,
    items: [
      { title: "Principia Mathematica", author: "Isaac Newton", year: "MDCLXXXVII" },
      { title: "On the Nature of Clockwork", author: "Dr. Edmund Bartholomew", year: "MDCCCXC" },
      { title: "Mechanical Biology: A New Paradigm", author: "Prof. Nathaniel Cross", year: "MMVII" },
    ],
  },
  {
    section: "Alchemical Texts",
    volumes: 412,
    items: [
      { title: "The Emerald Tablet", author: "Hermes Trismegistus", year: "Ancient" },
      { title: "Alchemical Procedures and Observations", author: "Various Authors", year: "MDCCC-MCML" },
      { title: "The Verdigris Compendium", author: "Dr. Malcolm Ashford", year: "MCMXLIX" },
    ],
  },
  {
    section: "Temporal Mechanics",
    volumes: 289,
    items: [
      { title: "On the Nature of Time in Biology", author: "Prof. Adelaide Whitmore", year: "MCMXVI" },
      { title: "Temporal Displacement Theory", author: "Prof. Nathaniel Cross", year: "MMXV" },
      { title: "Chrono-Organic Synthesis Methods", author: "Dr. Elisabeth Hartwell", year: "MMXIX" },
    ],
  },
]

export function LibraryCatalog() {
  const [expandedSection, setExpandedSection] = useState<string | null>(null)

return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-4xl mx-auto space-y-6">
        {collections.map((collection) => (
          <div key={collection.section} className="anatomical-grid border-2 border-foreground bg-card">
            <button
              onClick={() => setExpandedSection(expandedSection === collection.section ? null : collection.section)}
              className="w-full p-6 flex items-center justify-between hover:bg-primary/5 transition-clockwork"
            >
              <div className="flex items-baseline gap-4">
                <h3 className="text-2xl font-sans text-foreground">{collection.section}</h3>
                <span className="font-mono text-sm text-muted-foreground">{collection.volumes} volumes</span>
              </div>
              <span className="font-mono text-xl text-primary">
                {expandedSection === collection.section ? "−" : "+"}
              </span>
            </button>

{expandedSection === collection.section && (
              <div className="px-6 pb-6 space-y-4 border-t-2 border-border pt-6">
                {collection.items.map((item, index) => (
                  <div key={index} className="flex items-start gap-4 p-4 border border-foreground bg-background">
                    <div className="flex-1 space-y-1">
                      <div className="font-sans text-lg text-foreground">{item.title}</div>
                      <div className="font-mono text-sm text-muted-foreground">{item.author}</div>
                      <div className="font-mono text-xs text-muted-foreground">{item.year}</div>
                    </div>
                    <Link
                      href={`/library/book/${index}`}
                      className="px-4 py-2 border border-foreground hover:bg-foreground hover:text-background transition-clockwork font-mono text-xs"
                    >
                      View
                    </Link>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}

<div className="anatomical-grid p-6 border-2 border-primary bg-primary/5">
          <div className="font-mono text-sm text-foreground space-y-3">
            <div className="font-sans text-xl text-primary">Access Information</div>
            <p className="leading-relaxed">
              Full library access requires Institute membership. Visiting scholars may request temporary access through
              the Archives department. Rare volumes require supervised viewing.
            </p>
            <Link
              href="/contact"
              className="inline-block mt-4 px-6 py-2 border-2 border-foreground hover:bg-foreground hover:text-background transition-clockwork"
            >
              Request Access →
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/specimens-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function SpecimensHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">Preserved Collection</div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            Specimen Database
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            Meticulously preserved biological specimens, each catalogued with cross-sectional diagrams and temporal
            notation.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/specimen-database.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { useState } from "react"

const specimens = [
  {
    id: "SPEC-XVII-001",
    category: "Botanical",
    name: "Temporal Fern (Chronopteris suspensus)",
    collected: "MCMXIV",
    location: "Whitmore Stasis Chamber",
    status: "Suspended",
    description:
      "Specimen exhibits no cellular degradation since MCMXIV. First successful demonstration of botanical temporal stasis.",
  },
  {
    id: "SPEC-XVII-034",
    category: "Anatomical",
    name: "Verdigris-Treated Cardiac Tissue",
    collected: "MCML",
    location: "Preservation Vault B",
    status: "Active",
    description:
      "Heart tissue maintaining electrical conductivity through copper compound treatment. Continues to respond to stimulation.",
  },
  {
    id: "SPEC-XVII-089",
    category: "Mechanical",
    name: "Bio-Integrated Clockwork Joint",
    collected: "MCMLXXXV",
    location: "Laboratory C",
    status: "Operational",
    description:
      "Successful fusion of biological cartilage with brass mechanical components. Functions as natural joint.",
  },
  {
    id: "SPEC-XVII-124",
    category: "Botanical",
    name: "Clockwork Rose (Rosa mechanica)",
    collected: "MMVIII",
    location: "Botanical Garden",
    status: "Growing",
    description:
      "Hybrid specimen exhibiting both organic growth patterns and mechanical precision in petal arrangement.",
  },
  {
    id: "SPEC-XVII-156",
    category: "Anatomical",
    name: "Cross-Section Series: Human Eye",
    collected: "MDCCCXCII",
    location: "Historical Collection",
    status: "Preserved",
    description:
      "Original Bartholomew anatomical preparations. 47 sequential sections demonstrating optical mechanics.",
  },
  {
    id: "SPEC-XVII-201",
    category: "Alchemical",
    name: "Crystallized Temporal Compound",
    collected: "MMXVIII",
    location: "Alchemical Lab",
    status: "Stable",
    description: "Novel compound exhibiting quantum properties at macro scale. Under continuous observation.",
  },
]

const categories = ["All", "Botanical", "Anatomical", "Mechanical", "Alchemical"]

export function SpecimenDatabase() {
  const [selectedCategory, setSelectedCategory] = useState("All")

const filteredSpecimens =
    selectedCategory === "All" ? specimens : specimens.filter((s) => s.category === selectedCategory)

return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-7xl mx-auto">
        {/* Category Filter */}
        <div className="mb-12">
          <div className="flex flex-wrap gap-3">
            {categories.map((category) => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-4 py-2 font-mono text-sm border-2 transition-clockwork ${
                  selectedCategory === category
                    ? "border-primary bg-primary text-background"
                    : "border-foreground bg-background text-foreground hover:border-primary"
                }`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>

{/* Specimens Grid */}
        <div className="grid md:grid-cols-2 gap-6">
          {filteredSpecimens.map((specimen) => (
            <div
              key={specimen.id}
              className="anatomical-grid p-6 border-2 border-foreground bg-card hover:bg-primary/5 transition-clockwork group"
            >
              <div className="space-y-4">
                <div className="flex items-start justify-between">
                  <div className="space-y-2">
                    <span className="font-mono text-xs text-primary">[{specimen.id}]</span>
                    <h3 className="text-xl font-sans text-foreground group-hover:text-primary transition-clockwork">
                      {specimen.name}
                    </h3>
                  </div>
                  <div
                    className={`px-3 py-1 border font-mono text-xs ${
                      specimen.status === "Operational" || specimen.status === "Growing" || specimen.status === "Active"
                        ? "border-primary bg-primary/10 text-primary"
                        : "border-foreground bg-background text-foreground"
                    }`}
                  >
                    {specimen.status}
                  </div>
                </div>

<div className="font-mono text-sm text-muted-foreground space-y-1">
                  <div>Category: {specimen.category}</div>
                  <div>Collected: {specimen.collected}</div>
                  <div>Location: {specimen.location}</div>
                </div>

<p className="font-mono text-sm leading-relaxed text-muted-foreground">{specimen.description}</p>

<div className="pt-4 border-t border-border">
                  <Link
                    href={`/specimens/${specimen.id.toLowerCase()}`}
                    className="inline-flex items-center gap-2 font-mono text-sm text-primary hover:text-foreground transition-clockwork"
                  >
                    <span>View Documentation →</span>
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/about-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function AboutHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
            Institutional Overview
          </div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            About the Institute
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            Founded in MDCCCLI, dedicated to the systematic investigation of nature's mechanisms through anachronistic
            methodologies.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/about-timeline.tsx" isMerged="true"
"use client"

const milestones = [
  {
    year: "MDCCCLI",
    title: "Foundation",
    description:
      "The Anatomical Institute established by Dr. Edmund Bartholomew and colleagues. Original charter emphasizes rigorous documentation and preservation.",
  },
  {
    year: "MDCCCXCII",
    title: "First Major Discovery",
    description:
      "Bartholomew publishes groundbreaking work on cellular mechanics, establishing the foundation for mechanical biology.",
  },
  {
    year: "MCMXIV",
    title: "Temporal Studies Begin",
    description:
      "Prof. Whitmore's discovery of botanical stasis opens new research domain. Institute expands to accommodate chrono-organic research.",
  },
  {
    year: "MCMXLVIII",
    title: "Alchemical Renaissance",
    description:
      "Dr. Ashford's verdigris research revitalizes traditional alchemical methods with modern applications.",
  },
  {
    year: "MCMLXXXI",
    title: "Bioengineering Era",
    description: "Successful organic-mechanical integration. Ethics committee established to guide future research.",
  },
  {
    year: "MMXXV",
    title: "Present Day",
    description:
      "Institute continues pioneering work across multiple domains, maintaining historical methodologies while embracing selected modern techniques.",
  },
]

export function AboutTimeline() {
  return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-12">
          <h2 className="text-4xl font-sans text-foreground mb-4">Our Mission</h2>
          <div className="anatomical-grid p-8 border-2 border-foreground bg-card">
            <p className="font-mono text-lg leading-relaxed text-muted-foreground">
              To investigate the fundamental mechanisms of biological systems through methodologies that honor
              historical precision while pursuing contemporary understanding. We believe that nature's complexity
              requires both the patience of traditional observation and the rigor of mechanical analysis.
            </p>
          </div>
        </div>

<div className="mb-12">
          <h2 className="text-4xl font-sans text-foreground mb-6">Historical Milestones</h2>
          <div className="space-y-6">
            {milestones.map((milestone, index) => (
              <div key={index} className="anatomical-grid p-6 border-2 border-foreground bg-card">
                <div className="flex gap-6">
                  <div className="flex-shrink-0 w-32 font-mono text-xl text-primary">{milestone.year}</div>
                  <div className="flex-1 space-y-2">
                    <h3 className="text-2xl font-sans text-foreground">{milestone.title}</h3>
                    <p className="font-mono text-sm leading-relaxed text-muted-foreground">{milestone.description}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

<div className="anatomical-grid p-8 border-2 border-primary bg-primary/5">
          <h2 className="text-4xl font-sans text-primary mb-4">Core Values</h2>
          <ul className="space-y-3 font-mono text-sm text-foreground">
            <li className="flex gap-3">
              <span className="text-primary">[I]</span>
              <span>Rigorous documentation preserving knowledge for future generations</span>
            </li>
            <li className="flex gap-3">
              <span className="text-primary">[II]</span>
              <span>Ethical consideration in all research activities</span>
            </li>
            <li className="flex gap-3">
              <span className="text-primary">[III]</span>
              <span>Integration of historical wisdom with contemporary inquiry</span>
            </li>
            <li className="flex gap-3">
              <span className="text-primary">[IV]</span>
              <span>Collaborative advancement of scientific understanding</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/history-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function HistoryHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
            Archival Documentation
          </div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            Historical Record
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            A detailed chronicle of the Institute's evolution from Victorian scientific society to modern research
            center.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/historical-record.tsx" isMerged="true"
"use client"

const eras = [
  {
    period: "MDCCCLI - MDCCC",
    title: "The Founding Era",
    description:
      "Dr. Edmund Bartholomew, dissatisfied with the limitations of contemporary anatomical study, establishes the Institute with a radical vision: to understand biological systems through mechanical principles. The original building on Clockwork Lane houses laboratories designed to maintain specimens indefinitely.",
    keyFigures: ["Dr. Edmund Bartholomew", "Prof. Charles Whitmore", "Dr. Adelaide Sterling"],
    achievements: [
      "Establishment of preservation protocols",
      "First anatomical cross-section series",
      "Founding charter ratified",
    ],
  },
  {
    period: "MCMXIV - MCML",
    title: "The Alchemical Period",
    description:
      "Post-war years see a renaissance in alchemical research. Dr. Malcolm Ashford's breakthrough with verdigris compounds opens new possibilities for biological enhancement. The Institute weathers both world wars, preserving knowledge while contributing to medical advances.",
    keyFigures: ["Prof. Adelaide Whitmore", "Dr. Malcolm Ashford", "Dr. Catherine Grimshaw"],
    achievements: ["Temporal stasis discovery", "Verdigris reaction documented", "Chemical synthesis protocols"],
  },
  {
    period: "MCML - MM",
    title: "The Integration Age",
    description:
      "The late 20th century brings successful fusion of organic and mechanical systems. Dr. Elisabeth Hartwell pioneers bioengineering techniques that respect both biological integrity and mechanical precision. Ethics committee established to guide this sensitive work.",
    keyFigures: ["Dr. Elisabeth Hartwell", "Prof. Theodore Blackwood", "Dr. Ambrose Grimshaw"],
    achievements: ["First bio-mechanical integration", "Ethics framework established", "Equipment modernization"],
  },
  {
    period: "MM - Present",
    title: "Contemporary Research",
    description:
      "The Institute today balances historical methodologies with selective modern techniques. Prof. Nathaniel Cross's work on temporal mechanics represents the synthesis of all previous research domains. Digital systems supplement but never replace traditional documentation.",
    keyFigures: ["Prof. Nathaniel Cross", "Dr. Margaret Ashford", "Dr. Victoria Sterling"],
    achievements: ["Temporal displacement theorem", "Quantum-organic synthesis", "Global collaboration network"],
  },
]

export function HistoricalRecord() {
  return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-4xl mx-auto space-y-16">
        {eras.map((era, index) => (
          <div key={index} className="anatomical-grid p-8 border-2 border-foreground bg-card">
            <div className="space-y-6">
              <div className="flex items-baseline gap-4 pb-4 border-b-2 border-primary">
                <span className="font-mono text-lg text-primary">{era.period}</span>
                <h2 className="text-3xl font-sans text-foreground">{era.title}</h2>
              </div>

<p className="font-mono text-base leading-relaxed text-muted-foreground">{era.description}</p>

<div className="grid md:grid-cols-2 gap-6 pt-4">
                <div>
                  <h3 className="font-sans text-xl text-foreground mb-3">Key Figures</h3>
                  <ul className="space-y-2">
                    {era.keyFigures.map((figure, i) => (
                      <li key={i} className="font-mono text-sm text-muted-foreground flex items-center gap-2">
                        <span className="w-2 h-2 bg-primary" />
                        {figure}
                      </li>
                    ))}
                  </ul>
                </div>

<div>
                  <h3 className="font-sans text-xl text-foreground mb-3">Major Achievements</h3>
                  <ul className="space-y-2">
                    {era.achievements.map((achievement, i) => (
                      <li key={i} className="font-mono text-sm text-muted-foreground flex items-center gap-2">
                        <span className="w-2 h-2 bg-primary" />
                        {achievement}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ethics-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function EthicsHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">Moral Principles</div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            Ethical Framework
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            Guiding principles ensuring all research respects the sanctity of life while pursuing scientific
            advancement.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ethics-framework.tsx" isMerged="true"
"use client"

const principles = [
  {
    number: "I",
    title: "Respect for Life",
    description:
      "All biological specimens, whether preserved or living, must be treated with dignity. No research shall cause unnecessary suffering, and all procedures follow established humane protocols.",
    guidelines: [
      "Minimization of specimen collection from living systems",
      "Humane treatment protocols for all biological materials",
      "Preservation methods must maintain specimen integrity",
      "Regular ethical review of all research procedures",
    ],
  },
  {
    number: "II",
    title: "Informed Consent",
    description:
      "Human tissue samples and biological materials require explicit informed consent. Historical specimens are maintained according to contemporary ethical standards and original donor intentions where documented.",
    guidelines: [
      "Written consent required for all human tissue research",
      "Transparent communication of research purposes",
      "Right to withdraw specimens at any time",
      "Privacy protection for all contributors",
    ],
  },
  {
    number: "III",
    title: "Environmental Responsibility",
    description:
      "Collection and preservation activities must not harm ecosystems. Botanical specimens are sourced sustainably, and all chemical processes follow environmental safety protocols.",
    guidelines: [
      "Sustainable collection practices only",
      "Environmental impact assessments for new research",
      "Safe disposal of all chemical compounds",
      "Habitat preservation and restoration support",
    ],
  },
  {
    number: "IV",
    title: "Knowledge Sharing",
    description:
      "Scientific knowledge should benefit humanity. Research findings are published openly, and our archives remain accessible to legitimate scholarly inquiry.",
    guidelines: [
      "Open publication of non-sensitive research",
      "Collaboration with global research community",
      "Educational programs for next generation",
      "Archival access for accredited researchers",
    ],
  },
  {
    number: "V",
    title: "Responsible Innovation",
    description:
      "Bioengineering and mechanical integration research proceeds cautiously. Each advancement undergoes rigorous ethical review before implementation.",
    guidelines: [
      "Ethics committee approval for novel procedures",
      "Long-term impact assessment requirements",
      "Transparent documentation of all methodologies",
      "Continuous monitoring of integrated systems",
    ],
  },
]

export function EthicsFramework() {
  return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-4xl mx-auto space-y-12">
        <div className="anatomical-grid p-8 border-2 border-primary bg-primary/5">
          <div className="font-mono text-base leading-relaxed text-foreground">
            <p className="mb-4">
              Established in MCMLXXXI following the first successful organic-mechanical integration, our ethical
              framework has evolved to address emerging research challenges while maintaining core principles of
              respect, transparency, and responsibility.
            </p>
            <p>
              The Ethics Committee reviews all research proposals and maintains oversight of ongoing projects. Composed
              of senior researchers, external ethicists, and community representatives, the committee ensures Institute
              activities align with these fundamental principles.
            </p>
          </div>
        </div>

{principles.map((principle) => (
          <div key={principle.number} className="anatomical-grid p-8 border-2 border-foreground bg-card">
            <div className="space-y-6">
              <div className="flex items-baseline gap-4">
                <span className="font-mono text-2xl text-primary">Principle {principle.number}</span>
                <h2 className="text-3xl font-sans text-foreground">{principle.title}</h2>
              </div>

<p className="font-mono text-base leading-relaxed text-muted-foreground">{principle.description}</p>

<div className="pt-4 border-t border-border">
                <h3 className="font-sans text-xl text-foreground mb-4">Implementation Guidelines</h3>
                <ul className="space-y-3">
                  {principle.guidelines.map((guideline, index) => (
                    <li key={index} className="flex gap-3">
                      <span className="font-mono text-sm text-primary mt-1 flex-shrink-0">
                        [{String.fromCharCode(65 + index)}]
                      </span>
                      <span className="font-mono text-sm text-muted-foreground leading-relaxed">{guideline}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        ))}

<div className="anatomical-grid p-8 border-2 border-foreground bg-card">
          <div className="space-y-4">
            <h2 className="text-3xl font-sans text-foreground">Ethics Committee</h2>
            <p className="font-mono text-sm leading-relaxed text-muted-foreground">
              Questions or concerns regarding research ethics may be directed to the Committee via
              ethics@anatomical.institute. All inquiries receive confidential review and timely response.
            </p>
            <div className="pt-4 border-t border-border font-mono text-xs text-muted-foreground">
              Committee Chair: Prof. Theodore Blackwood • Meetings: First Monday of Each Month
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/collaborate-hero.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import gsap from "gsap"

export function CollaborateHero() {
  const titleRef = useRef<HTMLHeadingElement>(null)

useEffect(() => {
    if (titleRef.current) {
      const chars = titleRef.current.textContent?.split("") || []
      titleRef.current.textContent = ""

chars.forEach((char, i) => {
        const span = document.createElement("span")
        span.textContent = char
        span.style.opacity = "0"
        titleRef.current?.appendChild(span)

gsap.to(span, {
          opacity: 1,
          duration: 0.05,
          delay: i * 0.06,
          ease: "steps(1)",
        })
      })
    }
  }, [])

<div className="space-y-6">
          <div className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
            Partnership Opportunities
          </div>
          <h1 ref={titleRef} className="text-6xl md:text-8xl font-sans leading-tight text-foreground">
            Collaboration
          </h1>
          <div className="w-32 h-px bg-primary" />
          <p className="text-xl font-mono text-muted-foreground max-w-3xl leading-relaxed">
            The Institute welcomes collaboration with institutions and researchers sharing our commitment to rigorous,
            ethical inquiry.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/collaboration-terms.tsx" isMerged="true"
"use client"

import Link from "next/link"

const collaborationTypes = [
  {
    type: "Research Partnership",
    description:
      "Joint research projects combining Institute expertise with partner institution capabilities. Shared resources, co-authored publications, and mutual equipment access.",
    requirements: [
      "Accredited research institution",
      "Complementary research focus",
      "Ethics committee approval",
      "Formal agreement outlining IP rights",
    ],
    duration: "Typically 2-5 years",
  },
  {
    type: "Visiting Researcher Program",
    description:
      "Individual researchers spend 3-12 months at the Institute, accessing facilities and collaborating with faculty while pursuing specific projects.",
    requirements: [
      "Ph.D. or equivalent qualification",
      "Defined research proposal",
      "Institutional endorsement",
      "Funding for living expenses",
    ],
    duration: "3-12 months",
  },
  {
    type: "Equipment Sharing",
    description:
      "Access to specialized Institute apparatus for external researchers. Particularly valuable for historical equipment and unique preservation facilities.",
    requirements: [
      "Legitimate research purpose",
      "Training on equipment operation",
      "Cost-sharing agreement",
      "Acknowledgment in publications",
    ],
    duration: "Project-based",
  },
  {
    type: "Archival Access",
    description:
      "Scholarly access to Institute historical records, publications, and specimen documentation for research purposes.",
    requirements: [
      "Academic affiliation",
      "Clear research question",
      "Respect for preservation protocols",
      "Citation of archival materials",
    ],
    duration: "Variable",
  },
]

export function CollaborationTerms() {
  return (
    <section className="relative z-10 py-20 px-8">
      <div className="max-w-6xl mx-auto">
        <div className="mb-12 anatomical-grid p-8 border-2 border-primary bg-primary/5">
          <h2 className="text-3xl font-sans text-foreground mb-4">Our Approach to Collaboration</h2>
          <p className="font-mono text-base leading-relaxed text-muted-foreground mb-4">
            The Institute has maintained collaborative relationships with research institutions globally since our
            founding. We believe that scientific advancement requires both independent inquiry and shared knowledge.
          </p>
          <p className="font-mono text-base leading-relaxed text-muted-foreground">
            All collaborations must align with our ethical framework and respect our methodological approach. We seek
            partners who value both innovation and preservation of historical scientific practices.
          </p>
        </div>

<div className="grid md:grid-cols-2 gap-6 mb-12">
          {collaborationTypes.map((collab, index) => (
            <div key={index} className="anatomical-grid p-6 border-2 border-foreground bg-card">
              <div className="space-y-4">
                <h3 className="text-2xl font-sans text-foreground">{collab.type}</h3>

<p className="font-mono text-sm leading-relaxed text-muted-foreground">{collab.description}</p>

<div className="pt-3 border-t border-border">
                  <div className="font-mono text-xs text-primary uppercase tracking-wider mb-2">Requirements</div>
                  <ul className="space-y-2">
                    {collab.requirements.map((req, i) => (
                      <li key={i} className="flex gap-2 font-mono text-xs text-muted-foreground">
                        <span className="text-primary">•</span>
                        {req}
                      </li>
                    ))}
                  </ul>
                </div>

<div className="font-mono text-xs text-muted-foreground pt-2">Duration: {collab.duration}</div>
              </div>
            </div>
          ))}
        </div>

<div className="anatomical-grid p-8 border-2 border-foreground bg-card">
          <h2 className="text-3xl font-sans text-foreground mb-6">Application Process</h2>

<div className="space-y-6">
            <div className="flex gap-4">
              <span className="font-mono text-lg text-primary flex-shrink-0">[1]</span>
              <div>
                <h3 className="font-sans text-xl text-foreground mb-2">Initial Inquiry</h3>
                <p className="font-mono text-sm text-muted-foreground leading-relaxed">
                  Submit a brief proposal (2-3 pages) outlining your research interests, institutional affiliation, and
                  desired collaboration type. Include CV and relevant publications.
                </p>
              </div>
            </div>

<div className="flex gap-4">
              <span className="font-mono text-lg text-primary flex-shrink-0">[2]</span>
              <div>
                <h3 className="font-sans text-xl text-foreground mb-2">Review</h3>
                <p className="font-mono text-sm text-muted-foreground leading-relaxed">
                  Our Collaboration Committee reviews proposals monthly. Promising applications receive invitations for
                  detailed discussion with relevant faculty.
                </p>
              </div>
            </div>

<div className="flex gap-4">
              <span className="font-mono text-lg text-primary flex-shrink-0">[3]</span>
              <div>
                <h3 className="font-sans text-xl text-foreground mb-2">Formal Agreement</h3>
                <p className="font-mono text-sm text-muted-foreground leading-relaxed">
                  Approved collaborations require formalized agreements specifying scope, duration, resources, IP
                  rights, and publication protocols.
                </p>
              </div>
            </div>

<div className="flex gap-4">
              <span className="font-mono text-lg text-primary flex-shrink-0">[4]</span>
              <div>
                <h3 className="font-sans text-xl text-foreground mb-2">Commencement</h3>
                <p className="font-mono text-sm text-muted-foreground leading-relaxed">
                  Collaboration begins with orientation to Institute facilities, protocols, and personnel. Regular
                  progress reviews ensure mutual benefit.
                </p>
              </div>
            </div>
          </div>

<div className="mt-8 pt-6 border-t border-border">
            <Link
              href="/contact"
              className="inline-block px-8 py-3 border-2 border-primary bg-primary text-background hover:bg-foreground hover:border-foreground transition-clockwork font-mono text-sm"
            >
              Submit Collaboration Proposal →
            </Link>
          </div>
        </div>

<div className="mt-12 anatomical-grid p-6 border-2 border-foreground bg-card">
          <h2 className="text-2xl font-sans text-foreground mb-4">Current Partners</h2>
          <div className="grid md:grid-cols-3 gap-4 font-mono text-sm text-muted-foreground">
            <div>Royal Society (London)</div>
            <div>Max Planck Institute</div>
            <div>MIT Media Lab</div>
            <div>University of Edinburgh</div>
            <div>ETH Zürich</div>
            <div>Kyoto University</div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-narrative.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { Button } from "@/components/ui/button"
import Link from "next/link"

gsap.registerPlugin(ScrollTrigger)

// Individual narrative section with parallax layers
function NarrativeSection({
  title,
  description,
  index,
  link,
}: {
  title: string
  description: string
  index: number
  link: string
}) {
  const sectionRef = useRef<HTMLDivElement>(null)
  const titleRef = useRef<HTMLHeadingElement>(null)
  const contentRef = useRef<HTMLDivElement>(null)
  const diagramRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (!sectionRef.current) return

const ctx = gsap.context(() => {
      // Parallax layers at different speeds
      if (titleRef.current) {
        gsap.fromTo(
          titleRef.current,
          { opacity: 0, x: -100 },
          {
            opacity: 1,
            x: 0,
            duration: 1,
            ease: "power2.out",
            scrollTrigger: {
              trigger: titleRef.current,
              start: "top 75%",
              toggleActions: "play none none none",
            },
          },
        )

// Title parallax
        gsap.to(titleRef.current, {
          y: -50,
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top bottom",
            end: "bottom top",
            scrub: 1,
          },
        })
      }

if (contentRef.current) {
        gsap.fromTo(
          contentRef.current,
          { opacity: 0, y: 50 },
          {
            opacity: 1,
            y: 0,
            duration: 1,
            ease: "power2.out",
            scrollTrigger: {
              trigger: contentRef.current,
              start: "top 70%",
            },
          },
        )

// Content parallax (slower)
        gsap.to(contentRef.current, {
          y: -80,
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top bottom",
            end: "bottom top",
            scrub: 1,
          },
        })
      }

// Diagram rotation based on scroll
      if (diagramRef.current) {
        gsap.to(diagramRef.current, {
          rotation: 180,
          scrollTrigger: {
            trigger: diagramRef.current,
            start: "top center",
            end: "bottom center",
            scrub: 2,
          },
        })
      }
    }, sectionRef)

return () => ctx.revert()
  }, [])

return (
    <div ref={sectionRef} className="relative min-h-screen flex items-center py-32">
      {/* Background diagram layer (fastest parallax) */}
      <div
        ref={diagramRef}
        className="absolute right-12 top-1/2 -translate-y-1/2 w-64 h-64 opacity-10 pointer-events-none"
      >
        <svg viewBox="0 0 200 200" fill="none" stroke="currentColor" strokeWidth="0.5">
          <circle cx="100" cy="100" r="80" />
          <circle cx="100" cy="100" r="60" />
          <circle cx="100" cy="100" r="40" />
          <circle cx="100" cy="100" r="20" />
          <line x1="100" y1="20" x2="100" y2="180" />
          <line x1="20" y1="100" x2="180" y2="100" />
          <line x1="40" y1="40" x2="160" y2="160" />
          <line x1="160" y1="40" x2="40" y2="160" />
        </svg>
      </div>

<div className="container mx-auto px-6 relative z-10">
        <div className={`max-w-3xl ${index % 2 === 0 ? "ml-0" : "ml-auto"}`}>
          {/* Section number */}
          <div className="font-mono text-sm mb-4 opacity-60">
            <span className="etched px-3 py-1 inline-block">SECTION {String(index + 1).padStart(2, "0")}</span>
          </div>

{/* Title with mechanical reveal */}
          <h2 ref={titleRef} className="text-5xl md:text-6xl font-sans mb-6 opacity-0 imperfect-line pb-4">
            {title}
          </h2>

{/* Content */}
          <div ref={contentRef} className="space-y-6 opacity-0">
            <p className="text-lg leading-relaxed font-sans">{description}</p>

<div className="flex items-center gap-4 pt-4">
              <Link href={link}>
                <Button
                  variant="outline"
                  className="etched font-mono transition-clockwork hover:bg-primary hover:text-primary-foreground bg-transparent"
                >
                  EXAMINE SPECIMEN →
                </Button>
              </Link>

{/* Decorative measurement marks */}
              <div className="flex-1 flex items-center gap-1 opacity-40">
                {Array.from({ length: 20 }).map((_, i) => (
                  <div key={i} className={`w-px ${i % 5 === 0 ? "h-4" : "h-2"} bg-current`} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export function ScrollNarrative() {
  const sections = [
    {
      title: "Anatomical Cartography",
      description:
        "We map the topography of living systems with the precision of 18th-century surveyors. Each organ, each vessel, each microscopic structure is documented as if it were a vast, unexplored territory—annotated in ink, preserved in amber.",
      link: "/research",
    },
    {
      title: "Mechanical Taxonomy",
      description:
        "Our specimens are catalogued not by their genetic lineage, but by the machinery of their operation. We classify hearts as pumps, lungs as bellows, neurons as telegraph wires—bridging the chasm between flesh and function.",
      link: "/discoveries",
    },
    {
      title: "Temporal Dissection",
      description:
        "Time itself becomes our scalpel. We examine not just the structure of an organism, but its chronology—the way a cell remembers, the way tissue ages, the way death inscribes itself into the living manuscript.",
      link: "/archives",
    },
    {
      title: "Alchemical Synthesis",
      description:
        "In our laboratories, the boundaries between organic chemistry and mystical transmutation blur. We seek not the philosopher's stone, but the biological equivalent—the fundamental process that turns matter into meaning, mechanism into life.",
      link: "/faculty",
    },
  ]

return (
    <div className="relative bg-background">
      {sections.map((section, index) => (
        <NarrativeSection key={index} {...section} index={index} />
      ))}

{/* Final call to action - pinned at bottom */}
      <FinalCTA />
    </div>
  )
}

function FinalCTA() {
  const sectionRef = useRef<HTMLDivElement>(null)
  const contentRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (!sectionRef.current) return

const ctx = gsap.context(() => {
      ScrollTrigger.create({
        trigger: sectionRef.current,
        start: "top bottom",
        end: "top center",
        scrub: 1,
        onUpdate: (self) => {
          if (contentRef.current) {
            const progress = self.progress
            contentRef.current.style.opacity = String(progress)
            contentRef.current.style.transform = `scale(${0.8 + progress * 0.2})`
          }
        },
      })
    }, sectionRef)

return () => ctx.revert()
  }, [])

return (
    <div ref={sectionRef} className="relative min-h-screen flex items-center justify-center anatomical-grid">
      <div ref={contentRef} className="text-center max-w-2xl mx-auto px-6 opacity-0">
        <h2 className="text-6xl md:text-7xl font-sans mb-8">
          Join Our
          <br />
          Expedition
        </h2>
        <p className="text-xl font-mono mb-12 leading-relaxed">
          The archives are open. The specimens await examination.
          <br />
          Your dissection table has been prepared.
        </p>
        <div className="flex items-center justify-center gap-4">
          <Link href="/contact">
            <Button size="lg" className="etched font-mono text-lg px-8 transition-clockwork">
              SUBMIT INQUIRY
            </Button>
          </Link>
          <Link href="/research">
            <Button
              size="lg"
              variant="outline"
              className="etched font-mono text-lg px-8 transition-clockwork bg-transparent"
            >
              BROWSE RESEARCH
            </Button>
          </Link>
        </div>

{/* Final seal */}
        <div className="mt-16">
          <div className="inline-block opacity-40">
            <svg viewBox="0 0 120 120" className="w-32 h-32">
              <circle cx="60" cy="60" r="55" fill="none" stroke="currentColor" strokeWidth="1" />
              <circle cx="60" cy="60" r="45" fill="none" stroke="currentColor" strokeWidth="2" />
              <path d="M 60 15 L 60 60 L 90 60" stroke="currentColor" strokeWidth="1" fill="none" />
              <text x="60" y="80" textAnchor="middle" className="text-xs font-mono fill-current">
                FINIS
              </text>
            </svg>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.3",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "three": "^0.170.0",
    "@react-three/fiber": "^8.17.10",
    "@react-three/drei": "^9.117.3",
    "gsap": "^3.12.5",
    "@types/three": "^0.170.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/scroll-driven-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Canvas, useFrame, useThree } from "@react-three/fiber"
import { Environment, PerspectiveCamera } from "@react-three/drei"
import { useRef, useEffect, useMemo, useState } from "react"
import * as THREE from "three"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)

// MouseState interface declaration
interface MouseState {
  x: number
  y: number
  isHovering: boolean
  isDragging: boolean
}

// Advanced dithering shader with dynamic properties
const DitheredMaterial = ({ scrollProgress = 0 }: { scrollProgress?: number }) => {
  const materialRef = useRef<THREE.ShaderMaterial>(null)

const vertexShader = `
    varying vec2 vUv;
    varying vec3 vNormal;
    varying vec3 vPosition;
    varying vec3 vViewPosition;
    
    void main() {
      vUv = uv;
      vNormal = normalize(normalMatrix * normal);
      vPosition = position;
      vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
      vViewPosition = -mvPosition.xyz;
      gl_Position = projectionMatrix * mvPosition;
    }
  `

const uniforms = useMemo(
    () => ({
      uTime: { value: 0 },
      uScrollProgress: { value: 0 },
      uColorParchment: { value: new THREE.Color(0.957, 0.941, 0.91) },
      uColorVerdigris: { value: new THREE.Color(0.263, 0.702, 0.682) },
      uColorGold: { value: new THREE.Color(0.855, 0.647, 0.125) },
      uColorInk: { value: new THREE.Color(0.165, 0.165, 0.165) },
      uLightPosition: { value: new THREE.Vector3(5, 5, 5) },
      uRoughness: { value: 0.4 },
      uMetalness: { value: 0.6 },
    }),
    [],
  )

useFrame((state) => {
    if (materialRef.current) {
      materialRef.current.uniforms.uTime.value = state.clock.elapsedTime
      materialRef.current.uniforms.uScrollProgress.value = scrollProgress
    }
  })

return (
    <shaderMaterial
      ref={materialRef}
      vertexShader={vertexShader}
      fragmentShader={fragmentShader}
      uniforms={uniforms}
      transparent
      side={THREE.DoubleSide}
    />
  )
}

// Main anatomical structure - rotates and morphs with scroll
function AnatomicalStructure({ scrollProgress, mouseState }: { scrollProgress: number; mouseState: MouseState }) {
  const groupRef = useRef<THREE.Group>(null)
  const torusRef = useRef<THREE.Mesh>(null)
  const sphereRef = useRef<THREE.Mesh>(null)
  const polyRef = useRef<THREE.Mesh>(null)

// Smooth lerping values
  const lerpedRotation = useRef({ x: 0, y: 0, z: 0 })
  const lerpedPosition = useRef({ x: 0, y: 0, z: 0 })
  const lerpedScale = useRef(1)

// Mouse interaction lerping
  const lerpedMouseRotation = useRef({ x: 0, y: 0 })
  const hoverScale = useRef(1)

useFrame((state) => {
    if (!groupRef.current) return

// Calculate target values based on scroll progress
    const targetRotationX = scrollProgress * Math.PI * 2
    const targetRotationY = scrollProgress * Math.PI * 1.5
    const targetScale = 1 + scrollProgress * 0.5
    const targetY = Math.sin(scrollProgress * Math.PI) * 2

const targetMouseRotationX = mouseState.y * Math.PI * 0.3
    const targetMouseRotationY = mouseState.x * Math.PI * 0.3
    const targetHoverScale = mouseState.isHovering ? 1.15 : 1

// Smooth lerping for mouse rotation
    lerpedMouseRotation.current.x += (targetMouseRotationX - lerpedMouseRotation.current.x) * 0.08
    lerpedMouseRotation.current.y += (targetMouseRotationY - lerpedMouseRotation.current.y) * 0.08
    hoverScale.current += (targetHoverScale - hoverScale.current) * 0.06

// Smooth lerping for silky transitions (0.05 = lerp speed)
    lerpedRotation.current.x += (targetRotationX - lerpedRotation.current.x) * 0.05
    lerpedRotation.current.y += (targetRotationY - lerpedRotation.current.y) * 0.05
    lerpedScale.current += (targetScale - lerpedScale.current) * 0.05
    lerpedPosition.current.y += (targetY - lerpedPosition.current.y) * 0.05

groupRef.current.rotation.x = lerpedRotation.current.x + lerpedMouseRotation.current.x
    groupRef.current.rotation.y = lerpedRotation.current.y + lerpedMouseRotation.current.y
    groupRef.current.scale.setScalar(lerpedScale.current * hoverScale.current)
    groupRef.current.position.y = lerpedPosition.current.y

// Individual component animations with hover boost
    if (torusRef.current) {
      const step = Math.floor(state.clock.elapsedTime * 2) / 2
      const hoverSpin = mouseState.isHovering ? state.clock.elapsedTime * 0.5 : 0
      torusRef.current.rotation.z = step * 0.1 + scrollProgress * Math.PI + hoverSpin
    }

if (sphereRef.current) {
      const pulse = Math.sin(state.clock.elapsedTime + scrollProgress * 3) * 0.1 + 1
      const hoverPulse = mouseState.isHovering ? 1.1 : 1
      sphereRef.current.scale.setScalar(pulse * hoverPulse)
    }

if (polyRef.current) {
      const step = Math.floor(state.clock.elapsedTime * 3) / 3
      const hoverSpin = mouseState.isHovering ? state.clock.elapsedTime * 0.3 : 0
      polyRef.current.rotation.x = step * 0.3 + hoverSpin
      polyRef.current.rotation.z = step * 0.2 + hoverSpin * 0.5
    }
  })

return (
    <group ref={groupRef}>
      {/* Central Torus - Anatomical Ring */}
      <mesh ref={torusRef} position={[0, 0, 0]}>
        <torusGeometry args={[2.5, 0.8, 24, 48]} />
        <DitheredMaterial scrollProgress={scrollProgress} />
      </mesh>

{/* Organic Sphere - Pulsing Core */}
      <mesh ref={sphereRef} position={[0, 0, 0]}>
        <sphereGeometry args={[1.2, 32, 32]} />
        <DitheredMaterial scrollProgress={scrollProgress} />
      </mesh>

{/* Mechanical Polyhedra - Orbiting Elements */}
      <mesh ref={polyRef} position={[3, 0, 0]}>
        <icosahedronGeometry args={[0.8, 1]} />
        <DitheredMaterial scrollProgress={scrollProgress} />
      </mesh>

<mesh position={[0, 2.5, 0]} rotation={[scrollProgress * Math.PI, 0, 0]}>
        <tetrahedronGeometry args={[0.7, 0]} />
        <DitheredMaterial scrollProgress={scrollProgress} />
      </mesh>
    </group>
  )
}

// Camera controller with scroll-driven movement
function ScrollCamera({ scrollProgress }: { scrollProgress: number }) {
  const { camera } = useThree()
  const lerpedZ = useRef(8)
  const lerpedY = useRef(0)
  const lerpedFov = useRef(50)

useFrame(() => {
    // Calculate target camera positions based on scroll
    const targetZ = 8 - scrollProgress * 5
    const targetY = scrollProgress * 3
    const targetFov = 50 + scrollProgress * 20

// Smooth lerping
    lerpedZ.current += (targetZ - lerpedZ.current) * 0.05
    lerpedY.current += (targetY - lerpedY.current) * 0.05
    lerpedFov.current += (targetFov - lerpedFov.current) * 0.05

camera.position.z = lerpedZ.current
    camera.position.y = lerpedY.current

if (camera instanceof THREE.PerspectiveCamera) {
      camera.fov = lerpedFov.current
      camera.updateProjectionMatrix()
    }

camera.lookAt(0, lerpedY.current, 0)
  })

return null
}

// Dynamic lighting controller
function ScrollLighting({ scrollProgress }: { scrollProgress: number }) {
  const lightRef = useRef<THREE.PointLight>(null)
  const ambientRef = useRef<THREE.AmbientLight>(null)

const lerpedIntensity = useRef(0.5)
  const lerpedColor = useRef(new THREE.Color(0.263, 0.702, 0.682))

useFrame(() => {
    if (lightRef.current) {
      const targetIntensity = 0.5 + scrollProgress * 1.5
      lerpedIntensity.current += (targetIntensity - lerpedIntensity.current) * 0.05
      lightRef.current.intensity = lerpedIntensity.current

// Color shift from verdigris to gold
      const targetColor = new THREE.Color().lerpColors(
        new THREE.Color(0.263, 0.702, 0.682), // verdigris
        new THREE.Color(0.855, 0.647, 0.125), // gold
        scrollProgress,
      )
      lerpedColor.current.lerp(targetColor, 0.05)
      lightRef.current.color = lerpedColor.current

// Move light in circular pattern
      lightRef.current.position.x = Math.cos(scrollProgress * Math.PI * 2) * 5
      lightRef.current.position.z = Math.sin(scrollProgress * Math.PI * 2) * 5
      lightRef.current.position.y = 3 + scrollProgress * 3
    }

if (ambientRef.current) {
      ambientRef.current.intensity = 0.2 + scrollProgress * 0.3
    }
  })

return (
    <>
      <ambientLight ref={ambientRef} intensity={0.2} />
      <pointLight ref={lightRef} position={[5, 5, 5]} intensity={0.5} color="#43b3ae" />
      <pointLight position={[-5, 3, -5]} intensity={0.3} color="#2a2a2a" />
      <spotLight position={[0, 10, 0]} angle={0.6} penumbra={1} intensity={scrollProgress} castShadow color="#daa520" />
    </>
  )
}

// Main scene component
function Scene() {
  const [scrollProgress, setScrollProgress] = useState(0)
  const scrollProgressRef = useRef(0)
  const lerpedScrollProgress = useRef(0)

// Mouse interaction state
  const [mouseState, setMouseState] = useState<MouseState>({
    x: 0,
    y: 0,
    isHovering: false,
    isDragging: false,
  })

useEffect(() => {
    ScrollTrigger.create({
      trigger: "body",
      start: "top top",
      end: "bottom bottom",
      scrub: 0.5,
      onUpdate: (self) => {
        scrollProgressRef.current = self.progress
        setScrollProgress(self.progress)
      },
    })

let rafId: number
    const updateLoop = () => {
      rafId = requestAnimationFrame(updateLoop)
    }
    updateLoop()

const handleMouseMove = (e: MouseEvent) => {
      const x = (e.clientX / window.innerWidth) * 2 - 1
      const y = -(e.clientY / window.innerHeight) * 2 + 1

setMouseState((prev) => ({
        ...prev,
        x,
        y,
      }))
    }

const handleMouseEnter = () => {
      setMouseState((prev) => ({ ...prev, isHovering: true }))
    }

const handleMouseLeave = () => {
      setMouseState((prev) => ({ ...prev, isHovering: false, x: 0, y: 0 }))
    }

const canvasElement = document.querySelector("canvas")

window.addEventListener("mousemove", handleMouseMove)
    canvasElement?.addEventListener("mouseenter", handleMouseEnter)
    canvasElement?.addEventListener("mouseleave", handleMouseLeave)

return () => {
      cancelAnimationFrame(rafId)
      ScrollTrigger.getAll().forEach((trigger) => trigger.kill())
      window.removeEventListener("mousemove", handleMouseMove)
      canvasElement?.removeEventListener("mouseenter", handleMouseEnter)
      canvasElement?.removeEventListener("mouseleave", handleMouseLeave)
    }
  }, [])

useFrame(() => {
    lerpedScrollProgress.current += (scrollProgressRef.current - lerpedScrollProgress.current) * 0.08
  })

return (
    <>
      <ScrollCamera scrollProgress={lerpedScrollProgress.current} />
      <ScrollLighting scrollProgress={lerpedScrollProgress.current} />
      <AnatomicalStructure scrollProgress={lerpedScrollProgress.current} mouseState={mouseState} />
      <Environment preset="warehouse" />
    </>
  )
}

export function ScrollDrivenScene() {
  return (
    <div className="fixed inset-0 z-0 pointer-events-none">
      <Canvas
        shadows
        dpr={[1, 2]}
        gl={{ alpha: true, antialias: true }}
        frameloop="always"
        className="pointer-events-auto"
      >
        <PerspectiveCamera makeDefault position={[0, 0, 8]} fov={50} />
        <Scene />
      </Canvas>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { ScrollDrivenScene } from "@/components/scroll-driven-scene"
import { ScrollHero } from "@/components/scroll-hero"
import { ScrollNarrative } from "@/components/scroll-narrative"
import { AlchemicalSymbols } from "@/components/alchemical-symbols"

export default function HomePage() {
  return (
    <main className="relative min-h-screen overflow-x-hidden bg-background">
      {/* SVG Filter Definitions */}
      <svg className="absolute w-0 h-0">
        <defs>
          <filter id="gridTremor">
            <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="noise" />
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="0.5" />
          </filter>
          <filter id="inkBleed">
            <feMorphology operator="dilate" radius="0.5" />
            <feGaussianBlur stdDeviation="0.5" />
          </filter>
          <filter id="dither">
            <feTurbulence type="fractalNoise" baseFrequency="5" numOctaves="1" result="noise" />
            <feColorMatrix in="noise" type="saturate" values="0" result="desaturatedNoise" />
            <feComponentTransfer in="desaturatedNoise" result="theNoise">
              <feFuncA type="discrete" tableValues="0 0 0 0 0 1" />
            </feComponentTransfer>
            <feBlend in="SourceGraphic" in2="theNoise" mode="multiply" />
          </filter>
        </defs>
      </svg>

{/* Background Palimpsest Layers */}
      <AlchemicalSymbols />

{/* Main WebGL Scene - Scroll-Driven */}
      <ScrollDrivenScene />

{/* Scroll-Based Content Layers */}
      <div className="relative z-20">
        <ScrollHero />
        <ScrollNarrative />
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-hero.tsx" isEdit="true"
"use client"

import { useEffect, useRef } from "react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)

export function ScrollHero() {
  const sectionRef = useRef<HTMLElement>(null)
  const titleRef = useRef<HTMLHeadingElement>(null)
  const subtitleRef = useRef<HTMLParagraphElement>(null)
  const decorRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (!sectionRef.current) return

const ctx = gsap.context(() => {
      ScrollTrigger.create({
        trigger: sectionRef.current,
        start: "top top",
        end: "+=150%",
        pin: true,
        pinSpacing: true,
      })

if (titleRef.current) {
        gsap.from(titleRef.current, {
          opacity: 0,
          duration: 1,
          ease: "power2.out",
          scrollTrigger: {
            trigger: titleRef.current,
            start: "top 80%",
            toggleActions: "play none none none",
          },
        })
      }

if (subtitleRef.current) {
        gsap.fromTo(
          subtitleRef.current,
          { opacity: 0, y: 20 },
          {
            opacity: 1,
            y: 0,
            duration: 1.5,
            ease: "power2.out",
            scrollTrigger: {
              trigger: subtitleRef.current,
              start: "top 85%",
            },
          },
        )

gsap.to(subtitleRef.current, {
          y: -30,
          opacity: 0.8,
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top top",
            end: "bottom top",
            scrub: 1,
          },
        })
      }

// Organic unfurling decoration
      if (decorRef.current) {
        gsap.fromTo(
          decorRef.current,
          { scaleX: 0, transformOrigin: "left center" },
          {
            scaleX: 1,
            duration: 2,
            ease: "power1.inOut",
            scrollTrigger: {
              trigger: decorRef.current,
              start: "top 80%",
            },
          },
        )
      }
    }, sectionRef)

return () => ctx.revert()
  }, [])

return (
    <section
      ref={sectionRef}
      className="relative min-h-screen flex items-center justify-center anatomical-grid overflow-hidden"
    >
      {/* Decorative Elements */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {/* Top left corner decoration */}
        <svg
          className="absolute top-8 left-8 w-32 h-32 opacity-40"
          viewBox="0 0 100 100"
          fill="none"
          stroke="currentColor"
          strokeWidth="1"
        >
          <circle cx="50" cy="50" r="40" />
          <circle cx="50" cy="50" r="30" />
          <circle cx="50" cy="50" r="20" />
          <line x1="50" y1="10" x2="50" y2="90" />
          <line x1="10" y1="50" x2="90" y2="50" />
        </svg>

{/* Unfurling line decoration */}
        <div
          ref={decorRef}
          className="absolute top-1/2 left-0 w-full h-px bg-foreground opacity-20"
          style={{ filter: "url(#gridTremor)" }}
        />
      </div>

<div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
        <h1
          ref={titleRef}
          className="text-7xl md:text-8xl lg:text-9xl font-sans leading-none mb-8 filter"
          style={{ filter: "url(#dither)", textShadow: "2px 2px 8px rgba(0,0,0,0.5)" }}
        >
          Institute of Chrono-Organic Research
        </h1>

<p
          ref={subtitleRef}
          className="text-xl md:text-2xl font-mono leading-relaxed"
          style={{ textShadow: "1px 1px 4px rgba(0,0,0,0.5)" }}
        >
          WHERE MECHANICAL PRECISION MEETS BIOLOGICAL IMPERFECTION
        </p>

{/* Wax seal decoration */}
        <div className="mt-16 inline-flex items-center justify-center">
          <div className="relative w-24 h-24">
            <svg viewBox="0 0 100 100" className="w-full h-full">
              <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" strokeWidth="2" className="opacity-60" />
              <circle cx="50" cy="50" r="35" fill="none" stroke="currentColor" strokeWidth="1" className="opacity-40" />
              <text x="50" y="55" textAnchor="middle" className="text-xs font-mono fill-current">
                EST
              </text>
              <text x="50" y="65" textAnchor="middle" className="text-xs font-mono fill-current">
                MDCCCL
              </text>
            </svg>
          </div>
        </div>
      </div>

{/* Scroll indicator */}
      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 font-mono text-sm opacity-60">
        <div className="flex flex-col items-center gap-2">
          <span className="tracking-wider">SCROLL TO UNFURL</span>
          <div className="w-px h-16 bg-current animate-pulse" />
        </div>
      </div>
    </section>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This