46 lines (32 loc) · 1.73 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development Commands

bun dev - Start development server with Turbopack
bun build - Build production application
bun lint - Run ESLint
bun start - Start production server

Architecture Overview

This is a Next.js 15 marketing website for Vortex, a columnar file format. The site features:

Core Technologies

Next.js 15 with App Router and Turbopack for development
React 19 with TypeScript
TailwindCSS 4 for styling
OGL (WebGL library) for 3D graphics and ASCII art effect
Plausible Analytics for privacy-focused tracking
Vercel Analytics for performance monitoring

Visual System

3D Logo Animation: WebGL-rendered GLTF model (/public/logo.glb) with ASCII art shader effect
Interactive Mouse/Touch Controls: Model rotates based on user interaction
Responsive Design: Different camera positions and sizing for mobile/desktop
Custom Fonts: Geist Sans, Geist Mono, and Funnel Display

Component Structure

HeroASCII - Main 3D logo component with WebGL rendering and ASCII conversion
Overlay - Text overlay on top of the 3D scene
Layout components (Header, Footer) wrap all pages
404 page has its own hero variant (hero-404, overlay-404)

Key Files

src/app/page.tsx - Homepage with metadata for SEO
src/components/hero/index.tsx - Complex WebGL rendering with custom shaders
src/app/layout.tsx - Root layout with analytics providers and font loading
next.config.ts - Plausible proxy configuration

The site is optimized for performance with font optimization, analytics integration, and responsive WebGL rendering.