The source for terax.app, the landing page for Terax, a lightweight terminal-first AI-native dev workspace. Open-sourced because people kept asking how the animated background and the overall design were built, so here it is, end to end.
The product itself lives in a separate repo: crynta/terax-ai.
The flowing line waves in the hero are the part most people ask about. It is a real-time WebGL shader, not a video or a Lottie file:
components/site/background-waves.tsxmounts the canvas and wires it into the page.components/line-waves.tsxholds the OGL setup and the GLSL fragment shader that draws the lines.
Everything is plain GLSL on top of a tiny WebGL wrapper, so it is easy to read and tweak.
- Next.js 16 (App Router) + React 19 + TypeScript
- Tailwind CSS v4 + shadcn/ui components
- OGL for the WebGL shader background
- Motion for animations
- Hugeicons icon set
- Deployed on Vercel
Prerequisites: Node 20+ and pnpm.
pnpm install
pnpm dev # http://localhost:3000Other scripts
pnpm build # production build
pnpm start # serve the production build
pnpm typecheck # tsc --noEmit
pnpm lint # eslintThe homepage shows the live GitHub star count via the GitHub API. Unauthenticated requests work fine but are rate-limited. To raise the limit, set a token:
GITHUB_TOKEN=your_token # optional, read-only, public-repo scope is enoughNothing else is required. There are no secrets, no accounts, and no telemetry.
app/ Next.js routes (home, about, changelog, privacy, terms, security)
components/site/ Page sections (hero, demo, feature grid, footer, ...)
components/ui/ shadcn/ui primitives
lib/site.ts Single source of truth: version, links, downloads
lib/changelog.ts Changelog data
Want to change a download link or bump the shown version? It all lives in lib/site.ts.
Licensed under the Apache-2.0 License, same as Terax itself.