<!DOCTYPE html>
<html lang="en">
<!--
  GENMOTION BRIEF
  Tone     : Cinematic brutalist — film title energy. Ink black. No decoration.
  Colors   : #060606 black (dominant) · #edeae1 warm cream (type) · #b8955a bronze (accent, finale only)
  Fonts    : Bebas Neue (mass/impact) + DM Mono (precision labels)
  Duration : 14s total
  Scenes   :
    S0  0.0–1.4s  Cold open. Particle field assembles from nothing. "APTUM" breathes in.
    S1  1.4–4.2s  "GENMOTION" — each letter materialises from a different screen edge, converges center.
    S2  4.2–5.4s  Word holds. Then VERTICAL CRACK — screen splits, reveals raw black.
    S3  5.4–8.0s  Product definition types in. Stark left-aligned. Rule grows beneath.
    S4  8.0–11.0s Capability triptych — 3 bordered cards slide up with live canvas previews inside each.
    S5  11.0–14s  Final lockup. GENMOTION full bleed. Bronze rule. $A · APTUM tagline.
  Moment   : The letter convergence in S1 — 9 letters flying from 9 different directions
             then SNAPPING into place with a physical impact flash on landing.
-->
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --k:  #060606;
  --w:  #edeae1;
  --br: #b8955a;
  --d:  #3a3a34;
  --dd: #1a1a16;
  --bd: #1c1c18;
  --bb: 'Bebas Neue',sans-serif;
  --mm: 'DM Mono',monospace;
}

html,body{
  width:1920px;height:1080px;
  overflow:hidden;
  background:var(--k);
  color:var(--w);
  font-family:var(--mm);
}

/* ─── CANVAS ─── */
#bg{position:fixed;inset:0;z-index:0}

/* ─── SCENES ─── */
.sc{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  opacity:0;z-index:10;
}

/* ══ S0 — COLD OPEN ══ */
#s0{animation:show .01s 0s forwards,hide .01s 1.35s forwards}

.s0-tag{
  font:400 15px/1 var(--mm);
  letter-spacing:.48em;text-transform:uppercase;
  color:var(--d);opacity:0;
  animation:fi .8s ease .3s forwards;
}
.s0-sub{
  font:400 13px/1 var(--mm);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--dd);opacity:0;margin-top:14px;
  animation:fi .6s ease .7s forwards;
}

/* ══ S1 — LETTER CONVERGENCE ══ */
#s1{animation:show .01s 1.4s forwards,hide .01s 4.15s forwards}

.title-wrap{
  position:relative;
  display:flex;align-items:flex-end;
  line-height:1;overflow:visible;
}

.ltr{
  font:400 310px/1 var(--bb);
  color:var(--w);
  display:inline-block;
  opacity:0;
  position:relative;
}

/* Each letter starts at a different off-screen position */
.ltr:nth-child(1){transform:translate(-800px,-300px);animation:ltr1 .55s cubic-bezier(.16,1,.3,1) 1.42s forwards}
.ltr:nth-child(2){transform:translate(-200px,-700px);animation:ltr2 .55s cubic-bezier(.16,1,.3,1) 1.52s forwards}
.ltr:nth-child(3){transform:translate(0px,-900px);  animation:ltr3 .55s cubic-bezier(.16,1,.3,1) 1.62s forwards}
.ltr:nth-child(4){transform:translate(400px,-600px); animation:ltr4 .55s cubic-bezier(.16,1,.3,1) 1.72s forwards}
.ltr:nth-child(5){transform:translate(900px,-200px); animation:ltr5 .55s cubic-bezier(.16,1,.3,1) 1.82s forwards}
.ltr:nth-child(6){transform:translate(900px,300px);  animation:ltr6 .55s cubic-bezier(.16,1,.3,1) 1.92s forwards}
.ltr:nth-child(7){transform:translate(400px,700px);  animation:ltr7 .55s cubic-bezier(.16,1,.3,1) 2.02s forwards}
.ltr:nth-child(8){transform:translate(-200px,700px); animation:ltr8 .55s cubic-bezier(.16,1,.3,1) 2.12s forwards}
.ltr:nth-child(9){transform:translate(-800px,400px); animation:ltr9 .55s cubic-bezier(.16,1,.3,1) 2.22s forwards}

/* Impact flash on landing */
.ltr::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(255,255,255,0);
}
.ltr:nth-child(1)::after{animation:flash .2s ease 1.95s forwards}
.ltr:nth-child(2)::after{animation:flash .2s ease 2.05s forwards}
.ltr:nth-child(3)::after{animation:flash .2s ease 2.15s forwards}
.ltr:nth-child(4)::after{animation:flash .2s ease 2.25s forwards}
.ltr:nth-child(5)::after{animation:flash .2s ease 2.35s forwards}
.ltr:nth-child(6)::after{animation:flash .2s ease 2.45s forwards}
.ltr:nth-child(7)::after{animation:flash .2s ease 2.55s forwards}
.ltr:nth-child(8)::after{animation:flash .2s ease 2.65s forwards}
.ltr:nth-child(9)::after{animation:flash .2s ease 2.75s forwards}

.s1-sub{
  font:300 19px/1 var(--mm);
  letter-spacing:.38em;text-transform:uppercase;
  color:var(--d);opacity:0;margin-top:22px;
  animation:fi .7s ease 3.2s forwards;
}

/* ══ S2 — CRACK ══ */
#s2{animation:show .01s 4.2s forwards,hide .01s 5.35s forwards;overflow:hidden}

.crack-w{font:400 310px/1 var(--bb);color:var(--w);position:relative}
.crack-top{
  display:block;clip-path:inset(0 0 50% 0);
  animation:crack-up .7s cubic-bezier(.4,0,1,1) 4.45s forwards;
}
.crack-bot{
  display:block;position:absolute;top:0;left:0;
  clip-path:inset(50% 0 0 0);
  animation:crack-dn .7s cubic-bezier(.4,0,1,1) 4.45s forwards;
}
.crack-line{
  position:absolute;top:0;left:50%;
  width:2px;height:0%;
  background:var(--w);
  transform:translateX(-50%);
  animation:crack-line .35s ease 4.38s forwards;
}

/* ══ S3 — DEFINITION ══ */
#s3{
  animation:show .01s 5.4s forwards,hide .01s 7.95s forwards;
  align-items:flex-start;padding:0 160px;
}
.s3-num{
  font:400 13px/1 var(--mm);letter-spacing:.42em;
  text-transform:uppercase;color:var(--d);
  opacity:0;animation:fi .4s ease 5.55s forwards;margin-bottom:40px;
}
.s3-hed{
  font:400 108px/1 var(--bb);color:var(--w);
  letter-spacing:.02em;
  opacity:0;transform:translateY(28px);
  animation:fu .65s cubic-bezier(.16,1,.3,1) 5.75s forwards;
}
.s3-rule{
  width:0;height:2px;background:var(--w);
  margin-top:44px;
  animation:rg .9s cubic-bezier(.16,1,.3,1) 6.2s forwards;
}
.s3-body{
  font:300 21px/1.75 var(--mm);color:#6a6a60;
  max-width:800px;margin-top:38px;
  opacity:0;animation:fi .7s ease 6.6s forwards;
}
.s3-body strong{color:var(--w);font-weight:400}

/* ══ S4 — TRIPTYCH ══ */
#s4{
  animation:show .01s 8.0s forwards,hide .01s 10.95s forwards;
  align-items:flex-start;padding:0 160px;gap:0;
}
.s4-num{
  font:400 13px/1 var(--mm);letter-spacing:.42em;
  text-transform:uppercase;color:var(--d);
  opacity:0;animation:fi .4s ease 8.15s forwards;margin-bottom:52px;
}
.cards{display:flex;gap:32px;width:100%;align-items:stretch}

.card{
  flex:1;border:1px solid var(--bd);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(30px);
}
.card:nth-child(1){animation:fu .6s cubic-bezier(.16,1,.3,1) 8.3s  forwards}
.card:nth-child(2){animation:fu .6s cubic-bezier(.16,1,.3,1) 8.48s forwards}
.card:nth-child(3){animation:fu .6s cubic-bezier(.16,1,.3,1) 8.66s forwards}

.card-prev{
  width:100%;height:140px;
  background:#0a0a08;
  border-bottom:1px solid var(--bd);
  overflow:hidden;position:relative;flex-shrink:0;
}
.card-prev canvas{display:block;width:100%;height:100%}

.card-body{padding:36px 36px 40px;flex:1;display:flex;flex-direction:column}
.card-n{
  font:400 12px/1 var(--mm);letter-spacing:.35em;
  text-transform:uppercase;color:var(--d);margin-bottom:16px;
}
.card-t{
  font:400 52px/1 var(--bb);color:var(--w);
  letter-spacing:.02em;margin-bottom:14px;
}
.card-d{font:300 15px/1.7 var(--mm);color:#585850}

/* ══ S5 — FINALE ══ */
#s5{animation:show .01s 11.0s forwards;flex-direction:column}

.s5-w{
  font:400 340px/0.88 var(--bb);color:var(--w);
  letter-spacing:-.01em;
  opacity:0;transform:scale(.93);
  animation:slam .95s cubic-bezier(.16,1,.3,1) 11.15s forwards;
}
.s5-rule{
  width:0;height:1px;background:var(--br);
  margin:36px 0 30px;
  animation:rg .85s cubic-bezier(.16,1,.3,1) 11.9s forwards;
}
.s5-tag{
  font:400 20px/1 var(--mm);letter-spacing:.32em;
  text-transform:uppercase;color:var(--br);
  opacity:0;animation:fi .65s ease 12.45s forwards;
}
.s5-apt{
  font:300 13px/1 var(--mm);letter-spacing:.28em;
  text-transform:uppercase;color:var(--d);
  margin-top:14px;
  opacity:0;animation:fi .5s ease 12.9s forwards;
}

/* ─── HUD ─── */
#hud{position:fixed;inset:0;z-index:50;pointer-events:none}
.hl{position:absolute;top:42px;left:56px;font:400 13px/1 var(--mm);letter-spacing:.32em;text-transform:uppercase;color:var(--d)}
.hr{position:absolute;top:42px;right:56px;font:400 13px/1 var(--mm);letter-spacing:.22em;color:var(--d);text-align:right}
.hbl{position:absolute;bottom:42px;left:56px;font:400 12px/1 var(--mm);letter-spacing:.24em;color:var(--dd)}
.hbr{position:absolute;bottom:42px;right:56px;font:400 12px/1 var(--mm);letter-spacing:.2em;color:var(--dd)}

#pb{position:fixed;bottom:0;left:0;height:2px;background:var(--br);width:0;z-index:60;transition:width .05s linear}

/* ─── KEYFRAMES ─── */
@keyframes show{to{opacity:1}}
@keyframes hide{to{opacity:0;pointer-events:none}}
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes fu{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slam{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes rg{to{width:560px}}
@keyframes flash{0%{background:rgba(255,255,255,.55)}100%{background:rgba(255,255,255,0)}}
@keyframes crack-up{to{transform:translateY(-240px);opacity:0}}
@keyframes crack-dn{to{transform:translateY(240px);opacity:0}}
@keyframes crack-line{0%{height:0}100%{height:110%}}

/* Letter arrival keyframes */
@keyframes ltr1{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr2{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr3{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr4{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr5{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr6{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr7{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr8{to{opacity:1;transform:translate(0,0)}}
@keyframes ltr9{to{opacity:1;transform:translate(0,0)}}
</style>
</head>
<body>

<canvas id="bg"></canvas>

<div id="hud">
  <div class="hl">GENMOTION</div>
  <div class="hr" id="tmr">00.0s</div>
  <div class="hbl">BY APTUM · $A · BASE</div>
  <div class="hbr">MOTION ENGINE v1</div>
</div>
<div id="pb"></div>

<!-- S0 -->
<div class="sc" id="s0">
  <div class="s0-tag">Aptum · Flagship Product</div>
  <div class="s0-sub">Production grade motion graphics</div>
</div>

<!-- S1 -->
<div class="sc" id="s1">
  <div class="title-wrap">
    <span class="ltr">G</span><span class="ltr">E</span><span class="ltr">N</span><span class="ltr">M</span><span class="ltr">O</span><span class="ltr">T</span><span class="ltr">I</span><span class="ltr">O</span><span class="ltr">N</span>
  </div>
  <div class="s1-sub">The agent builds the motion</div>
</div>

<!-- S2 -->
<div class="sc" id="s2">
  <div class="crack-w" style="position:relative">
    <div class="crack-line"></div>
    <span class="crack-top">GENMOTION</span>
    <span class="crack-bot">GENMOTION</span>
  </div>
</div>

<!-- S3 -->
<div class="sc" id="s3">
  <div class="s3-num">01 — What it is</div>
  <div class="s3-hed">CINEMA-GRADE<br>WEB ANIMATION</div>
  <div class="s3-rule"></div>
  <div class="s3-body">
    Aptum's flagship skill. Generates <strong>export-ready</strong> motion graphics —
    Canvas 2D engines, surgical timing, brand-true aesthetics.<br>
    Not rotating shapes. Not glow text. <strong>Film title sequences.</strong>
  </div>
</div>

<!-- S4 -->
<div class="sc" id="s4">
  <div class="s4-num">02 — Capabilities</div>
  <div class="cards">
    <div class="card">
      <div class="card-prev"><canvas id="p1" width="520" height="140"></canvas></div>
      <div class="card-body">
        <div class="card-n">01 / Oscilloscope</div>
        <div class="card-t">SCAN LINE</div>
        <div class="card-d">CRT portrait engine. Luminosity-driven wave amplitude on horizontal scan lines.</div>
      </div>
    </div>
    <div class="card">
      <div class="card-prev"><canvas id="p2" width="520" height="140"></canvas></div>
      <div class="card-body">
        <div class="card-n">02 / Particles</div>
        <div class="card-t">FIELD SYSTEM</div>
        <div class="card-d">Procedural particle networks with live connection fields and drift physics.</div>
      </div>
    </div>
    <div class="card">
      <div class="card-prev"><canvas id="p3" width="520" height="140"></canvas></div>
      <div class="card-body">
        <div class="card-n">03 / Typography</div>
        <div class="card-t">TYPE MOTION</div>
        <div class="card-d">Letter-level animation with staggered physics, glitch, and cinematic reveals.</div>
      </div>
    </div>
  </div>
</div>

<!-- S5 -->
<div class="sc" id="s5">
  <div class="s5-w">GENMOTION</div>
  <div class="s5-rule"></div>
  <div class="s5-tag">Production grade · Export ready · By Aptum</div>
  <div class="s5-apt">$A · Built on Base · aptum.fun</div>
</div>

<script>
// ═══════════════════════════════════════════════════
// BACKGROUND — particle field with connection mesh
// ═══════════════════════════════════════════════════
const bgC = document.getElementById('bg');
const bgX = bgC.getContext('2d');
bgC.width = 1920; bgC.height = 1080;

const N = 260;
const pts = Array.from({length:N},()=>({
  x: Math.random()*1920, y: Math.random()*1080,
  vx:(Math.random()-.5)*.22, vy:(Math.random()-.5)*.22,
  r: Math.random()*1.1+.2, a: Math.random()*.35+.06,
}));

let glitchOn=false, glitchTm=0;
function schedGlitch(){setTimeout(()=>{
  glitchOn=true; glitchTm=6+Math.floor(Math.random()*8);
  schedGlitch();
},2500+Math.random()*5000);}
schedGlitch();

let bgFr=0;
function bgDraw(){
  bgX.fillStyle='rgba(6,6,6,.15)';
  bgX.fillRect(0,0,1920,1080);

  pts.forEach((p,i)=>{
    p.x=(p.x+p.vx+1920)%1920;
    p.y=(p.y+p.vy+1080)%1080;
    bgX.beginPath();
    bgX.arc(p.x,p.y,p.r,0,Math.PI*2);
    bgX.fillStyle=`rgba(237,234,225,${p.a})`;
    bgX.fill();
    for(let j=i+1;j<N;j++){
      const q=pts[j];
      const d=Math.hypot(p.x-q.x,p.y-q.y);
      if(d<110){
        bgX.beginPath();bgX.moveTo(p.x,p.y);bgX.lineTo(q.x,q.y);
        bgX.strokeStyle=`rgba(237,234,225,${(1-d/110)*.055})`;
        bgX.lineWidth=.45;bgX.stroke();
      }
    }
  });

  if(glitchOn&&glitchTm>0){
    glitchTm--;
    for(let i=0;i<3+Math.floor(Math.random()*3);i++){
      const gy=Math.random()*1080, gh=2+Math.random()*14;
      const gdx=(Math.random()-.5)*22;
      try{const d=bgX.getImageData(0,gy,1920,gh);bgX.putImageData(d,gdx,gy);}catch(e){}
    }
    if(glitchTm<=0) glitchOn=false;
  }

  bgFr++;
  requestAnimationFrame(bgDraw);
}
bgDraw();

// ═══════════════════════════════════════════════════
// PREVIEW 1 — Scan line face
// ═══════════════════════════════════════════════════
(()=>{
  const c=document.getElementById('p1');
  if(!c) return;
  const x=c.getContext('2d');
  const W=c.width,H=c.height;
  let t=0;

  function lum(px,py){
    const nx=px/W*2-1, ny=py/H*2-1;
    const d=Math.hypot(nx*.75,ny*1.1);
    if(d>.88) return 0;
    let l=.72-d*.55;
    l+=Math.max(0,.28-Math.hypot(nx+.08,ny*2.2))*1.6;
    l-=Math.max(0,.1-Math.hypot((nx+.15)*2.2,(ny+.07)*3))*.8;
    l-=Math.max(0,.1-Math.hypot((nx-.10)*2.2,(ny+.07)*3))*.7;
    return Math.max(0,Math.min(1,l));
  }

  function draw(){
    x.fillStyle='#0a0a08';
    x.fillRect(0,0,W,H);
    const sp=4;
    for(let py=0;py<H;py+=sp){
      x.beginPath();let on=false;
      for(let px=0;px<W;px++){
        const l=lum(px,py);
        if(l<.04){on=false;continue;}
        const amp=l*sp*.68;
        const w=Math.sin(px*.1+t*.025)*amp*.6+Math.sin(px*.22+t*.038)*amp*.28;
        const ry=py+w;
        if(!on){x.moveTo(px,ry);on=true;}else x.lineTo(px,ry);
      }
      const bl=lum(W/2,py);
      x.strokeStyle=`rgba(0,${(178+bl*60)|0},${(212+bl*43)|0},${.42+bl*.52})`;
      x.lineWidth=.65+bl*.65;x.stroke();
    }
    t++;requestAnimationFrame(draw);
  }
  draw();
})();

// ═══════════════════════════════════════════════════
// PREVIEW 2 — Particle field
// ═══════════════════════════════════════════════════
(()=>{
  const c=document.getElementById('p2');
  if(!c) return;
  const x=c.getContext('2d');
  const W=c.width,H=c.height;
  const ps=Array.from({length:55},()=>({
    x:Math.random()*W,y:Math.random()*H,
    vx:(Math.random()-.5)*.45,vy:(Math.random()-.5)*.45,
    r:Math.random()*1.4+.3,a:Math.random()*.55+.18,
  }));

  function draw(){
    x.fillStyle='rgba(10,10,8,.22)';x.fillRect(0,0,W,H);
    ps.forEach((p,i)=>{
      p.x=(p.x+p.vx+W)%W;p.y=(p.y+p.vy+H)%H;
      x.beginPath();x.arc(p.x,p.y,p.r,0,Math.PI*2);
      x.fillStyle=`rgba(237,234,225,${p.a})`;x.fill();
      for(let j=i+1;j<ps.length;j++){
        const q=ps[j];
        const d=Math.hypot(p.x-q.x,p.y-q.y);
        if(d<75){
          x.beginPath();x.moveTo(p.x,p.y);x.lineTo(q.x,q.y);
          x.strokeStyle=`rgba(237,234,225,${(1-d/75)*.28})`;
          x.lineWidth=.55;x.stroke();
        }
      }
    });
    requestAnimationFrame(draw);
  }
  draw();
})();

// ═══════════════════════════════════════════════════
// PREVIEW 3 — Type motion
// ═══════════════════════════════════════════════════
(()=>{
  const c=document.getElementById('p3');
  if(!c) return;
  const x=c.getContext('2d');
  const W=c.width,H=c.height;
  let t=0;
  const WORD='MOTION';
  const lts=WORD.split('').map((ch,i)=>({ch,ox:28+i*78,oy:H/2+20,ph:i*.45}));

  function draw(){
    x.fillStyle='#0a0a08';x.fillRect(0,0,W,H);
    x.font="400 62px 'Bebas Neue',sans-serif";
    x.textBaseline='alphabetic';
    lts.forEach((l,i)=>{
      const wave=Math.sin(t*.038+l.ph)*10;
      const al=.55+Math.sin(t*.028+l.ph)*.42;
      x.fillStyle=`rgba(237,234,225,${al})`;
      x.fillText(l.ch,l.ox,l.oy+wave);
      // Periodic glitch slice per letter
      if(Math.floor(t/3)%80===i*9){
        x.fillStyle='rgba(0,210,255,.22)';
        x.fillText(l.ch,l.ox+4,l.oy+wave-2);
        x.fillStyle='rgba(255,30,120,.18)';
        x.fillText(l.ch,l.ox-3,l.oy+wave+1);
      }
    });
    t++;requestAnimationFrame(draw);
  }
  draw();
})();

// ═══════════════════════════════════════════════════
// HUD — timer + progress bar
// ═══════════════════════════════════════════════════
const TOTAL=14000;
const t0=performance.now();
const tmrEl=document.getElementById('tmr');
const pbEl=document.getElementById('pb');

(function tick(){
  const el=performance.now()-t0;
  const s=Math.min(el/1000,14);
  tmrEl.textContent=s.toFixed(1).padStart(4,'0')+'s';
  pbEl.style.width=Math.min(el/TOTAL*100,100).toFixed(2)+'%';
  if(el<TOTAL+800) requestAnimationFrame(tick);
})();
</script>
</body>
</html>