[Template: Bold Signal Card Frame (Bold Signal)] [Intent] Chapter/paragraph divider / bold launch statement / high-impact title card. Visual distilled from the Bold Signal preset of frontend-slides (MIT, © Zara Zhang).
[Canvas] 1920×1080, dark background #1a1a1a + 135° gradient (#1a1a1a → #2d2d2d → #1a1a1a)。
[Font] display Archivo Black (900); body Space Grotesk 400/500/700。
[Main structure (timeline, default 4s)]
- 0.2s Top-left giant section number (
Archivo Black96px, e.g.01/04, opacity 0.3 after the slash) rolls in from above. - Starting at 0.4s top-right nav breadcrumb staggers in with fade: active item
#FF5722orange opacity 1, the rest white opacity 0.35. - 0.6s Orange focus card (
#FF5722, 36px rounded corners on the left side only, occupying ~1180px on the right) slides in from translateX(110%), with a soft orange shadow. - 1.15s Label inside the card (uppercase, letter-spacing 4px) fadeUp.
- 1.3s Large title inside the card (
Archivo Black130px, dark#1a1a1aon orange) fadeUp. - 1.6s Bottom-left footer (orange tick short bar + system label) fades in.
[Color discipline] Dark background grayscale + single accent color #FF5722 orange (focus card / active nav / footer tick). Can be swapped for coral/vibrant accent butuse only one throughout the entire pieceaccent color. Use dark text on the card to ensure contrast.
[Content discipline]
- title 1-2 lines, must use a real title, lorem ipsum strictly prohibited.
- nav breadcrumb reflects the real chapter structure, first item active.
- Animations use
@keyframes,prefers-reduced-motionall stop at the final state. - Single-file HTML.