SuperAPI AI Directory
Partner中文AI newsFavorites
Skillshyperframes-slide-work-title-bullets

hyperframes-slide-work-title-bullets

Frontend & websites

View repository

Updated 10-15 20:04

About this skill

Title Bullets Slide (HyperFrames)

When to use

  • The most basic form for concept explanations, summarizing key points, and developing core arguments
  • When putting the message itself front and center without images

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>
  <ul class="bullets">
    <li id="s-N-b1"><strong>강조어</strong> — 설명 항목 1</li>
    <li id="s-N-b2">설명 항목 2</li>
    <li id="s-N-b3">설명 항목 3</li>
  </ul>
</div>

CSS essentials

  • .scene-title — 88–120px, weight 800, negative letter-spacing, within 2 lines
  • .bullets — list-style: none; display: flex; flex-direction: column; gap: 24–28px
  • .bullets li — 38–44px, weight 400, line-height 1.45, padding-left: 56px, word-break: keep-all
  • .bullets li::before — left line marker (content: ""; width: 32px; height: 2px; position: absolute)
  • .bullets li strong — accent color + weight 700

GSAP entrance

const start = 5.6; // data-start
tl.from("#s-N .eyebrow",     { x: -20, 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-b1", { x: -20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 0.9);
tl.from("#s-N-b2", { x: -20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.05);
tl.from("#s-N-b3", { x: -20, opacity: 0, duration: 0.5, ease: "power2.out" }, start + 1.2);
  • Stagger between bullets 0.12–0.15s
  • Give each bullet an id for independent control (or group them with the stagger option)

Markdown detection rules (when building a generator)

# [뱃지] 타이틀

- 불릿 항목 1
- 불릿 항목 2
- 불릿 항목 3

Writing principles

  • No more than 4 bullets per slide
  • Keep each bullet short, one sentence
  • The first bullet must be the most important message
  • When an image becomes necessary, split or title-imageswitch to

Layout judgment

  • The default is a single-column bullet list
  • If there are many bullets or all 3–4 bullets are at least medium length, you can switch to a two-column layout (grid-template-columns: 1fr 1fr)
  • The purpose of two columns is not to increase information but to improve readability at the same density
  • Even with two columns, maintain the priority starting from the first bullet
  • If it is too long and even two columns do not solve it, split the slide into two

Two-column recommended / not recommended

Situation 1단 / 2단
4 bullets, each of similar length Two-column recommended
3 bullets, but each is 2 lines or more Two-column recommended
Comparing two groups in parallel Two-column recommended
2 bullets or fewer 1단
Only the first bullet is overwhelmingly important 1단
A sequential flow that must be read top to bottom 1단