Lib

Non-UI code: hooks, integrations, styles, and utilities.

Rule: Renders UI → components/ · Everything else → lib/

Quick Imports

// Hooks
import { useScrollTrigger, useTransform } from 'hamo'
import { useDeviceDetection } from '@/lib/hooks/use-device-detection'

// Utilities - explicit imports for better tree-shaking
import { clamp, lerp } from '@/lib/utils/math'
import { slugify } from '@/lib/utils/strings'
import { fetchWithTimeout } from '@/lib/utils/fetch'

// Styles
import { colors, themes, breakpoints } from '@/lib/styles/config'

// Integrations
import { sanityFetch } from 'next-sanity/live'
import { Cart } from '@/lib/integrations/shopify/cart'

// WebGL
import { Canvas } from '@/lib/webgl/components/canvas'
import { WebGLTunnel } from '@/lib/webgl/components/tunnel'

// Dev tools
import { useOrchestra } from '@/lib/dev'

Directories

Directory	Purpose	Optional?
hooks/	React hooks	❌ Core
styles/	CSS & Tailwind config	❌ Core
utils/	Pure utilities (math, fetch, metadata, strings, validation)	❌ Core
env.ts	Typed environment variables (Zod-validated singleton)	❌ Core
features/	Optional runtime features (WebGL, dev tools, GSAP)	✅ Yes
integrations/	Sanity, Shopify, HubSpot	✅ Yes
webgl/	3D graphics with R3F	✅ Yes
dev/	Debug tools (CMD+O)	✅ Yes

Scripts

bun dev              # Start dev server
bun run generate     # Generate pages/components
bun run setup:project  # Configure integrations
bun setup:styles     # Regenerate CSS
bun run check:assets   # Fail on videos over 2MB or rasters over 2400px/1MB; part of bun run check