Live at TheCoreBoys.com · Source available
A public landing page for a six-person creator group, combining a Three.js hero, animated manifesto, member roster, and live Twitch status.
Contribution & implementation
Built the Next.js 15 and React 19 experience, organizing the page into seven sections and connecting the roster to a shared Twitch live-status response.
Engineering approach
- Compose the experience from focused sections for the hero, manifesto, roster, live status, house reveal, crew, and footer.
- Fetch all six member streams in one cached Twitch Helix request and refresh the client view periodically.
- Use Zod to validate environment and API inputs, and combine Three.js, GSAP, Framer Motion, and Lenis for the visual experience.
Next.js 15 · React 19 · TypeScript · Three.js · GSAP · Twitch API · Zod
coreboys-web
The public-facing landing page for The Core Boys — a six-person creator group. This is a Next.js 15 / React 19 / Tailwind v4 site with a Three.js hero scene, GSAP-driven manifesto reveal, and a live Twitch status integration.
Tagline: Create. Own. Run. Everything.
Stack
- ◆Next.js 15 (App Router, Turbopack dev) · React 19
- ◆Tailwind v4 with CSS-vars-based theming
- ◆@react-three/fiber + @react-three/drei + @react-three/postprocessing
- ◆Framer Motion + GSAP/ScrollTrigger (scroll choreography)
- ◆Lenis smooth scroll
- ◆Radix primitives (Dialog, Tabs) — restyled
- ◆SWR for the Twitch live-status hook
- ◆Zod for env + API validation
- ◆pnpm
Architecture
The app composes seven sections: HeroCore, Manifesto, Roster, LiveNow, HouseReveal, Crew, and Footer. Supporting modules provide the Three.js scene, UI primitives, Lenis provider, and Twitch Helix integration.
Twitch integration & dev
The route at app/api/twitch/live/route.ts acquires a cached app-access token, fetches all six member streams in one Helix request, and returns live entries with cache-control. The client refreshes every 60 seconds and derives per-member live dots from the same payload.
pnpm install pnpm sync-assets pnpm dev pnpm typecheck pnpm lint pnpm build
Gallery
Appreciate this project
AI guide
Share
Other Projects
A local-first workspace for AI agents, projects, productivity, personal analytics, and developer operations. Coretex brings the tools used to run work and life into one focused Windows desktop app. It combines agent orchestration, project planning, communication, local infrastructure, and personal tracking behind a responsive React interface.
The public CORE Business Technology platform for websites, growth, AI, automation, and workplace technology. CoreTV.co brings services, pricing, estimates, booking, contact, and client access into one responsive product experience. This entry outlines the public platform while linking the reusable Core AI safety contracts repository behind the private product systems.
A comprehensive wellness platform to track workouts, nutrition, sleep, vitals, habits, therapeutics, appointments, and body metrics — with AI food analysis, Google Drive storage, and exportable health reports.
The current MDCran portfolio website — built with Next.js, Tailwind v4, shadcn/ui, and framer-motion.