11 CSS Page Transitions08 / 11

CSS + JSMIT licensed

Triangle Shatter

Delaunay-like triangular fragments fill the viewport then explode outward with random velocities and rotations, revealing the next page. Applied to an aerospace deep-tech site.

Published

Live Demo
Try it

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

The code

<div id="shatterLayer"></div>

<div class="pages">

  <div class="page active" id="p0">
    <canvas id="starCanvas" class="stars"></canvas>
    <div class="orbit-graphic">
      <div class="orbit-ring or-1"></div>
      <div class="orbit-ring or-2"></div>
      <div class="orbit-ring or-3"></div>
      <div class="orbit-ring or-4"></div>
      <div class="orbit-dot od-1"></div>
      <div class="orbit-dot od-2"></div>
      <div class="orbit-dot od-3"></div>
      <div class="planet"></div>
    </div>
    <div class="p0-content">
      <div class="p0-top">
        <div class="logo">APEX<span>.</span>SYS</div>
        <div class="mission-count">MISSION 047 · ACTIVE</div>
      </div>
      <div class="p0-hero">
        <div class="mission-badge">
          <div class="mission-dot"></div>
          <div class="mission-text">Launch window open · T-minus 48:00:00</div>
        </div>
        <h1 class="p0-title">We build<br>for the <span class="blue">void</span></h1>
        <p class="p0-sub">Autonomous systems for environments that humans cannot reach — built to fail safely, adapt quietly, and outlast everything else we send up there.</p>
        <div class="btn-row">
          <button class="btn-primary" data-next="1">Mission Overview</button>
          <button class="btn-ghost" data-next="3">Join the crew</button>
        </div>
      </div>
      <div class="p0-bottom">
        <div class="p0-stats">
          <div class="stat-item"><div class="stat-num">47</div><div class="stat-lbl">Missions</div></div>
          <div class="stat-item"><div class="stat-num">99.1<span style="font-size:14px">%</span></div><div class="stat-lbl">Success rate</div></div>
          <div class="stat-item"><div class="stat-num">4</div><div class="stat-lbl">Orbiting now</div></div>
        </div>
      </div>
    </div>
  </div>

  <div class="page" id="p1">
    <div class="p1-header">
      <h2 class="p1-title">Core<br><span>Systems</span></h2>
      <div class="p1-index">SYS.001 — SYS.006</div>
    </div>
    <div class="tech-grid">
      <div class="tech-card"><div class="tc-icon">⬡</div><div class="tc-label">SYS.001</div><div class="tc-title">Adaptive GNC</div><div class="tc-body">Guidance, navigation & control that rewrites its own mission parameters in-flight based on sensor confidence intervals.</div></div>
      <div class="tech-card"><div class="tc-icon">◈</div><div class="tc-label">SYS.002</div><div class="tc-title">Fault Mesh</div><div class="tc-body">Distributed fault tolerance across 2,048 redundant compute nodes. No single point of failure. Period.</div></div>
      <div class="tech-card"><div class="tc-icon">▲</div><div class="tc-label">SYS.003</div><div class="tc-title">Thermal Skin</div><div class="tc-body">Ceramic-composite outer layers with embedded heat-pipe lattice rated to 1,650°C continuous exposure.</div></div>
      <div class="tech-card"><div class="tc-icon">◇</div><div class="tc-label">SYS.004</div><div class="tc-title">Deep RF</div><div class="tc-body">X-band + Ka-band comms array with 3.2 Gbit/s downlink. Operates from lunar distance without relay.</div></div>
      <div class="tech-card"><div class="tc-icon">⬟</div><div class="tc-label">SYS.005</div><div class="tc-title">Propulsion AI</div><div class="tc-body">Neural burn optimizer trained on 3M simulated flight paths. Reduces delta-v budget by 18% on average.</div></div>
      <div class="tech-card"><div class="tc-icon">⬢</div><div class="tc-label">SYS.006</div><div class="tc-title">Surface Intel</div><div class="tc-body">Multispectral imaging + LIDAR fusion producing real-time 3D terrain maps at 4mm/pixel resolution.</div></div>
    </div>
  </div>

  <div class="page" id="p2">
    <div class="p2-left">
      <div class="p2-eyebrow">// Mission Architecture</div>
      <h2 class="p2-title">Built to<br>outlast<br>certainty</h2>
      <p class="p2-body">Every system assumes its own failure. Every component assumes its redundant twin will fail first. This is how you build hardware for places no one can go to fix it.</p>
      <div class="timeline">
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">First autonomous landing: Mare Tranquillitatis basin</div><div class="tl-year">2021</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">48-hour continuous ops record — no human input</div><div class="tl-year">2022</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">Mission 040: first in-situ resource utilisation test</div><div class="tl-year">2024</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">Mission 047: deep polar orbit insertion, active now</div><div class="tl-year">2025</div></div></div>
      </div>
    </div>
    <div class="p2-right">
      <div class="p2-glow"></div>
      <div class="data-readout">
        <div style="font-size:8px;letter-spacing:0.25em;text-transform:uppercase;color:var(--electric);margin-bottom:20px;font-family:'Space Mono',monospace">// LIVE · Mission 047</div>
        <div class="dr-row"><span class="dr-key">ALTITUDE</span><span class="dr-val">847.3 km</span></div>
        <div class="dr-row"><span class="dr-key">INCLINATION</span><span class="dr-val">89.7°</span></div>
        <div class="dr-row"><span class="dr-key">VELOCITY</span><span class="dr-val">7.62 km/s</span></div>
        <div class="dr-row"><span class="dr-key">BATTERY</span><span class="dr-val">98.2%</span></div>
        <div class="dr-row"><span class="dr-key">TEMPERATURE</span><span class="dr-val">-112°C</span></div>
        <div class="dr-row"><span class="dr-key">SIGNAL DELAY</span><span class="dr-val">1.28s</span></div>
        <div class="dr-row"><span class="dr-key">FAULT COUNT</span><span class="dr-val" style="color:#40ff80">0</span></div>
        <div class="dr-row"><span class="dr-key">UPTIME</span><span class="dr-val">14d 08h 33m</span></div>
      </div>
    </div>
  </div>

  <div class="page" id="p3">
    <div class="p3-top">
      <h2 class="p3-title">Join the<br>mission</h2>
      <div class="p3-open">8 open roles · Remote + Berlin</div>
    </div>
    <div class="job-list">
      <div class="job-row"><div class="job-cell"><div class="job-title">Principal GNC Engineer</div><div class="job-sub">Guidance & Navigation · Orbital</div></div><div class="job-cell"><div class="job-dept">Engineering</div></div><div class="job-cell"><div class="job-loc">Berlin / Remote</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">ML Engineer — Flight Systems</div><div class="job-sub">Neural burn optimization</div></div><div class="job-cell"><div class="job-dept">AI / ML</div></div><div class="job-cell"><div class="job-loc">Remote</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Thermal Systems Lead</div><div class="job-sub">Materials & thermal design</div></div><div class="job-cell"><div class="job-dept">Hardware</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Systems Integration Engineer</div><div class="job-sub">Avionics & software</div></div><div class="job-cell"><div class="job-dept">Systems</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Mission Control Operator</div><div class="job-sub">24/7 ops rotation</div></div><div class="job-cell"><div class="job-dept">Operations</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
    </div>
  </div>

</div>

<div class="sys-nav">
  <button class="sys-btn active" data-i="0">Launch</button>
  <button class="sys-btn" data-i="1">Systems</button>
  <button class="sys-btn" data-i="2">Mission</button>
  <button class="sys-btn" data-i="3">Careers</button>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --space: #03040a;
  --deep: #070b18;
  --steel: #8090a8;
  --electric: #2060ff;
  --glow: #4080ff;
  --white: #e8eef8;
  --dim: rgba(232,238,248,0.4);
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--space);
  font-family: 'Space Grotesk',sans-serif;
  color: var(--white);
}
/* Pages */

.pages {
  position: fixed;
  inset: 0;
}

.page {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}

.page.active {
  pointer-events: auto;
  visibility: visible;
}
/* Shatter layer */

#shatterLayer {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  overflow: hidden;
}
/* PAGE 0 — LAUNCH */

#p0 {
  background: var(--space);
  position: relative;
  overflow: hidden;
}

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p0-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 80px;
}

.p0-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: 'Space Mono',monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--white);
  font-weight: 700;
}

.logo span {
  color: var(--electric);
}

.mission-count {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.p0-hero {
  display: flex;
  flex-direction: column;
  max-width: 820px;
}

.mission-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(32,96,255,0.3);
  padding: 6px 16px;
  margin-bottom: 32px;
  width: fit-content;
}

.mission-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 8px var(--electric);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
    100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.mission-text {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.25em;
  color: rgba(32,96,255,0.8);
}

.p0-title {
  font-size: clamp(52px,8.5vw,120px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 32px;
}

.p0-title .blue {
  color: var(--electric);
}

.p0-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--dim);
  font-weight: 300;
  max-width: 540px;
  margin-bottom: 48px;
  font-family: 'Space Mono',monospace;
  letter-spacing: -0.01em;
}

.btn-row {
  display: flex;
  gap: 16px;
}

.btn-primary {
  padding: 16px 40px;
  background: var(--electric);
  color: var(--white);
  border: none;
  font-family: 'Space Grotesk',sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .2s,transform .15s;
  box-shadow: 0 0 20px rgba(32,96,255,0.3);
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(32,96,255,0.6);
  transform: translateY(-2px);
}

.btn-ghost {
  padding: 16px 32px;
  background: transparent;
  color: var(--steel);
  border: 1px solid rgba(128,144,168,0.25);
  font-family: 'Space Grotesk',sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s,color .2s;
}

.btn-ghost:hover {
  border-color: var(--steel);
  color: var(--white);
}

.p0-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.p0-stats {
  display: flex;
  gap: 48px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-num {
  font-family: 'Space Mono',monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 0 20px rgba(32,96,255,0.3);
}

.stat-lbl {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}
/* Orbit graphic */

.orbit-graphic {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(32,96,255,0.12);
}

.or-1 {
  inset: 0;
}

.or-2 {
  inset: 40px;
  border-color: rgba(32,96,255,0.08);
}

.or-3 {
  inset: 80px;
  border-color: rgba(32,96,255,0.06);
}

.or-4 {
  inset: 120px;
  border-color: rgba(32,96,255,0.08);
}

.orbit-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 12px var(--glow);
}

.od-1 {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.od-2 {
  bottom: 60px;
  right: 40px;
}

.od-3 {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.planet {
  position: absolute;
  inset: 130px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%,rgba(32,96,255,0.3),rgba(3,4,10,0.8));
  border: 1px solid rgba(32,96,255,0.2);
  box-shadow: 0 0 40px rgba(32,96,255,0.1),inset 0 0 40px rgba(32,96,255,0.05);
}
/* PAGE 1 — TECHNOLOGY */

#p1 {
  background: var(--deep);
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.p1-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 52px;
}

.p1-title {
  font-size: clamp(36px,5.5vw,72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.p1-title span {
  color: var(--electric);
}

.p1-index {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel);
  padding-top: 8px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
  flex: 1;
}

.tech-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(128,144,168,0.08);
  padding: 32px;
  transition: background .25s,border-color .25s;
  cursor: pointer;
}

.tech-card:hover {
  background: rgba(32,96,255,0.04);
  border-color: rgba(32,96,255,0.2);
}

.tc-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(32,96,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--electric);
  font-size: 18px;
  position: relative;
}

.tc-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(32,96,255,0.1),transparent);
}

.tc-label {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 12px;
}

.tc-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.tc-body {
  font-size: 12px;
  line-height: 1.7;
  color: var(--dim);
  font-family: 'Space Mono',monospace;
  letter-spacing: -0.01em;
}
/* PAGE 2 — MISSION */

#p2 {
  background: var(--space);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.p2-left {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(128,144,168,0.06);
}

.p2-eyebrow {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 28px;
}

.p2-title {
  font-size: clamp(40px,6vw,80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 32px;
}

.p2-body {
  font-family: 'Space Mono',monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--dim);
  margin-bottom: 40px;
  max-width: 440px;
  letter-spacing: -0.01em;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(128,144,168,0.06);
  position: relative;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: -1px;
  width: 1px;
  background: linear-gradient(180deg,var(--electric),rgba(32,96,255,0));
}

.tl-dot {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: 1px solid var(--electric);
  border-radius: 50%;
  background: var(--space);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}

.tl-dot::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 6px var(--electric);
}

.tl-text {
  font-size: 12px;
  color: var(--dim);
  font-family: 'Space Mono',monospace;
  line-height: 1.6;
}

.tl-year {
  font-size: 9px;
  color: var(--electric);
  letter-spacing: 0.1em;
  margin-top: 4px;
  font-weight: 700;
}

.p2-right {
  background: var(--deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px;
  position: relative;
}

.data-readout {
  font-family: 'Space Mono',monospace;
  width: 100%;
  max-width: 340px;
}

.dr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(128,144,168,0.08);
  font-size: 11px;
}

.dr-key {
  color: var(--steel);
  letter-spacing: 0.06em;
}

.dr-val {
  color: var(--electric);
  font-weight: 700;
}

.p2-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 40% at 50% 50%,rgba(32,96,255,0.04),transparent);
  pointer-events: none;
}
/* PAGE 3 — CAREERS */

#p3 {
  background: var(--deep);
  padding: 80px;
  overflow-y: auto;
}

.p3-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

.p3-title {
  font-size: clamp(40px,6vw,80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.p3-open {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-row {
  display: grid;
  grid-template-columns: 1fr 160px 120px 80px;
  border: 1px solid rgba(128,144,168,0.08);
  align-items: center;
  transition: background .2s,border-color .2s;
  cursor: pointer;
}

.job-row:hover {
  background: rgba(32,96,255,0.04);
  border-color: rgba(32,96,255,0.2);
}

.job-cell {
  padding: 24px;
  border-right: 1px solid rgba(128,144,168,0.06);
}

.job-cell:last-child {
  border-right: none;
}

.job-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.job-sub {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  color: var(--steel);
  letter-spacing: 0.08em;
}

.job-dept {
  font-family: 'Space Mono',monospace;
  font-size: 10px;
  color: var(--electric);
  letter-spacing: 0.1em;
}

.job-loc {
  font-family: 'Space Mono',monospace;
  font-size: 10px;
  color: var(--steel);
  letter-spacing: 0.06em;
}

.apply-btn {
  padding: 8px 20px;
  background: var(--electric);
  color: var(--white);
  border: none;
  font-family: 'Space Grotesk',sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s;
}

.apply-btn:hover {
  opacity: 0.8;
}
/* Nav */

.sys-nav {
  position: fixed;
  top: 40px;
  right: 60px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.sys-btn {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(128,144,168,0.4);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
  padding: 4px 0;
}

.sys-btn::after {
  content: '';
  width: 16px;
  height: 1px;
  background: rgba(128,144,168,0.3);
  transition: width .3s,background .2s;
}

.sys-btn:hover {
  color: var(--white);
}

.sys-btn:hover::after {
  width: 32px;
  background: var(--white);
}

.sys-btn.active {
  color: var(--electric);
}

.sys-btn.active::after {
  width: 32px;
  background: var(--electric);
}

@media (max-width: 768px) {
  #p0 .orbit-graphic {
    display: none;
  }

  #p2 {
    grid-template-columns: 1fr;
  }

  .p2-right {
    display: none;
  }

  #p0 .p0-content,
    #p1,
    #p2 .p2-left,
    #p3 {
    padding: 40px 24px;
  }

  .tech-grid {
    grid-template-columns: 1fr;
  }

  .job-row {
    grid-template-columns: 1fr 100px;
  }

  .job-dept,
    .job-loc {
    display: none;
  }

  .sys-nav {
    top: auto;
    right: 20px;
    bottom: 20px;
  }

  .p0-stats {
    gap: 24px;
  }
}
// Starfield
const sc=document.getElementById('starCanvas');
sc.width=window.innerWidth;sc.height=window.innerHeight;
const sx=sc.getContext('2d');
for(let i=0;i<200;i++){
  sx.beginPath();
  sx.arc(Math.random()*sc.width,Math.random()*sc.height,Math.random()*1.2,0,Math.PI*2);
  sx.fillStyle=`rgba(232,238,248,${Math.random()*0.5+0.1})`;
  sx.fill();
}

// Shatter transition
const shatterLayer=document.getElementById('shatterLayer');
const pages=document.querySelectorAll('.page');
const navBtns=document.querySelectorAll('.sys-btn');
let cur=0,busy=false;

function genTriangles(W,H,N){
  const pts=[];
  const cols=Math.ceil(Math.sqrt(N*W/H));
  const rows=Math.ceil(N/cols);
  for(let r=0;r<=rows;r++)
    for(let c=0;c<=cols;c++){
      const x=(c/cols)*W+(Math.random()-0.5)*W/cols*0.8;
      const y=(r/rows)*H+(Math.random()-0.5)*H/rows*0.8;
      pts.push([Math.max(0,Math.min(W,x)),Math.max(0,Math.min(H,y))]);
    }
  const tris=[];
  const cx=cols+1;
  for(let r=0;r<rows;r++)
    for(let c=0;c<cols;c++){
      const a=r*cx+c,b=a+1,d=a+cx,e=d+1;
      if(pts[a]&&pts[b]&&pts[d])tris.push([pts[a],pts[b],pts[d]]);
      if(pts[b]&&pts[e]&&pts[d])tris.push([pts[b],pts[e],pts[d]]);
    }
  return tris;
}

function goTo(n){
  if(busy||n===cur)return;
  busy=true;
  const prev=cur;cur=n;
  navBtns.forEach((b,i)=>b.classList.toggle('active',i===cur));

  const W=window.innerWidth,H=window.innerHeight;
  const tris=genTriangles(W,H,60);
  shatterLayer.innerHTML='';

  tris.forEach(tri=>{
    const pts=tri.map(([x,y])=>`${x}px ${y}px`).join(',');
    const frag=document.createElement('div');
    frag.style.cssText=`
      position:absolute;inset:0;
      clip-path:polygon(${pts});
      background:var(--space);
      opacity:0;
      transition:none;
    `;
    shatterLayer.appendChild(frag);
  });

  const allFrags=Array.from(shatterLayer.children);
  const sorted=allFrags.sort(()=>Math.random()-0.5);

  let covered=false;
  sorted.forEach((frag,i)=>{
    setTimeout(()=>{
      frag.style.transition='opacity 80ms';
      frag.style.opacity='1';
      if(i===Math.floor(sorted.length*0.5)&&!covered){
        covered=true;
        pages[prev].classList.remove('active');
        pages[cur].classList.add('active');
        sorted.forEach((f2,j)=>{
          const angle=Math.random()*Math.PI*2;
          const dist=Math.random()*300+100;
          setTimeout(()=>{
            f2.style.transition=`transform 500ms cubic-bezier(0.4,0,1,0.8),opacity 400ms 100ms`;
            f2.style.transform=`translate(${Math.cos(angle)*dist}px,${Math.sin(angle)*dist}px) rotate(${(Math.random()-0.5)*40}deg)`;
            f2.style.opacity='0';
          },j*8);
        });
      }
    },i*12);
  });

  setTimeout(()=>{
    shatterLayer.innerHTML='';
    busy=false;
  },sorted.length*12+650);
}

navBtns.forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.i)));
document.querySelectorAll('[data-next]').forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.next)));

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1200)return;wt=now;
  goTo(Math.max(0,Math.min(3,cur+(e.deltaY>0?1:-1))));
},{passive:true});
document.addEventListener('keydown',e=>{
  if(e.key==='ArrowRight')goTo(Math.min(3,cur+1));
  if(e.key==='ArrowLeft')goTo(Math.max(0,cur-1));
});
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Page Transition from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Triangle Shatter
Source: https://codefronts.com/motion/css-page-transitions/triangle-shatter/

Delaunay-like triangular fragments fill the viewport then explode outward with random velocities and rotations, revealing the next page. Applied to an aerospace deep-tech site.
## HTML
```html
<div id="shatterLayer"></div>

<div class="pages">

  <div class="page active" id="p0">
    <canvas id="starCanvas" class="stars"></canvas>
    <div class="orbit-graphic">
      <div class="orbit-ring or-1"></div>
      <div class="orbit-ring or-2"></div>
      <div class="orbit-ring or-3"></div>
      <div class="orbit-ring or-4"></div>
      <div class="orbit-dot od-1"></div>
      <div class="orbit-dot od-2"></div>
      <div class="orbit-dot od-3"></div>
      <div class="planet"></div>
    </div>
    <div class="p0-content">
      <div class="p0-top">
        <div class="logo">APEX<span>.</span>SYS</div>
        <div class="mission-count">MISSION 047 · ACTIVE</div>
      </div>
      <div class="p0-hero">
        <div class="mission-badge">
          <div class="mission-dot"></div>
          <div class="mission-text">Launch window open · T-minus 48:00:00</div>
        </div>
        <h1 class="p0-title">We build<br>for the <span class="blue">void</span></h1>
        <p class="p0-sub">Autonomous systems for environments that humans cannot reach — built to fail safely, adapt quietly, and outlast everything else we send up there.</p>
        <div class="btn-row">
          <button class="btn-primary" data-next="1">Mission Overview</button>
          <button class="btn-ghost" data-next="3">Join the crew</button>
        </div>
      </div>
      <div class="p0-bottom">
        <div class="p0-stats">
          <div class="stat-item"><div class="stat-num">47</div><div class="stat-lbl">Missions</div></div>
          <div class="stat-item"><div class="stat-num">99.1<span style="font-size:14px">%</span></div><div class="stat-lbl">Success rate</div></div>
          <div class="stat-item"><div class="stat-num">4</div><div class="stat-lbl">Orbiting now</div></div>
        </div>
      </div>
    </div>
  </div>

  <div class="page" id="p1">
    <div class="p1-header">
      <h2 class="p1-title">Core<br><span>Systems</span></h2>
      <div class="p1-index">SYS.001 — SYS.006</div>
    </div>
    <div class="tech-grid">
      <div class="tech-card"><div class="tc-icon">⬡</div><div class="tc-label">SYS.001</div><div class="tc-title">Adaptive GNC</div><div class="tc-body">Guidance, navigation & control that rewrites its own mission parameters in-flight based on sensor confidence intervals.</div></div>
      <div class="tech-card"><div class="tc-icon">◈</div><div class="tc-label">SYS.002</div><div class="tc-title">Fault Mesh</div><div class="tc-body">Distributed fault tolerance across 2,048 redundant compute nodes. No single point of failure. Period.</div></div>
      <div class="tech-card"><div class="tc-icon">▲</div><div class="tc-label">SYS.003</div><div class="tc-title">Thermal Skin</div><div class="tc-body">Ceramic-composite outer layers with embedded heat-pipe lattice rated to 1,650°C continuous exposure.</div></div>
      <div class="tech-card"><div class="tc-icon">◇</div><div class="tc-label">SYS.004</div><div class="tc-title">Deep RF</div><div class="tc-body">X-band + Ka-band comms array with 3.2 Gbit/s downlink. Operates from lunar distance without relay.</div></div>
      <div class="tech-card"><div class="tc-icon">⬟</div><div class="tc-label">SYS.005</div><div class="tc-title">Propulsion AI</div><div class="tc-body">Neural burn optimizer trained on 3M simulated flight paths. Reduces delta-v budget by 18% on average.</div></div>
      <div class="tech-card"><div class="tc-icon">⬢</div><div class="tc-label">SYS.006</div><div class="tc-title">Surface Intel</div><div class="tc-body">Multispectral imaging + LIDAR fusion producing real-time 3D terrain maps at 4mm/pixel resolution.</div></div>
    </div>
  </div>

  <div class="page" id="p2">
    <div class="p2-left">
      <div class="p2-eyebrow">// Mission Architecture</div>
      <h2 class="p2-title">Built to<br>outlast<br>certainty</h2>
      <p class="p2-body">Every system assumes its own failure. Every component assumes its redundant twin will fail first. This is how you build hardware for places no one can go to fix it.</p>
      <div class="timeline">
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">First autonomous landing: Mare Tranquillitatis basin</div><div class="tl-year">2021</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">48-hour continuous ops record — no human input</div><div class="tl-year">2022</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">Mission 040: first in-situ resource utilisation test</div><div class="tl-year">2024</div></div></div>
        <div class="tl-item"><div class="tl-dot"></div><div><div class="tl-text">Mission 047: deep polar orbit insertion, active now</div><div class="tl-year">2025</div></div></div>
      </div>
    </div>
    <div class="p2-right">
      <div class="p2-glow"></div>
      <div class="data-readout">
        <div style="font-size:8px;letter-spacing:0.25em;text-transform:uppercase;color:var(--electric);margin-bottom:20px;font-family:'Space Mono',monospace">// LIVE · Mission 047</div>
        <div class="dr-row"><span class="dr-key">ALTITUDE</span><span class="dr-val">847.3 km</span></div>
        <div class="dr-row"><span class="dr-key">INCLINATION</span><span class="dr-val">89.7°</span></div>
        <div class="dr-row"><span class="dr-key">VELOCITY</span><span class="dr-val">7.62 km/s</span></div>
        <div class="dr-row"><span class="dr-key">BATTERY</span><span class="dr-val">98.2%</span></div>
        <div class="dr-row"><span class="dr-key">TEMPERATURE</span><span class="dr-val">-112°C</span></div>
        <div class="dr-row"><span class="dr-key">SIGNAL DELAY</span><span class="dr-val">1.28s</span></div>
        <div class="dr-row"><span class="dr-key">FAULT COUNT</span><span class="dr-val" style="color:#40ff80">0</span></div>
        <div class="dr-row"><span class="dr-key">UPTIME</span><span class="dr-val">14d 08h 33m</span></div>
      </div>
    </div>
  </div>

  <div class="page" id="p3">
    <div class="p3-top">
      <h2 class="p3-title">Join the<br>mission</h2>
      <div class="p3-open">8 open roles · Remote + Berlin</div>
    </div>
    <div class="job-list">
      <div class="job-row"><div class="job-cell"><div class="job-title">Principal GNC Engineer</div><div class="job-sub">Guidance & Navigation · Orbital</div></div><div class="job-cell"><div class="job-dept">Engineering</div></div><div class="job-cell"><div class="job-loc">Berlin / Remote</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">ML Engineer — Flight Systems</div><div class="job-sub">Neural burn optimization</div></div><div class="job-cell"><div class="job-dept">AI / ML</div></div><div class="job-cell"><div class="job-loc">Remote</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Thermal Systems Lead</div><div class="job-sub">Materials & thermal design</div></div><div class="job-cell"><div class="job-dept">Hardware</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Systems Integration Engineer</div><div class="job-sub">Avionics & software</div></div><div class="job-cell"><div class="job-dept">Systems</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
      <div class="job-row"><div class="job-cell"><div class="job-title">Mission Control Operator</div><div class="job-sub">24/7 ops rotation</div></div><div class="job-cell"><div class="job-dept">Operations</div></div><div class="job-cell"><div class="job-loc">Berlin</div></div><div class="job-cell"><button class="apply-btn">Apply</button></div></div>
    </div>
  </div>

</div>

<div class="sys-nav">
  <button class="sys-btn active" data-i="0">Launch</button>
  <button class="sys-btn" data-i="1">Systems</button>
  <button class="sys-btn" data-i="2">Mission</button>
  <button class="sys-btn" data-i="3">Careers</button>
</div>
```
## CSS
```css
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --space: #03040a;
  --deep: #070b18;
  --steel: #8090a8;
  --electric: #2060ff;
  --glow: #4080ff;
  --white: #e8eef8;
  --dim: rgba(232,238,248,0.4);
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--space);
  font-family: 'Space Grotesk',sans-serif;
  color: var(--white);
}
/* Pages */

.pages {
  position: fixed;
  inset: 0;
}

.page {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}

.page.active {
  pointer-events: auto;
  visibility: visible;
}
/* Shatter layer */

#shatterLayer {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  overflow: hidden;
}
/* PAGE 0 — LAUNCH */

#p0 {
  background: var(--space);
  position: relative;
  overflow: hidden;
}

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p0-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 80px;
}

.p0-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: 'Space Mono',monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--white);
  font-weight: 700;
}

.logo span {
  color: var(--electric);
}

.mission-count {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.p0-hero {
  display: flex;
  flex-direction: column;
  max-width: 820px;
}

.mission-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(32,96,255,0.3);
  padding: 6px 16px;
  margin-bottom: 32px;
  width: fit-content;
}

.mission-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 8px var(--electric);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
    100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.mission-text {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.25em;
  color: rgba(32,96,255,0.8);
}

.p0-title {
  font-size: clamp(52px,8.5vw,120px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 32px;
}

.p0-title .blue {
  color: var(--electric);
}

.p0-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--dim);
  font-weight: 300;
  max-width: 540px;
  margin-bottom: 48px;
  font-family: 'Space Mono',monospace;
  letter-spacing: -0.01em;
}

.btn-row {
  display: flex;
  gap: 16px;
}

.btn-primary {
  padding: 16px 40px;
  background: var(--electric);
  color: var(--white);
  border: none;
  font-family: 'Space Grotesk',sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .2s,transform .15s;
  box-shadow: 0 0 20px rgba(32,96,255,0.3);
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(32,96,255,0.6);
  transform: translateY(-2px);
}

.btn-ghost {
  padding: 16px 32px;
  background: transparent;
  color: var(--steel);
  border: 1px solid rgba(128,144,168,0.25);
  font-family: 'Space Grotesk',sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s,color .2s;
}

.btn-ghost:hover {
  border-color: var(--steel);
  color: var(--white);
}

.p0-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.p0-stats {
  display: flex;
  gap: 48px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-num {
  font-family: 'Space Mono',monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 0 20px rgba(32,96,255,0.3);
}

.stat-lbl {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}
/* Orbit graphic */

.orbit-graphic {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  pointer-events: none;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(32,96,255,0.12);
}

.or-1 {
  inset: 0;
}

.or-2 {
  inset: 40px;
  border-color: rgba(32,96,255,0.08);
}

.or-3 {
  inset: 80px;
  border-color: rgba(32,96,255,0.06);
}

.or-4 {
  inset: 120px;
  border-color: rgba(32,96,255,0.08);
}

.orbit-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 12px var(--glow);
}

.od-1 {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.od-2 {
  bottom: 60px;
  right: 40px;
}

.od-3 {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.planet {
  position: absolute;
  inset: 130px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%,rgba(32,96,255,0.3),rgba(3,4,10,0.8));
  border: 1px solid rgba(32,96,255,0.2);
  box-shadow: 0 0 40px rgba(32,96,255,0.1),inset 0 0 40px rgba(32,96,255,0.05);
}
/* PAGE 1 — TECHNOLOGY */

#p1 {
  background: var(--deep);
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.p1-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 52px;
}

.p1-title {
  font-size: clamp(36px,5.5vw,72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.p1-title span {
  color: var(--electric);
}

.p1-index {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel);
  padding-top: 8px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
  flex: 1;
}

.tech-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(128,144,168,0.08);
  padding: 32px;
  transition: background .25s,border-color .25s;
  cursor: pointer;
}

.tech-card:hover {
  background: rgba(32,96,255,0.04);
  border-color: rgba(32,96,255,0.2);
}

.tc-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(32,96,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--electric);
  font-size: 18px;
  position: relative;
}

.tc-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(32,96,255,0.1),transparent);
}

.tc-label {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 12px;
}

.tc-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.tc-body {
  font-size: 12px;
  line-height: 1.7;
  color: var(--dim);
  font-family: 'Space Mono',monospace;
  letter-spacing: -0.01em;
}
/* PAGE 2 — MISSION */

#p2 {
  background: var(--space);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.p2-left {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(128,144,168,0.06);
}

.p2-eyebrow {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 28px;
}

.p2-title {
  font-size: clamp(40px,6vw,80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 32px;
}

.p2-body {
  font-family: 'Space Mono',monospace;
  font-size: 12px;
  line-height: 1.8;
  color: var(--dim);
  margin-bottom: 40px;
  max-width: 440px;
  letter-spacing: -0.01em;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(128,144,168,0.06);
  position: relative;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: -1px;
  width: 1px;
  background: linear-gradient(180deg,var(--electric),rgba(32,96,255,0));
}

.tl-dot {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: 1px solid var(--electric);
  border-radius: 50%;
  background: var(--space);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}

.tl-dot::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 6px var(--electric);
}

.tl-text {
  font-size: 12px;
  color: var(--dim);
  font-family: 'Space Mono',monospace;
  line-height: 1.6;
}

.tl-year {
  font-size: 9px;
  color: var(--electric);
  letter-spacing: 0.1em;
  margin-top: 4px;
  font-weight: 700;
}

.p2-right {
  background: var(--deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px;
  position: relative;
}

.data-readout {
  font-family: 'Space Mono',monospace;
  width: 100%;
  max-width: 340px;
}

.dr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(128,144,168,0.08);
  font-size: 11px;
}

.dr-key {
  color: var(--steel);
  letter-spacing: 0.06em;
}

.dr-val {
  color: var(--electric);
  font-weight: 700;
}

.p2-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 40% at 50% 50%,rgba(32,96,255,0.04),transparent);
  pointer-events: none;
}
/* PAGE 3 — CAREERS */

#p3 {
  background: var(--deep);
  padding: 80px;
  overflow-y: auto;
}

.p3-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

.p3-title {
  font-size: clamp(40px,6vw,80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.p3-open {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-row {
  display: grid;
  grid-template-columns: 1fr 160px 120px 80px;
  border: 1px solid rgba(128,144,168,0.08);
  align-items: center;
  transition: background .2s,border-color .2s;
  cursor: pointer;
}

.job-row:hover {
  background: rgba(32,96,255,0.04);
  border-color: rgba(32,96,255,0.2);
}

.job-cell {
  padding: 24px;
  border-right: 1px solid rgba(128,144,168,0.06);
}

.job-cell:last-child {
  border-right: none;
}

.job-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.job-sub {
  font-family: 'Space Mono',monospace;
  font-size: 9px;
  color: var(--steel);
  letter-spacing: 0.08em;
}

.job-dept {
  font-family: 'Space Mono',monospace;
  font-size: 10px;
  color: var(--electric);
  letter-spacing: 0.1em;
}

.job-loc {
  font-family: 'Space Mono',monospace;
  font-size: 10px;
  color: var(--steel);
  letter-spacing: 0.06em;
}

.apply-btn {
  padding: 8px 20px;
  background: var(--electric);
  color: var(--white);
  border: none;
  font-family: 'Space Grotesk',sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s;
}

.apply-btn:hover {
  opacity: 0.8;
}
/* Nav */

.sys-nav {
  position: fixed;
  top: 40px;
  right: 60px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.sys-btn {
  font-family: 'Space Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(128,144,168,0.4);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
  padding: 4px 0;
}

.sys-btn::after {
  content: '';
  width: 16px;
  height: 1px;
  background: rgba(128,144,168,0.3);
  transition: width .3s,background .2s;
}

.sys-btn:hover {
  color: var(--white);
}

.sys-btn:hover::after {
  width: 32px;
  background: var(--white);
}

.sys-btn.active {
  color: var(--electric);
}

.sys-btn.active::after {
  width: 32px;
  background: var(--electric);
}

@media (max-width: 768px) {
  #p0 .orbit-graphic {
    display: none;
  }

  #p2 {
    grid-template-columns: 1fr;
  }

  .p2-right {
    display: none;
  }

  #p0 .p0-content,
    #p1,
    #p2 .p2-left,
    #p3 {
    padding: 40px 24px;
  }

  .tech-grid {
    grid-template-columns: 1fr;
  }

  .job-row {
    grid-template-columns: 1fr 100px;
  }

  .job-dept,
    .job-loc {
    display: none;
  }

  .sys-nav {
    top: auto;
    right: 20px;
    bottom: 20px;
  }

  .p0-stats {
    gap: 24px;
  }
}
```

## JavaScript
```js
// Starfield
const sc=document.getElementById('starCanvas');
sc.width=window.innerWidth;sc.height=window.innerHeight;
const sx=sc.getContext('2d');
for(let i=0;i<200;i++){
  sx.beginPath();
  sx.arc(Math.random()*sc.width,Math.random()*sc.height,Math.random()*1.2,0,Math.PI*2);
  sx.fillStyle=`rgba(232,238,248,${Math.random()*0.5+0.1})`;
  sx.fill();
}

// Shatter transition
const shatterLayer=document.getElementById('shatterLayer');
const pages=document.querySelectorAll('.page');
const navBtns=document.querySelectorAll('.sys-btn');
let cur=0,busy=false;

function genTriangles(W,H,N){
  const pts=[];
  const cols=Math.ceil(Math.sqrt(N*W/H));
  const rows=Math.ceil(N/cols);
  for(let r=0;r<=rows;r++)
    for(let c=0;c<=cols;c++){
      const x=(c/cols)*W+(Math.random()-0.5)*W/cols*0.8;
      const y=(r/rows)*H+(Math.random()-0.5)*H/rows*0.8;
      pts.push([Math.max(0,Math.min(W,x)),Math.max(0,Math.min(H,y))]);
    }
  const tris=[];
  const cx=cols+1;
  for(let r=0;r<rows;r++)
    for(let c=0;c<cols;c++){
      const a=r*cx+c,b=a+1,d=a+cx,e=d+1;
      if(pts[a]&&pts[b]&&pts[d])tris.push([pts[a],pts[b],pts[d]]);
      if(pts[b]&&pts[e]&&pts[d])tris.push([pts[b],pts[e],pts[d]]);
    }
  return tris;
}

function goTo(n){
  if(busy||n===cur)return;
  busy=true;
  const prev=cur;cur=n;
  navBtns.forEach((b,i)=>b.classList.toggle('active',i===cur));

  const W=window.innerWidth,H=window.innerHeight;
  const tris=genTriangles(W,H,60);
  shatterLayer.innerHTML='';

  tris.forEach(tri=>{
    const pts=tri.map(([x,y])=>`${x}px ${y}px`).join(',');
    const frag=document.createElement('div');
    frag.style.cssText=`
      position:absolute;inset:0;
      clip-path:polygon(${pts});
      background:var(--space);
      opacity:0;
      transition:none;
    `;
    shatterLayer.appendChild(frag);
  });

  const allFrags=Array.from(shatterLayer.children);
  const sorted=allFrags.sort(()=>Math.random()-0.5);

  let covered=false;
  sorted.forEach((frag,i)=>{
    setTimeout(()=>{
      frag.style.transition='opacity 80ms';
      frag.style.opacity='1';
      if(i===Math.floor(sorted.length*0.5)&&!covered){
        covered=true;
        pages[prev].classList.remove('active');
        pages[cur].classList.add('active');
        sorted.forEach((f2,j)=>{
          const angle=Math.random()*Math.PI*2;
          const dist=Math.random()*300+100;
          setTimeout(()=>{
            f2.style.transition=`transform 500ms cubic-bezier(0.4,0,1,0.8),opacity 400ms 100ms`;
            f2.style.transform=`translate(${Math.cos(angle)*dist}px,${Math.sin(angle)*dist}px) rotate(${(Math.random()-0.5)*40}deg)`;
            f2.style.opacity='0';
          },j*8);
        });
      }
    },i*12);
  });

  setTimeout(()=>{
    shatterLayer.innerHTML='';
    busy=false;
  },sorted.length*12+650);
}

navBtns.forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.i)));
document.querySelectorAll('[data-next]').forEach(b=>b.addEventListener('click',()=>goTo(+b.dataset.next)));

let wt=0;
window.addEventListener('wheel',e=>{
  const now=Date.now();if(now-wt<1200)return;wt=now;
  goTo(Math.max(0,Math.min(3,cur+(e.deltaY>0?1:-1))));
},{passive:true});
document.addEventListener('keydown',e=>{
  if(e.key==='ArrowRight')goTo(Math.min(3,cur+1));
  if(e.key==='ArrowLeft')goTo(Math.max(0,cur-1));
});
```

Techniques used in this demo

radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →