Animații în cod cu Claude, Modvia Academy, 2026
Matter.js e un motor de fizică 2D. Bile care sar la drag-and-drop, text care cade, podele lipicioase, cu gravitație și coliziuni realiste.
import Matter from 'matter-js';
import { useEffect, useRef } from 'react';
export function FallingLetters({ text }) {
const ref = useRef();
useEffect(() => {
const Engine = Matter.Engine, Render = Matter.Render, Bodies = Matter.Bodies, World = Matter.World, Mouse = Matter.Mouse, MouseConstraint = Matter.MouseConstraint;
const engine = Engine.create();
const render = Render.create({ element: ref.current, engine, options: { width: 600, height: 400, wireframes: false, background: 'transparent' } });
const ground = Bodies.rectangle(300, 400, 600, 20, { isStatic: true });
const letters = text.split('').map((ch, i) => Bodies.rectangle(50 + i * 35, 50, 30, 30, { restitution: 0.6, render: { fillStyle: '#8b5cf6' } }));
World.add(engine.world, [ground, ...letters]);
const mouse = Mouse.create(render.canvas);
World.add(engine.world, MouseConstraint.create(engine, { mouse }));
Matter.Runner.run(engine);
Render.run(render);
return () => { Render.stop(render); World.clear(engine.world); Engine.clear(engine); };
}, [text]);
return <div ref={ref} />;
}
Pentru fizică 3D în R3F, folosește @react-three/rapier. Corpuri rigide, joints, vehicule, ragdolls.
npm install @react-three/rapier
import { Physics, RigidBody, CuboidCollider } from '@react-three/rapier';
<Canvas>
<Physics gravity={[0, -9.8, 0]}>
<RigidBody><mesh position={[0, 5, 0]}><boxGeometry /><meshStandardMaterial /></mesh></RigidBody>
<CuboidCollider args={[10, 0.5, 10]} position={[0, -1, 0]} />
</Physics>
</Canvas>
Browserele au livrat un API nativ pentru animarea între pagini sau stări ale DOM-ului. O singură linie de cod transformă vederea veche în cea nouă.
// In React Router or any router
function navigate(to) {
if (!document.startViewTransition) return router.push(to);
document.startViewTransition(() => router.push(to));
}
/* CSS: dă unui element partajat același view-transition-name pe ambele pagini, iar browserul îl transformă */
.hero-image { view-transition-name: hero; }
WebGPU înlocuiește WebGL cu un API modern, cu overhead mai mic. Three.js îl suportă prin WebGPURenderer. Câștigurile mari sunt shaderele grele, compute (rularea de calcule paralele pe GPU) și inferența ML în browser.
În 2026, suportul WebGPU e larg în Chrome, Edge, Safari. Folosește feature detection și cazi înapoi pe WebGL pentru browserele mai vechi.
Cea mai futuristă mișcare: generezi animație în timp real cu Claude, pe baza input-ului utilizatorului. Un utilizator scrie 'fă cardul ăsta să pară furios', Claude returnează parametrii de timing GSAP, iar site-ul tău îi aplică.
// Server endpoint
app.post('/animate', async (req, res) => {
const { mood } = req.body;
const r = await client.messages.create({
model: 'claude-sonnet-4-6',
max_tokens: 200,
messages: [{ role: 'user', content: `Return JSON only. Animation params for mood='${mood}'. Schema, { duration: ms, easing: cubic-bezier values, scaleFrom, yFrom, rotation }.` }],
});
res.json(JSON.parse(r.content[0].text));
});
Obiectiv. Adaugă o jucăușenie tactilă portofoliului tău.
Obiectiv. Dai click pe o miniatură și o vezi transformându-se într-o pagină completă de studiu de caz.
Obiectiv. Chiar dacă nu câștigi, doar badge-ul justifică munca.