Title Tags Slide (HyperFrames)
When to use
- When compressing and showing a concept as short keywords
- Tech stack, key attributes, comparison axes, summary index
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="scene-subtitle">보조 설명 (선택)</div>
<div class="tags">
<div class="tag">태그1</div>
<div class="tag">태그2</div>
<div class="tag accent">강조태그</div>
<div class="tag">태그4</div>
<div class="tag">태그5</div>
</div>
</div>
CSS essentials
.tags — display: flex; flex-wrap: wrap; gap: 20–24px; margin-top: 56px.tag — padding: 18–20px 32–36px; border-radius: 999px; font-size: 36–42px; font-weight: 700
- Background is theme transparent white (
rgba(255,255,255,0.18)) or a light tint
- Border is a light outline (
border: 2px solid rgba(0,0,0,0.15) or the opposite)
.tag.accent — accent color background + contrasting text color
GSAP entrance
const start = 16.8;
tl.from("#s-N .eyebrow", { scale: 0.85, opacity: 0, duration: 0.5, ease: "back.out(1.6)" }, 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 .tag", {
y: 24, opacity: 0, duration: 0.45, ease: "power2.out",
stagger: 0.08,
}, start + 0.9);
- Tags appear all at once with stagger (0.06–0.1s interval)
- Only one accent tag
scale or you may differentiate it with a different ease
Markdown detection rules (when building a generator)
# [뱃지] 타이틀
보조 설명
> 태그1, *강조태그*, 태그3
> A line starting with is a tag bundle*키워드*is treated as an accent tag
Writing principles
- 3–5 tags is appropriate (up to 8 allowed, but check readability)
- Each tag is a short noun phrase
- Only 1 emphasis tag — using several weakens the emphasis effect
- If a tag gets long,
title-bulletsswitch to
