Split hero

Copy<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

Copy<!-- just split hero (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/scene.min.js"></script>

Copynpm install piixpal

// once, in your entry file
import "piixpal";

Copy// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <section className="lay-split dark">
      <div className="lay-copy">
        <p className="lay-kicker">Out now on every platform</p>
        <h2>Keep the castle lit.</h2>
        <p>A cosy night-watch game about lanterns, ghosts and good neighbours.</p>
        <piix-glow-button palette="sunset">Play free</piix-glow-button>
      </div>
      <div className="lay-frame"><piix-scene kind="castle" height="340px"></piix-scene></div>
    </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}
    .lay-split.dark{background:#0d0c18;color:#f2eef8}
    @media (max-width:760px){.lay-split{grid-template-columns:1fr}}
    .lay-frame{padding:8px;background:#17121f;box-shadow:0 0 0 4px #f2eef8,8px 8px 0 4px #ff6b4a;clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
    </style>
  );
}