CLAUDE ANIMATIONS

Nivel 0, Setup

Animații în cod cu Claude, Modvia Academy, 2026

🟦NIVEL 0

Setup, cockpit-ul de animație

Cursor + Claude + Vite + starter-ul potrivit. Douăzeci de minute de la zero la primul tău pixel în mișcare.

🎯 XP la finalizare: 100•🏅 Badge deblocat

 

 

Lecția 1, Instalează cei patru piloni

UnealtăDe ce
Node.js (LTS)Rulează tot ce vom instala. nodejs.org.
Cursor (sau VS Code cu extensia Claude)Editor cu Claude integrat. cursor.com.
Aplicația Claude desktopAl doilea creier al tău, în paralel cu editorul.
Git + GitHub DesktopÎți salvezi munca, faci deploy pe Vercel.

 

Lecția 2, Comanda de start pe care o vei scrie de 100 de ori

📜 Prompt Playbook,
Cel mai bun AI. • De ce. 
npm create vite@latest my-site -- --template react-ts
cd my-site
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install gsap @gsap/react framer-motion lenis lucide-react
npm install three @react-three/fiber @react-three/drei
npm run dev

Blocul acela de comenzi îți dă un proiect cu React, TypeScript, Tailwind, GSAP, Framer Motion, Lenis, Three.js + R3F și iconițe. Tot ce vom folosi în acest curs.

 

Lecția 3, Config Tailwind care nu strică animațiile

📜 Prompt Playbook,
Cel mai bun AI. • De ce. 
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        display: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
        body: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
      },
      colors: {
        ink: '#0d0d1c',
        paper: '#fafafa',
        accent: '#8b5cf6',
      },
      transitionTimingFunction: {
        snap: 'cubic-bezier(0.32, 0.72, 0, 1)',
        bounce: 'cubic-bezier(0.5, 1.5, 0.5, 1)',
      },
    },
  },
  plugins: [],
};

 

Lecția 4, Workflow-ul Claude Code pentru lucrul cu animații

  1. Deschide-ți proiectul în Cursor sau VS Code.
  1. Deschide Claude desktop alături. Folosește-l pentru discuții de design și referințe.
  1. Folosește AI-ul inline din Cursor (Cmd+K) pentru editări rapide în fișiere.
  1. Folosește Claude Code în terminal (comanda claude) pentru refactorizări pe mai multe fișiere.
  1. Lucrează mereu pe un branch git. Fă commit înainte de orice schimbare mare.

 

Lecția 5, Configurează-ți CLAUDE.md pentru proiecte de animație

📜 Prompt Playbook,
Cel mai bun AI. • De ce. 
# Project, [name]

## What this is
[1 paragraph]

## Stack
- React 18, TypeScript, Vite, Tailwind
- GSAP for timeline animations
- Framer Motion for UI animations
- Lenis for smooth scroll
- React Three Fiber for 3D

## Performance budget
- Lighthouse Performance >= 90
- LCP < 2.5s, CLS < 0.1
- No animation should run when prefers-reduced-motion is set
- No layout-shifting properties (use transform and opacity)

## Folders
- /src/components
- /src/animations
- /src/scenes (3D)
- /src/lib (utils)

## Conventions
- Named exports only
- Animation hooks live in /src/animations
- No inline keyframes, use Tailwind transitions or GSAP
- All copy in src/copy.ts

 

🎯 Pachet de quest-uri Nivel 0

 

🥉 QUEST BRONZ +30 XP
💻Ridică cockpit-ul

Obiectiv. Fii gata să livrezi. Gata cu scuzele.

Pași
  1. Instalează Node, Cursor (sau VS Code), Claude desktop, GitHub Desktop.
  2. Rulează starter-ul din Lecția 2. Verifică că serverul de dev rulează la localhost:5173.
  3. Pune CLAUDE.md din Lecția 5 în rădăcina proiectului.
  4. Fă commit la proiectul gol. Push într-un repo GitHub nou.
Gata când…
  • ☐ Serverul de dev rulează
  • ☐ Proiect trimis pe GitHub

 

🥈 QUEST ARGINT +70 XP
✏️Prima pagină animată cu Claude în buclă

Obiectiv. Simte bucla: prompt, generezi, rafinezi, livrezi.

Pași
  1. În Cursor, cere-i lui Claude (Cmd+K) o secțiune hero cu un titlu animat care se dezvăluie literă cu literă la încărcare.
  2. Conectează-o în App.tsx.
  3. În același chat, cere-i lui Claude să înlocuiască animația de reveal cu un contor de tip 'rolling number' care afișează o metrică fictivă.
  4. Fă deploy pe Vercel.
Gata când…
  • ☐ URL live pe Vercel
  • ☐ Hero-ul se animează la încărcare

 

🥇 QUEST AUR +100 XP
🏗️Construiește un 'Modvia Animation Sandbox' pe care să-l folosești pe tot parcursul cursului

Obiectiv. Să ai un singur repo unde trăiește fiecare quest viitor, organizat pe niveluri.

Pași
  1. Creează un proiect Vite numit 'modvia-animation-sandbox'.
  2. Configurează rute (sau pagini simple) pentru /level1, /level2, ..., /level7.
  3. Pe fiecare rută vei construi output-ul quest-ului principal al nivelului respectiv.
  4. Push pe GitHub. Deploy pe Vercel.
  5. Adaugă o homepage cu un card care duce către fiecare pagină de nivel.
Gata când…
  • ☐ Repo sandbox cu routing pentru toate nivelurile
  • ☐ URL live pe Vercel