Horizon band
A clean page with a landscape rising along the bottom of the hero.
<piix-scene>WebGLSummit · Trail planner
Plan the climb. Enjoy the view.
Routes, weather and elevation in one calm place.
<section class="lay-band">
<div class="lay-copy">
<p class="lay-kicker">Summit · Trail planner</p>
<h2>Plan the climb. Enjoy the view.</h2>
<p>Routes, weather and elevation in one calm place.</p>
<piix-button tone="ink">Start planning</piix-button>
</div>
<piix-scene kind="alps" sky="none" height="260px"></piix-scene>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-kicker{font:400 12px/1 "Silkscreen",monospace!important;text-transform:uppercase;letter-spacing:.06em;opacity:.6!important}
.lay-band{position:relative;display:grid;background:#f6f2ea;color:#17121f;overflow:hidden}
.lay-band .lay-copy{padding:56px 40px 0;justify-items:center;text-align:center}
.lay-band piix-scene{margin-top:-40px}
</style>
The hero is your normal page: plain background, your type, your buttons. Only the bottom third is pixel art, and because the sky is cut out, the mountains rise straight out of your own background colour.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just horizon band (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/scene.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<section className="lay-band">
<div className="lay-copy">
<p className="lay-kicker">Summit · Trail planner</p>
<h2>Plan the climb. Enjoy the view.</h2>
<p>Routes, weather and elevation in one calm place.</p>
<piix-button tone="ink">Start planning</piix-button>
</div>
<piix-scene kind="alps" sky="none" height="260px"></piix-scene>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-kicker{font:400 12px/1 "Silkscreen",monospace!important;text-transform:uppercase;letter-spacing:.06em;opacity:.6!important}
.lay-band{position:relative;display:grid;background:#f6f2ea;color:#17121f;overflow:hidden}
.lay-band .lay-copy{padding:56px 40px 0;justify-items:center;text-align:center}
.lay-band piix-scene{margin-top:-40px}
</style>
);
}
Usage
<section class="lay-band">
<div class="lay-copy">
<p class="lay-kicker">Summit · Trail planner</p>
<h2>Plan the climb. Enjoy the view.</h2>
<p>Routes, weather and elevation in one calm place.</p>
<piix-button tone="ink">Start planning</piix-button>
</div>
<piix-scene kind="alps" sky="none" height="260px"></piix-scene>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-kicker{font:400 12px/1 "Silkscreen",monospace!important;text-transform:uppercase;letter-spacing:.06em;opacity:.6!important}
.lay-band{position:relative;display:grid;background:#f6f2ea;color:#17121f;overflow:hidden}
.lay-band .lay-copy{padding:56px 40px 0;justify-items:center;text-align:center}
.lay-band piix-scene{margin-top:-40px}
</style>
Accessibility
- Your copy is ordinary HTML: headings, paragraphs, real buttons.
- The scenes are described for screen readers, or hidden when they are decoration.