Six-layer parallax sunset with film-LUT color grade.
<!doctype html>
<!-- Example: sunset-cinematic — 6-layer parallax · film LUT · title rise -->
<html data-duration="10" data-aspect="16:9"><head><style>
:root {
--cream:#f6f5f1; --cream-2:#efece4; --ink:#0a0a0a; --mute:#6b6862;
--line:#e3dfd3; --signal:#ff3b1f; --signal-2:#ff6a4a; --frame:#ffb800;
--green:#1f8a5b; --blue:#2b66ff;
}
* { box-sizing: border-box; }
body { margin:0; }
body { background: #0a0a14; height: 100vh; overflow: hidden;
font-family: ui-serif, Georgia, serif; color: white; position: relative; }
.l { position: absolute; inset: 0; will-change: transform; }
.sky { background: linear-gradient(180deg, #240a40 0%, #6a1e54 30%, #c34a3e 55%, #ff6a4a 75%, #ffb800 95%, #ffd76a 100%); }
.haze { background: linear-gradient(180deg, transparent 50%, rgba(255,184,0,.18) 70%, rgba(255,59,31,.25) 90%);
mix-blend-mode: screen; }
.sun { display: grid; place-items: center; }
.sun i { display: block; width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #ffd76a 28%, #ff6a4a 60%, transparent 75%);
filter: blur(0.5px); transform: translateY(220px); }
.mtn { background: var(--ink); clip-path: polygon(0 78%, 16% 64%, 32% 76%, 48% 56%, 64% 72%, 78% 62%, 100% 76%, 100% 100%, 0 100%); opacity: .85; }
.mtn2 { background: #1c0a26; clip-path: polygon(0 86%, 22% 72%, 40% 84%, 60% 70%, 80% 82%, 100% 74%, 100% 100%, 0 100%); }
.fg { background: linear-gradient(180deg, transparent 70%, #0a0a14 100%);
pointer-events: none; }
.vig { background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.6) 100%); pointer-events: none; }
.lut { background: linear-gradient(135deg, rgba(255,140,40,.18), rgba(80,20,120,.12));
mix-blend-mode: overlay; pointer-events: none; }
.bars { position: absolute; left: 0; right: 0; background: black; height: 110px; z-index: 5; }
.bt { top: 0; } .bb { bottom: 0; }
.title { position: absolute; left: 0; right: 0; bottom: 150px; text-align: center;
font-size: 92px; font-weight: 500; letter-spacing: -0.02em;
opacity: 0; z-index: 6; will-change: transform, opacity; }
.title em { color: var(--frame); font-style: italic; }
.sub { font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .35em;
text-transform: uppercase; opacity: .85; margin-top: 12px; }
</style></head><body>
<div class="l sky"></div>
<div class="l haze" id="hz"></div>
<div class="l sun"><i id="sun"></i></div>
<div class="l mtn2" id="m2"></div>
<div class="l mtn" id="m1"></div>
<div class="l fg"></div>
<div class="l vig"></div>
<div class="l lut"></div>
<div class="bars bt"></div><div class="bars bb"></div>
<div class="title" id="t">
A <em>quieter</em> kind of summer.
<div class="sub">— in theatres 2026 —</div>
</div>
<script>
var sun = document.getElementById('sun');
var m1 = document.getElementById('m1');
var m2 = document.getElementById('m2');
var hz = document.getElementById('hz');
var t = document.getElementById('t');
var tt_ = 0;
var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
function ease(x){ return 1 - Math.pow(1 - x, 3); }
function render() {
var time = reduced ? 4 : tt_;
var u = ease(Math.min(1, time / 6.5));
// Sun rises.
sun.style.transform = 'translateY(' + (220 - u * 360).toFixed(1) + 'px)';
// Mountain layers drift opposite directions at very different speeds.
m1.style.transform = 'translateX(' + (Math.sin(time * 0.2) * 16).toFixed(1) + 'px)';
m2.style.transform = 'translateX(' + (Math.cos(time * 0.18) * 8).toFixed(1) + 'px)';
// Haze breathes.
hz.style.opacity = String(0.7 + 0.3 * Math.sin(time * 0.5));
var u2 = ease(Math.max(0, Math.min(1, (time - 1.6) / 2.2)));
t.style.opacity = u2;
t.style.transform = 'translateY(' + ((1 - u2) * 28).toFixed(1) + 'px)';
}
addEventListener('hf-seek', function(e) { tt_ = e.detail.time; render(); });
render();
</script>
</body></html>