Animații în cod cu Claude, Modvia Academy, 2026
SVG e doar XML pe care îl poți stiliza și anima cu CSS sau JS. Fără blur de raster. Fișiere minuscule. Scalabil la infinit.
<svg viewBox='0 0 100 100' className='draw-on-load'>
<path d='M10,50 Q50,10 90,50 T170,50' stroke='#8b5cf6' fill='none' strokeWidth='2' />
</svg>
.draw-on-load path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 2s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
Animațiile Lottie sunt exportate din After Effects (sau din editorul web LottieFiles) ca fișiere JSON mici. Sunt interactive, scalabile și rulează la orice dimensiune.
import Lottie from 'lottie-react';
import animation from './success.json';
<Lottie animationData={animation} loop autoplay style={{ width: 240 }} />
Găsești Lottie-uri gratuite pe lottiefiles.com. Sau comanzi unui designer unul cu brandingul tău.
tsparticles e fork-ul modern al particles.js. Atmosfere, ninsoare, confetti, rețele de web, totul în 5 linii.
import Particles, { initParticlesEngine } from '@tsparticles/react';
import { loadSlim } from '@tsparticles/slim';
import { useEffect, useState } from 'react';
export function Atmosphere() {
const [ready, setReady] = useState(false);
useEffect(() => { initParticlesEngine(loadSlim).then(() => setReady(true)); }, []);
if (!ready) return null;
return <Particles id='tsparticles' options={{
background: { color: 'transparent' },
particles: {
number: { value: 40 },
color: { value: '#8b5cf6' },
opacity: { value: 0.4 },
size: { value: 2 },
move: { enable: true, speed: 0.5 },
links: { enable: true, color: '#8b5cf6', opacity: 0.2, distance: 150 },
},
}} />;
}
Mai puțin înseamnă mai mult. 30 până la 60 de particule. Ține-le subtile.
GLSL e un limbaj minuscul care rulează pe GPU. Cu el scrii 'shadere', programe care pictează pixeli la fiecare frame. Cele mai premium efecte de pe web sunt shadere: noise de gradient, ondulații de cerneală, distorsiune de sticlă, text animat.
import { Canvas, useFrame } from '@react-three/fiber';
import { useRef } from 'react';
import * as THREE from 'three';
const frag = /* glsl */ `
uniform float uTime;
varying vec2 vUv;
void main(){
vec3 c1 = vec3(0.55, 0.36, 0.96);
vec3 c2 = vec3(0.02, 0.71, 0.83);
float t = 0.5 + 0.5 * sin(uTime * 0.4 + vUv.x * 6.283);
vec3 col = mix(c1, c2, t * vUv.y);
gl_FragColor = vec4(col, 1.0);
}`;
const vert = `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
function Plane() {
const mat = useRef();
useFrame((s) => { mat.current.uniforms.uTime.value = s.clock.elapsedTime; });
return <mesh><planeGeometry args={[3, 2, 1, 1]} /><shaderMaterial ref={mat} vertexShader={vert} fragmentShader={frag} uniforms={{ uTime: { value: 0 } }} /></mesh>;
}
export const ShaderHero = () => (<Canvas orthographic camera={{ zoom: 200, position: [0,0,5] }}><Plane /></Canvas>);
Alege O SINGURĂ înfloritură per pagină. Nu două. Nu trei. Un Lottie SAU un shader SAU un strat de particule. Două se bat pe atenție. Trei arată de amator.
Obiectiv. Un reveal de brand care costă 0KB și arată scump.
Obiectiv. Testează regula: poți face 2 înflorituri să coexiste? De cele mai multe ori răspunsul e nu, dovedește-ți asta.
Obiectiv. Brandurile de top plătesc pentru lucru cu shadere. Prinde unul.