hyperframes-slide-work-evolution-flow

Evolution Flow Slide (HyperFrames)

When to use

• When contrasting the existing state and the improved state on one screen
• When the central axis of change, such as input → result, is the core
• When you want to show a before/after comparison not as a simple list but as a causal flow

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="flow">
    <div class="flow-col" id="s-N-before">
      <div class="flow-label">기존</div>
      <div class="flow-heading">리스트 중심</div>
      <ul class="flow-list">
        <li>결과 목록이 길게 이어진다</li>
        <li>먼저 읽어야 할 답이 눈에 띄지 않는다</li>
      </ul>
    </div>
    <div class="flow-arrow" id="s-N-arrow">→</div>
    <div class="flow-col after" id="s-N-after">
      <div class="flow-label">개선</div>
      <div class="flow-heading">답 중심</div>
      <ul class="flow-list">
        <li>핵심 답이 먼저 보인다</li>
        <li>다음 클릭이 자연스럽게 이어진다</li>
      </ul>
    </div>
  </div>
</div>

CSS essentials

• .flow — display: grid; grid-template-columns: 1fr 120px 1fr; gap: 40px; margin-top: 48–56px; flex: 1; max-height: 620px
• .flow-col — card, background: rgba(255,255,255,0.05); border: 1px solid rgba(...); border-radius: 24px; padding: 44px 40px; display: flex; flex-direction: column
• .flow-col.after — emphasize the "arrival state" with an accent-colored border/background gradient
• .flow-label — badge style (24–28px, letter-spacing 3px, padding 8px 20px, border-radius 999px), .flow-col.after .flow-labelis accent background + contrasting text color
• .flow-heading — 44–56px, weight 700, line-height 1.2
• .flow-list li — 26–32px, weight 400, line-height 1.4, padding-left: 28px, ::before { content: "—" }
• .flow-arrow — display: flex; align-items: center; justify-content: center; font-size: 80px; font-weight: 200; color: accent
• If an image is needed, .flow-col inside .flow-image { aspect-ratio: 16/9 } add

GSAP entrance

const start = 39.2;
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-before", { x: -40, opacity: 0, duration: 0.7, ease: "power3.out" }, start + 0.9);
tl.from("#s-N-arrow",  { scale: 0.5, opacity: 0, duration: 0.5, ease: "back.out(1.7)" }, start + 1.3);
tl.from("#s-N-after",  { x: 40, opacity: 0, duration: 0.7, ease: "power3.out" }, start + 1.4);

• Make the flow read in the order of left panel first, arrow, right panel
• The arrow back.outappears with a bounce to differentiate the rhythm
• Do not shake the whole element greatly; focus on movement that makes the direction of the flow readable + sequential appearance

Markdown detection rules (when building a generator)

# [개선] 검색 경험이 어떻게 바뀌었나

<< 기존 검색
- 결과 목록이 길게 이어진다
- 먼저 읽어야 할 답이 눈에 띄지 않는다

==

>> 개선된 검색
- 핵심 답이 먼저 보인다
- 다음 클릭이 자연스럽게 이어진다

• << The block starting with is the left panel, >> is the right panel
• == is only a layout transition signal; do not write content under it
• Badge: << [기존] 타이틀 In the format, the inside of the brackets is flow-label, and the rest is flow-heading

To mix in images, put ![](...)inside each block:

<< 기존 가입
![](signup-before.png)
- 입력 단계가 길다

>> 개선된 가입
![](signup-after.png)
- 핵심 입력만 남았다

Writing principles

• Write only the starting state on the left and the arrival state on the right
• The left and right bullets do not need to match in number, but write them so a correspondence is felt
• For the left and right titles, state formis more readable than noun form ("list-centered" / "answer-centered")
• Even if there is an image, state the core message again as bullets
• If an explanation of the reason for the change or the process is needed, do not cram it into this type; separate it into the next slide

When there is no image

• .flow-col Omit the image slot inside — the card itself serves as a sufficient visual unit
• No separate placeholder component is needed

Situations not recommended

• When just one image and a few lines of explanation are enough → split or title-image
• When the time order continues long with 4 or more stages → steps
• When comparing 3 or more at the same time → compare