Role
photo-coveris the photo-type opening/closing card of card news. It places the brand handle and a 2-line headline on top of a full-bleed photo.
For new covers and representative images of AI news, hyperframes-card-news-fomo-image-directionis applied first to determine fact-checking, the protagonist, the visual metaphor, and A/B/C drafts, and then this skill is used to implement it.
Allowed classes:
<div id="c-N" class="card clip photo-cover"
data-start="..." data-duration="5" data-track-index="0">
Structure
<div id="c-N" class="card clip photo-cover"
data-start="0" data-duration="5" data-track-index="0">
<div class="bg-image">
<img src="assets/hook.jpg" alt="..." />
</div>
<div class="hook-handle">@handle_name</div>
<div class="hook-title">
<span class="line">헤드라인 첫째 줄</span>
<span class="line">헤드라인 둘째 줄</span>
</div>
<div class="page-indicator">01 · 08</div>
</div>
Optional elements:
.inset-avatar: Used only when a secondary person or product shot is absolutely necessary.
FOMO image selection rules
- In one image, keep only one protagonist, one object unique to the article, and one visual metaphor.
- Place subjects identifiable within 1 second, such as faces, products, smartphones, and official UI, large in the top 65-70%.
- Translate the event into a single scene, such as price/limits as a payment gate/vending machine, performance as a race/podium, and security as a crack/opened padlock.
어두운 방 + 노트북 + 홀로그램 + 평범한 로봇Reject generic images that could be reused in other AI articles, such as .- Prioritize official product images, screenshots, and real photos with clear usage permission, and do not trust the text, numbers, logos, or UI of generated images.
- Compose logos, prices, dates, and product names accurately in HTML/CSS, not with the model.
- Do not create fake on-site photos of real people or real events with AI. Unavoidable generated or staged images are marked on the card or in the caption.
- Choose one of the A/B/C drafts in which the protagonist is visible in the reduced feed. The selection criteria follow
hyperframes-card-news-fomo-image-direction.
CSS rules
.card.photo-cover:padding: 0,overflow: hidden..bg-image:position: absolute; inset: 0; z-index: 0..bg-image img:width: 100%; height: 100%; object-fit: cover..hook-handle: This is the brand/source identity. It must be placed on a black box.
.photo-cover .hook-handle {
position: absolute;
left: 72px;
bottom: 386px;
z-index: 3;
display: inline-flex;
width: max-content;
max-width: 760px;
padding: 12px 18px 13px;
border-radius: 8px;
background: rgba(0,0,0,0.82);
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
color: #fff;
}
.hook-title: Make the bottom 35% where the copy sits almost black. Prioritize readability over photo brightness.
.photo-cover .hook-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 260px 72px 142px;
z-index: 2;
background: linear-gradient(
to top,
rgba(0,0,0,0.96) 0%,
rgba(0,0,0,0.82) 34%,
rgba(0,0,0,0.48) 64%,
transparent 100%
);
}
.hook-title .line: 64-76px, weight 800-900, white, line-height 1.15-1.28.
GSAP
tl.from("#c-N .bg-image img", { scale: 1.08, duration: 1.2, ease: "power2.out" }, s);
tl.from("#c-N .hook-handle", { y: 20, opacity: 0, duration: 0.6, ease: "power2.out" }, s + 0.7);
tl.from("#c-N .hook-title .line", { y: 40, opacity: 0, duration: 0.7, ease: "expo.out", stagger: 0.12 }, s + 1.0);
tl.from("#c-N .page-indicator", { opacity: 0, duration: 0.5, ease: "power2.out" }, s + 2.0);
Check
-
data-skill="photo-cover"record in overview - If it is an AI news cover, apply
hyperframes-card-news-fomo-image-directiontogether - Even if the text is hidden, the article topic or event direction is readable
- Organized into one protagonist, one object unique to the article, and one metaphor
- Does not use generic AI workspace, robot, or hologram images
- The brand/source handle is on a black box
- The bottom copy area is sufficiently dark
- The photo is
assets/a relative path - Confirmed the misunderstanding-prevention label for generated or staged images
- Not used like a plain text description card