hyperframes-slide-work-compare

Compare Slide (HyperFrames)

When to use

• When comparing 2–4 items at the same time
• When showing choices, options, or alternatives side by side
• When explaining each item's characteristics as bullets

HTML structure

<div id="s-N" class="scene clip"
     data-start="..." data-duration="6" data-track-index="0">
  <div class="eyebrow">비교</div>
  <div class="scene-title">프레임워크 선택</div>
  <div class="compare-grid">
    <div class="compare-col" id="s-N-c1">
      <div class="compare-heading">React</div>
      <ul class="compare-list">
        <li>생태계가 크다</li>
        <li>자유도가 높다</li>
      </ul>
    </div>
    <div class="compare-col" id="s-N-c2">
      <div class="compare-heading">Vue</div>
      <ul class="compare-list">
        <li>학습 곡선이 낮다</li>
        <li>공식 도구가 잘 갖춰져 있다</li>
      </ul>
    </div>
    <div class="compare-col" id="s-N-c3">
      <div class="compare-heading">Svelte</div>
      <ul class="compare-list">
        <li>번들 크기가 작다</li>
        <li>컴파일 타임 최적화</li>
      </ul>
    </div>
  </div>
</div>

CSS essentials

• .compare-grid — display: grid; gap: 32–40px; margin-top: 48px; flex: 1
  • 2열: grid-template-columns: 1fr 1fr
  • 3열: repeat(3, 1fr) (default)
  • 4열: repeat(4, 1fr)
• .compare-col — card style, background: rgba(255,255,255,0.05); border: 1px solid rgba(...); border-radius: 20px; padding: 36–40px
• .compare-heading — 44–56px, weight 700, border-bottom: 2px solid accent; padding-bottom: 16px; margin-bottom: 20px
• .compare-list li — 26–32px, weight 400, line-height 1.4, padding-left: 28px, marker는 — or dot

GSAP entrance

const start = 33.6;
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-c1", { y: 60, opacity: 0, duration: 0.6, ease: "power3.out" }, start + 0.9);
tl.from("#s-N-c2", { y: 60, opacity: 0, duration: 0.6, ease: "power3.out" }, start + 1.05);
tl.from("#s-N-c3", { y: 60, opacity: 0, duration: 0.6, ease: "power3.out" }, start + 1.2);

• Columns use the same direction (bottom → top) stagger to emphasize consistency
• Spacing between columns 0.12–0.18s

Markdown detection rules (when building a generator)

# [비교] 프레임워크 선택

|| React
- 생태계가 크다
- 자유도가 높다

|| Vue
- 학습 곡선이 낮다
- 공식 도구가 잘 갖춰져 있다

|| Svelte
- 번들 크기가 작다
- 컴파일 타임 최적화

• || A line starting with is a column title
• Below it, - bullets are that column's description

compare vs evolution-flow distinction

Situation	Type
A flow that changed from A to B (has directionality)	evolution-flow
Comparing A, B, and C at the same time (peer relationship)	compare

Writing principles

• 2–4 columns is appropriate
• Keep column titles short (1–2 words)
• Matching the number of bullets in each column gives good balance
• 5 or more columns reduce readability, so split them