SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillshyperframes-slide-work-quote

hyperframes-slide-work-quote

Frontend & websites

View repository

Updated 10-15 20:10

About this skill

Quote Slide (HyperFrames)

When to use

  • When you want to leave a strong core message
  • When showing a quotation, famous saying, or user feedback
  • When pausing briefly in the presentation flow to add rhythm

HTML structure

<div id="s-N" class="scene clip quote"
     data-start="..." data-duration="6" data-track-index="0">
  <div class="eyebrow">카테고리 · 인사이트</div>
  <div class="quote-mark">"</div>
  <div class="quote-body">좋은 디자인은 <em>가능한 적게</em> 디자인하는 것이다</div>
  <div class="quote-attrib">— Dieter Rams</div>
</div>

CSS essentials

  • .scene.quote — justify-content: center; align-items: center; text-align: center
  • .quote-mark — 200–240px, weight 900, accent 색, opacity: 0.35, line-height: 0.7
  • .quote-body — 72–96px, weight 600–700, line-height 1.35, max-width 1500px, word-break: keep-all
  • .quote-body em — font-style: normal, gradient text-clip or accent color
  • .quote-attrib — 28–36px, weight 500, dim 색, letter-spacing 2–4px, margin-top: 40–48px

GSAP entrance

const start = 33.6;
tl.from("#s-N .eyebrow",      { opacity: 0, duration: 0.6, ease: "power2.out" }, start + 0.2);
tl.from("#s-N .quote-mark",   { scale: 0.3, opacity: 0, duration: 0.8, ease: "back.out(1.8)" }, start + 0.5);
tl.from("#s-N .quote-body",   { y: 40, opacity: 0, duration: 1.0, ease: "expo.out" }, start + 0.9);
tl.from("#s-N .quote-attrib", { opacity: 0, duration: 0.7, ease: "power2.out" }, start + 1.8);
  • Quotation marks appear with back.out to differentiate the rhythm
  • The body rises from below with a long motion using expo.out

Markdown detection rules (when building a generator)

# [인사이트] 핵심 메시지

"" 좋은 디자인은 가능한 적게 디자인하는 것이다
— Dieter Rams
  • "" A line starting with is a quotation sentence
  • — or -- A line starting with is the source (optional)

Writing principles

  • Keep the quotation to 1-2 lines
  • A source is not required (for emphasizing your own message)
  • Do not mix in bullets or tags — focus on the quotation itself
  • If the sentence is long, excerpt only the key part

When using as a closing slide

  • If it is the last scene of the composition, fade-out is allowed (the only exception in the entire composition)
  • If it is a middle scene, exit animation is forbidden — overlap with the next scene serves as the transition