hyperframes-card-news-work-image-feature

Card News Work: Image Feature

Role

image-featureis an explanatory card used when an image is the center of the story. It shows a photo, product shot, poster, or screenshot first, then attaches a headline and short body text below.

When using a newly generated image or edited poster for AI news at the center, hyperframes-card-news-fomo-image-directionis applied together. If an actual product screen or official image explains the event more accurately, it takes priority over a generated image.

Allowed classes:

<div id="c-N" class="card clip image-feature"
     data-start="..." data-duration="5" data-track-index="0">

Structure

<div id="c-N" class="card clip image-feature"
     data-start="15" data-duration="5" data-track-index="0">
  <div class="feature-bg" aria-hidden="true"
       style="background-image: url('assets/featured.jpg');"></div>
  <div class="feature-content">
    <div class="feature-frame">
      <img src="assets/featured.jpg" alt="설명" />
    </div>
    <div class="feature-headline">이미지가 전하는 메시지 한 줄</div>
    <div class="feature-body">
      <p>본문 첫 번째 단락.</p>
      <p>본문 두 번째 단락.</p>
    </div>
  </div>
  <div class="page-indicator">04 · 08</div>
</div>

Content rules

An image must be present. Do not use it as a text card without an image.
One headline, 1-2 lines.
Body text is 2-3 <p>, each paragraph centered on 1 sentence.
Split long chronologies or multiple bullets across several cards.

AI news image rules

Explanatory value takes priority over the cover. First look for images that directly prove the body facts, such as official product screens, before-and-after feature comparisons, or actual results.
If a generated image is needed, translate the news event into one visual metaphor, but avoid generic AI workspace or robot images like the cover.
Remove arbitrary Korean text, numbers, logos, and UI inside the image, and place the necessary information accurately as HTML/CSS text.
Do not repeat the same generated image across multiple cards in a way that makes the information look different.
Mark generated or staged images that look photorealistic on the card or in the caption.

CSS rules

.card.image-feature {
  padding: 0;
  overflow: hidden;
}
.image-feature .feature-bg {
  position: absolute;
  inset: -40px;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(48px) brightness(0.45);
  transform: scale(1.12);
}
.image-feature .feature-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 88px 72px 112px;
  display: flex;
  flex-direction: column;
}
.image-feature .feature-frame {
  width: 100%;
  height: 420-620px;
  border-radius: 12-28px;
  overflow: hidden;
}
.image-feature .feature-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-feature .feature-headline {
  margin-top: 48-64px;
  font-size: 56-76px;
  font-weight: 700-850;
  line-height: 1.06-1.25;
}
.image-feature .feature-body p {
  font-size: 28-32px;
  line-height: 1.40-1.55;
}

Background image rules

Add the blur background with CSS background-image.
If the same image is also used as <img>, the linter may produce a duplicate_media_discovery_risk warning. To reduce warnings, replace the background with a gradient or solid color.
On dark cards, brightness(0.45), and on bright Apple-style cards, brightness(1.08) saturate(0.88); opacity: 0.30can be adjusted.

GSAP

tl.from("#c-N .feature-bg", { scale: 1.18, duration: 1.1, ease: "power2.out" }, s);
tl.from("#c-N .feature-frame", { y: 26, opacity: 0, duration: 0.75, ease: "power3.out" }, s + 0.35);
tl.from("#c-N .feature-headline", { y: 26, opacity: 0, duration: 0.75, ease: "expo.out" }, s + 0.95);
tl.from("#c-N .feature-body p", { y: 16, opacity: 0, duration: 0.55, ease: "power2.out", stagger: 0.12 }, s + 1.35);
tl.from("#c-N .page-indicator", { opacity: 0, duration: 0.4, ease: "power2.out" }, s + 2.0);

Check

data-skill="image-feature"record in overview
If it is a new AI news image, apply hyperframes-card-news-fomo-image-directiontogether
If an official image or screenshot is available, it takes priority over a generated image
The image directly explains the body facts and is not generic
There are no errors in text, numbers, logos, or UI in the generated image
There is an image or visual frame
One headline, 2-3 body paragraphs
It has not degenerated into a text-only explanatory card