Vanta Clouds
Live previewPerformance varies by device
No account needed to copy or download. Check dependencies and thelicense status before publishing.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vanta.js Clouds</title>
<style>
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
cursor: none;
background: #07080d;
color: #f5f7fb;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#vanta {
position: fixed;
inset: 0;
cursor: none;
}
canvas {
cursor: none !important;
}
</style>
<script src="../vendor/three.r134.min.js"></script>
<script src="../vendor/p5.min.js"></script>
<script src="../vendor/vanta/dist/vanta.clouds.min.js"></script>
</head>
<body>
<div id="vanta"></div>
<script>
VANTA.CLOUDS({
el: "#vanta",
mouseControls: true,
touchControls: true,
gyroControls: false,
skyColor: 0x78c6df,
cloudColor: 0xc9d8f2,
cloudShadowColor: 0x1b3354,
sunColor: 0xffa24c,
sunGlareColor: 0xff6633,
sunlightColor: 0xffb06a,
speed: 0.8,
scale: 3
});
</script>
</body>
</html>About this animation
Vanta.js volumetric cloud field with warm sunlight and slow atmospheric movement.
Under the hood
Vanta.js Sunlit Volumetric Clouds
This delegates rendering to
VANTA.CLOUDS() from Vanta.js on Three.js WebGL, mounted on a fixed full-viewport #vanta div. The sky is built from six separate colours, skyColor: 0x78c6df, cloudColor: 0xc9d8f2 and cloudShadowColor: 0x1b3354 for the clouds, plus sunColor: 0xffa24c, sunGlareColor: 0xff6633 and sunlightColor: 0xffb06a for the sun, drifting at speed: 0.8 with scale: 3. Interaction is on via mouseControls: true and touchControls: true with gyroControls: false, and the wrapper hides the cursor everywhere, including canvas { cursor: none !important; }.Related
