Sierra Nevada
Picos de más de 3.000 metros a una hora del mar. Nieve en invierno, rutas de altura en verano y pueblos blancos en sus faldas.
Sube al Veleta al amanecer o recorre los barrancos de la Alpujarra con calma.
Parallax landscape header
Mountains, sun and title move at different speeds as you scroll, giving the header a sense of depth.
Settings
Code
<div class="uv-tpl"><div class="sc" tabindex="0" aria-label="Sierra Nevada"><header class="hr"><i class="sky"></i><i class="sun"></i><h3>Sierra Nevada</h3><svg class="l1" viewBox="0 0 400 120" preserveAspectRatio="none" aria-hidden="true"><path d="M0 120V70l60-40 50 30 70-55 60 45 40-20 70 50 50-25v95z"/></svg><svg class="l2" viewBox="0 0 400 120" preserveAspectRatio="none" aria-hidden="true"><path d="M0 120V85l50-25 60 30 50-35 80 40 60-25 50 20 50-10v60z"/></svg><svg class="l3" viewBox="0 0 400 120" preserveAspectRatio="none" aria-hidden="true"><path d="M0 120V100c40-10 80-20 130-8s90 8 140-4 90 6 130 2v30z"/></svg></header><div class="tx"><p>Peaks over 3,000 metres an hour from the sea. Snow in winter, high trails in summer and white villages on the slopes.</p><p>Climb the Veleta at sunrise or wander the Alpujarra gorges at your own pace.</p></div></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Scroll</span></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Text & scroll
See all Text & scrollWhere to use it
A travel style header built from layered SVG mountain ridges, a glowing sun and a big title. As the content scrolls, each layer moves at its own speed: the title sinks fastest and fades behind the peaks, the far ridge follows, and the nearest one barely moves, which creates a convincing feeling of depth.
Everything is drawn with CSS gradients and inline SVG, so there are no images to load. The script turns scroll position into a single variable, and reduced motion keeps the layers still. Two colors define the sky and the mountains.