Hugging Face's logo

Spaces:
AIgoose
/
df-cinematic
Running

App Files Community
df-cinematic / mesh-gradient.html
AIgoose's picture
AIgoose
Upload folder using huggingface_hub
cd5dc96 verified
raw
history blame contribute delete
5.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mesh Gradient Background — Cinematic Module</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{--bg:#0a0a0b;--text:#eae7e2;--muted:#5a5a5e;--accent:#c8a97e}
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.hero{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px}
.hero-label{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.hero h1{font-size:clamp(32px,6vw,64px);font-weight:600;line-height:1.15;max-width:700px;letter-spacing:-.025em}
.hero h1 span{color:var(--accent)}
.hero p{margin-top:16px;font-size:18px;color:var(--muted);max-width:50ch;line-height:1.5}
.mesh-section{position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mesh-canvas{position:absolute;inset:0;z-index:0}
.mesh-content{position:relative;z-index:2;text-align:center;max-width:600px;padding:40px}
.mesh-content h2{font-size:clamp(32px,5vw,56px);font-weight:600;letter-spacing:-.025em;margin-bottom:12px}
.mesh-content p{font-size:17px;color:rgba(234,231,226,.8);line-height:1.6;margin-bottom:24px}
.mesh-content a{display:inline-block;padding:12px 32px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);color:var(--text);border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;transition:background .2s}
.mesh-content a:hover{background:rgba(255,255,255,.2)}
.variants{padding:80px 24px;max-width:800px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.variant{aspect-ratio:16/10;border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--border)}
.variant canvas{width:100%;height:100%;display:block}
.variant-label{position:absolute;bottom:12px;left:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:4px 10px;border-radius:6px}
.explain{padding:120px 24px;text-align:center;max-width:680px;margin:0 auto;border-top:1px solid #1a1a1d}
.explain .tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(200,169,126,.2);padding:4px 12px;border-radius:100px;margin-bottom:20px}
.explain h2{font-size:clamp(24px,4vw,40px);font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.explain p{font-size:17px;color:var(--muted);line-height:1.6}
footer{border-top:1px solid #1a1a1d;padding:24px;text-align:center;font-size:12px;color:var(--muted)}
@media(max-width:768px){.variants{grid-template-columns:1fr}}
</style>
</head>
<body>
<section class="hero">
<div class="hero-label">Module 26 — Mesh Gradient Background</div>
<h1>Organic <span>lava lamp</span> colour blobs</h1>
<p>Animated mesh gradients that shift and morph continuously. Living backgrounds that make any section feel premium and dynamic.</p>
</section>
<section class="mesh-section">
<canvas class="mesh-canvas" id="meshMain"></canvas>
<div class="mesh-content">
<h2>Content sits on top</h2>
<p>The mesh gradient is a canvas animation behind your content. Fully GPU-accelerated, runs at 60fps, and adapts to any colour palette.</p>
<a href="#">Get started</a>
</div>
</section>
<section class="explain">
<div class="tag">Why it works</div>
<h2>Ambient life</h2>
<p>Static gradients are dead. Mesh gradients that shift and morph signal a living product. SaaS hero sections, pricing pages, and brand sites use them to create depth without images. The motion is slow enough to not distract but fast enough to feel dynamic.</p>
</section>
<footer>Cinematic Module — Mesh Gradient Background</footer>
<script>
(function(){
function initMesh(canvas,colors,speed){
var ctx=canvas.getContext('2d');
var blobs=colors.map(function(c,i){
return{x:Math.random(),y:Math.random(),vx:(Math.random()-.5)*speed,vy:(Math.random()-.5)*speed,r:.3+Math.random()*.2,color:c};
});
function resize(){canvas.width=canvas.offsetWidth*2;canvas.height=canvas.offsetHeight*2}
resize();window.addEventListener('resize',resize);
function draw(){
var w=canvas.width,h=canvas.height;
ctx.fillStyle='#0a0a0b';ctx.fillRect(0,0,w,h);
blobs.forEach(function(b){
b.x+=b.vx/w;b.y+=b.vy/h;
if(b.x<-.2||b.x>1.2)b.vx*=-1;
if(b.y<-.2||b.y>1.2)b.vy*=-1;
var grd=ctx.createRadialGradient(b.x*w,b.y*h,0,b.x*w,b.y*h,b.r*Math.max(w,h));
grd.addColorStop(0,b.color);grd.addColorStop(1,'transparent');
ctx.globalCompositeOperation='lighter';
ctx.fillStyle=grd;ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation='source-over';
});
requestAnimationFrame(draw);
}
draw();
}
initMesh(document.getElementById('meshMain'),['rgba(200,169,126,.25)','rgba(94,173,181,.2)','rgba(168,116,142,.2)','rgba(100,140,200,.15)'],.4);
})();
</script>
<div style="position:fixed;bottom:0;left:0;right:0;padding:8px 16px;font-size:11px;color:#5a5a5e;text-align:center;z-index:99;background:rgba(9,9,11,.85);backdrop-filter:blur(8px);border-top:1px solid #1e1e22;font-family:Outfit,sans-serif">&copy; Created by Jay from <a href="https://robonuggets.com" style="color:#e8793a;text-decoration:none">RoboLabs</a>. Learn more at <a href="https://robonuggets.com" style="color:#e8793a;text-decoration:none">RoboNuggets</a></div>
</body>
</html>