SuperAPI AI Directory
Partner中文AI newsFavorites
Skillshyperframes-slide-work-steps

hyperframes-slide-work-steps

Design & creation

View repository

Updated 10-15 20:04

About this skill

Steps Slide (HyperFrames)

When to use

  • When showing an ordered process
  • When explaining a workflow, pipeline, or procedure
  • evolution-flowWhen 3 or more steps are needed, unlike

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>
  <ol class="steps">
    <li class="step" id="s-N-step1">
      <div class="step-num">1</div>
      <div class="step-body">코드 커밋</div>
    </li>
    <li class="step" id="s-N-step2">
      <div class="step-num">2</div>
      <div class="step-body">CI 테스트 실행</div>
    </li>
    <li class="step" id="s-N-step3">
      <div class="step-num">3</div>
      <div class="step-body">스테이징 배포</div>
    </li>
    <li class="step" id="s-N-step4">
      <div class="step-num">4</div>
      <div class="step-body">프로덕션 릴리즈</div>
    </li>
  </ol>
</div>

CSS essentials

  • .steps — list-style: none; display: flex; flex-direction: column; gap: 28px; margin-top: 56px; position: relative
  • .step — display: flex; align-items: center; gap: 32px
  • .step-num — circular marker, width: 72px; height: 72px; border-radius: 50%; background: accent; color: bg; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; flex-shrink: 0
  • .step-body — 38–44px, weight 500, line-height 1.4
  • connecting line — .steps::before left vertical line with (content: ""; position: absolute; left: 36px; top: 36px; bottom: 36px; width: 2px; background: rgba(...))

GSAP entrance

const start = 28.0;
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-step1 .step-num",  { scale: 0, opacity: 0, duration: 0.5, ease: "back.out(1.7)" }, start + 0.9);
tl.from("#s-N-step1 .step-body", { x: 20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.0);
tl.from("#s-N-step2 .step-num",  { scale: 0, opacity: 0, duration: 0.5, ease: "back.out(1.7)" }, start + 1.2);
tl.from("#s-N-step2 .step-body", { x: 20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.3);
tl.from("#s-N-step3 .step-num",  { scale: 0, opacity: 0, duration: 0.5, ease: "back.out(1.7)" }, start + 1.5);
tl.from("#s-N-step3 .step-body", { x: 20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.6);
tl.from("#s-N-step4 .step-num",  { scale: 0, opacity: 0, duration: 0.5, ease: "back.out(1.7)" }, start + 1.8);
tl.from("#s-N-step4 .step-body", { x: 20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.9);
  • Numbered circle back.out appears with a bounce, body comes in from the side in an alternating rhythm
  • The connecting line can also be drawn scaleY: 0 → 1; transformOrigin: topas if flowing down

Markdown detection rules (when building a generator)

# [프로세스] 배포 파이프라인

1. 코드 커밋
2. CI 테스트 실행
3. 스테이징 배포
4. 프로덕션 릴리즈
  • 1. 2. Detected as a numbered list like
  • - distinguished from bullets (title-bullets)

steps vs title-bullets vs evolution-flow

Situation Type
Step-by-step flow where order matters steps
Unordered listing title-bullets
Comparison of 2 states (before/after) evolution-flow

Writing principles

  • 3-5 steps is appropriate
  • Keep each step short, one line
  • If order doesn't matter, title-bullets
  • Numbered circular marker + vertical connecting line is the default layout