weiß jemand wie man diese Wellen Bewegung macht

Hallo Nemessis,

über Canva sollte das möglich sein.

Gruß Michael

Freepik oder Splash Fotos - kostenlos downloaden oder selbst mit einem Grafik Programm machen wie Corel Draw, Adobe etc.

nemessis

ChatGPT sagt folgendes dazu:

Zitat

Die wellenartigen Bewegungen auf der verlinkten Seite von Exovia entstehen durch eine Kombination aus:

1. Canvas-Animationen (meist mit WebGL oder 2D-Canvas),
2. Interaktion mit Mausbewegung, und
3. Shaders (bei WebGL) oder mathematischen Funktionen (z. B. Sinuswellen).

Du kannst so eine Website mit folgenden Technologien umsetzen:

---

🔧 Technologien

• HTML5 + CSS3: Grundstruktur und Styling
• JavaScript: Interaktion und Animation
• Canvas API oder WebGL / Three.js: Darstellung der Wellen
• Optional: GSAP (GreenSock) für fein abgestimmte Animationen

🧱 Für komplexere Wellen (wie auf Exovia)

Dort wird vermutlich Three.js oder direkt WebGL GLSL Shader verwendet. Die Schritte wären:

1. Erstelle ein Mesh (z. B. eine Plane mit vielen Vertices).
2. Verändere die Z-Koordinaten im Vertex-Shader abhängig von Mausposition und Zeit (sin() oder perlin noise).
3. Nutze Raycaster oder Uniforms in Three.js, um die Mausposition auf das 3D-Objekt zu projizieren.

---

💡 Alternativen / Inspiration

• Three.js Beispiele: https://threejs.org/examples/#webgl_animation_cloth
• ShaderToy (für Shader-Ideen): https://www.shadertoy.com/
• GSAP + Canvas für sanfte Bewegungen

Gruss