JOYCO Lab — Motion Template

Starter template for building interactive motion and animation experiences with GSAP and Next.js.

Quick Start

The fastest way to get started is with the JOYCO CLI:

npx joyco create

Or clone and install manually:

git clone https://github.com/joyco-studio/lab-template-motion.git
cd lab-template-motion
npm install
npm run dev

Stack

• Next.js 16 — App Router
• React 19 — UI
• GSAP — Professional animation library with @gsap/react hooks
• Tailwind CSS 4 — Styling
• Zustand — State management
• Leva — Real-time parameter tweaking GUI
• TypeScript — Type safety

Scripts

Command	Description
npm run dev	Start dev server
npm run build	Production build
npm start	Start production server
npm run lint	Run ESLint

Themes

Switch themes via URL parameter:

?theme=dark      # default
?theme=light
?theme=radio
?theme=terminal

Project Structure

app/
  layout.tsx        # Root layout with theme support
  page.tsx          # Home page
  globals.css       # Global styles and theme variables
components/
  demo.tsx          # GSAP animation demo
  header.tsx        # Header with logo
  theme-init.tsx    # Theme initialization
  ui/button.tsx     # Reusable button component
lib/
  utils.ts          # Utility functions

License

MIT