When to use
- When a single title is the entire message, such as an opening, section divider, or closing
- When creating impact through typography alone, without images, bullets, or tags
- When signaling a "brief pause" and "topic transition" in the presentation flow
HTML structure
<div id="s-1" class="scene clip center"
data-start="0" data-duration="6" data-track-index="0">
<div class="eyebrow">카테고리 · 서브라벨</div>
<div class="hero-title">메인 타이틀</div>
<div class="hero-sub">보조 설명 (선택)</div>
</div>
CSS essentials
.scene.center—justify-content: center; align-items: center; text-align: center.eyebrow— 24–32px, weight 500, letter-spacing 6–8px, uppercase, dim 색.hero-title— 280–340px, weight 800, negative letter-spacing, optional gradient text-clip.hero-sub— 36–42px, weight 400, dim 색- Background is a solid color or a very faint radial gradient — the title itself is the star
GSAP entrance
const start = 0; // data-start 값
tl.from("#s-1 .eyebrow", { y: -20, opacity: 0, duration: 0.7, ease: "power3.out" }, start + 0.3);
tl.from("#s-1 .hero-title", { y: 80, opacity: 0, duration: 1.1, ease: "expo.out" }, start + 0.6);
tl.from("#s-1 .hero-sub", { opacity: 0, duration: 0.8, ease: "power2.out" }, start + 1.4);
- Mix at least 3 kinds of eases (the example above uses power3.out / expo.out / power2.out)
- Don't start immediately at t=0; use a 0.1–0.3s offset
Markdown detection rules (when building a generator)
# [뱃지] 타이틀
서브텍스트 (선택)
If below the heading there is only plain text or it is empty, without bullets (-)、tags (>)、images (![]())、or evolution markers (<</>>) title detect it as the type.
Writing principles
- The title should be short, strong, and one line
- Subtext should be within 1 line — if it gets longer,
title-bulletsswitch to - If bullets are needed, don't use this type; use
title-bullets - Since only the title appears large in the center of the screen, the title itself must convey enough meaning
title vs title-bullets distinction
| Situation | Type |
|---|---|
| Title only, or title + short subtext | title |
| Title + list of explanatory items | title-bullets |
If the markdown contains even one - bullet, detect it as title-bullets.