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

hyperframes-slide-work-title-image

Design & creation

View repository

Updated 10-15 20:10

About this skill

Title Image Slide (HyperFrames)

When to use

  • When a large title and a single representative image are the core of the message
  • Covers, product introductions, service introductions, screenshot introductions

HTML structure

<div id="s-N" class="scene clip title-image"
     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="image-frame">
    <img src="assets/01-image-name.png" alt="설명" crossorigin="anonymous" />
  </div>
</div>

CSS essentials

  • .scene.title-image — align-items: center; text-align: center (vertically centered, horizontally centered)
  • .image-frame — width: 100%; max-width: 1400px; aspect-ratio: 16/9, margin-top: 48px, choose corner rounding
  • .image-frame img — width: 100%; height: 100%; object-fit: contain
  • Contingency when there is no image .image-frameSet its own placeholder style with a theme translucent background (rgba(255,255,255,0.06)) and a dashed border

GSAP entrance

const start = 11.2;
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 .scene-subtitle", {         opacity: 0, duration: 0.6, ease: "power2.out" }, start + 0.9);
tl.from("#s-N .image-frame",    { y: 60, opacity: 0, scale: 0.95, duration: 0.9, ease: "power3.out" }, start + 1.2);
  • Images from bottom to top rise up with a slight scale up by default
  • Keep the order title → subtext → image

Layout

  • Vertical centering: badge → title → subtext → image stacked from top to bottom
  • All elements horizontally centered
  • position: absolute Avoid images — manage size within the flow

Markdown detection rules (when building a generator)

# [뱃지] 타이틀
서브텍스트

![](01-image.png)

Writing principles

  • The title is the star and the image is supporting evidence
  • Place images under the project assets/ and reference them by relative path
  • For image filenames, 01-slide-description.pnglike 번호-설명.확장자 rule recommended
  • Keep subtext short at 1–2 lines
  • If the image is strong, make the title shorter; if the image is weak, make the title clear

When there is no image

  • On the empty .image-frame itself, place a dashed border + faint background to visually indicate "an image goes here"
  • There is no automatic placeholder component — the CSS default acts as the placeholder
  • When the actual image is ready, <img>just fill it in