Window
A train window onto the countryside, set into a normal page.
<piix-scene>WebGLSlow rail
Six hours, no signal.
The long way through the hills, for people who need it.
<section class="lay-split">
<div class="lay-copy">
<p class="lay-kicker">Slow rail</p>
<h2>Six hours, no signal.</h2>
<p>The long way through the hills, for people who need it.</p>
<piix-button tone="sky">Book a seat</piix-button>
</div>
<piix-scene kind="train" sky="none" height="340px"></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-split{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding:48px 40px;background:#f6f2ea;color:#17121f}
@media (max-width:760px){.lay-split{grid-template-columns:1fr}}
</style>
The train window with its wall cut out becomes a window you can drop next to your copy. The rest of the page stays ordinary, so the window is the one thing that moves.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just window (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-split">
<div className="lay-copy">
<p className="lay-kicker">Slow rail</p>
<h2>Six hours, no signal.</h2>
<p>The long way through the hills, for people who need it.</p>
<piix-button tone="sky">Book a seat</piix-button>
</div>
<piix-scene kind="train" sky="none" height="340px"></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-split{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding:48px 40px;background:#f6f2ea;color:#17121f}
@media (max-width:760px){.lay-split{grid-template-columns:1fr}}
</style>
);
}
Usage
<section class="lay-split">
<div class="lay-copy">
<p class="lay-kicker">Slow rail</p>
<h2>Six hours, no signal.</h2>
<p>The long way through the hills, for people who need it.</p>
<piix-button tone="sky">Book a seat</piix-button>
</div>
<piix-scene kind="train" sky="none" height="340px"></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-split{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding:48px 40px;background:#f6f2ea;color:#17121f}
@media (max-width:760px){.lay-split{grid-template-columns:1fr}}
</style>
Accessibility
- Your copy is ordinary HTML: headings, paragraphs, real buttons.
- The scenes are described for screen readers, or hidden when they are decoration.