hyperframes-slide-work-split

Split Slide (HyperFrames)

When to use

• When explaining screenshots, charts, or diagrams
• When visual materials and commentary need to be shown simultaneously

HTML structure (horizontal · left-right split)

<div id="s-N" class="scene clip split"
     data-start="..." data-duration="6" data-track-index="0">
  <div class="eyebrow">카테고리</div>
  <div class="scene-title">메인 타이틀</div>
  <div class="split-grid">
    <div class="split-image">
      <img src="assets/03-chart.png" alt="설명" crossorigin="anonymous" />
    </div>
    <ul class="bullets">
      <li id="s-N-b1">설명 항목 1</li>
      <li id="s-N-b2">설명 항목 2</li>
      <li id="s-N-b3">설명 항목 3</li>
    </ul>
  </div>
</div>

HTML structure (vertical · top-bottom split, 9:16 shorts)

<div class="split-grid vertical">
  <div class="split-image">...</div>
  <ul class="bullets">...</ul>
</div>

CSS essentials

• .split-grid — display: grid; grid-template-columns: 1fr 1fr; gap: 48–64px; margin-top: 48px; flex: 1
• .split-grid.vertical — grid-template-columns: 1fr; grid-template-rows: 1fr 1fr
• .split-image — container, when there is no image, acts as a placeholder with a dashed border + faint background
• .split-image img — width: 100%; height: 100%; object-fit: contain
• The bullet side reuses the title-bullets의 .bullets style as is

GSAP entrance

const start = 22.4;
tl.from("#s-N .eyebrow",     { y: -15, opacity: 0, duration: 0.5, ease: "power3.out" }, start + 0.2);
tl.from("#s-N .scene-title", { y: 40,  opacity: 0, duration: 0.7, ease: "expo.out"   }, start + 0.4);
tl.from("#s-N .split-image", { x: -40, opacity: 0, duration: 0.7, ease: "power3.out" }, start + 0.9);
tl.from("#s-N-b1", { x: 20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.1);
tl.from("#s-N-b2", { x: 20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.25);
tl.from("#s-N-b3", { x: 20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.4);

• Directional match where images enter from the left and bullets from the right

Markdown detection rules (when building the generator)

# [뱃지] 타이틀

![](03-chart.png)

- 설명 항목 1
- 설명 항목 2

If an image and bullets are both present, split type.

Authoring principles

• The image is what should be read, and the bullets interpretationmust be provided
• Write so that bullets do not repetitively explain the image
• If there is no image, splitnot title-bullets or title-imageswitch to
• Horizontal is left-right, vertical (9:16 shorts) is top-bottom split by default

When there is no image

• .split-imageplace a dashed border + faint translucent background to act as a placeholder
• Once the actual image is ready, <img>just fill it in