| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Bold Poster · Editorial Statement Frame</title> |
| 6 | <link href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Libre+Baskerville:ital@0;1&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" /> |
| 7 | <style> |
| 8 | /* |
| 9 | * frame-bold-poster — 1970s European editorial poster, in motion. |
| 10 | * Visual vocabulary distilled from the frontend-slides "Bold Poster" template |
| 11 | * (MIT, © Zara Zhang). Rebuilt as a self-contained CSS @keyframes timeline for |
| 12 | * html-video / Hyperframes — no upstream source HTML copied. |
| 13 | * |
| 14 | * Palette (from upstream design.md): white sheet, brown-black ink #1C1410, |
| 15 | * one tomato red #D8000F, warm off-white #F5F2EF. |
| 16 | * Type stack: Shrikhand (display + figures), Libre Baskerville (body), |
| 17 | * Space Grotesk (mono labels / chrome). |
| 18 | * Signature move: display Shrikhand is tilted -6deg..+2deg; red is the only accent. |
| 19 | * |
| 20 | * Timeline (~4.5s @ 60fps): off-white sheet settles -> top hairline + mono kicker |
| 21 | * rule across -> giant red figure rotates+drops in -> three-line ink/red headline |
| 22 | * rises line-by-line (each on its own tilt) -> serif standfirst fades -> |
| 23 | * footer rule + mono metadata draw in. |
| 24 | */ |
| 25 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 26 | body { |
| 27 | width: 1920px; height: 1080px; overflow: hidden; |
| 28 | background: #F5F2EF; color: #1C1410; |
| 29 | font-family: 'Space Grotesk', sans-serif; position: relative; |
| 30 | } |
| 31 | |
| 32 | /* full-bleed paper, fades up first so the cut feels printed not lit */ |
| 33 | .sheet { position: absolute; inset: 0; background: #F5F2EF; |
| 34 | opacity: 0; animation: sheetIn 0.5s ease-out forwards; } |
| 35 | @keyframes sheetIn { to { opacity: 1; } } |
| 36 | |
| 37 | /* top kicker: mono label + a red rule that draws across */ |
| 38 | .kicker { position: absolute; top: 92px; left: 110px; right: 110px; |
| 39 | display: flex; align-items: center; gap: 28px; } |
| 40 | .kicker .label { font-size: 22px; font-weight: 700; letter-spacing: 6px; |
| 41 | text-transform: uppercase; color: #1C1410; white-space: nowrap; |
| 42 | opacity: 0; animation: fade 0.5s ease-out 0.35s forwards; } |
| 43 | .kicker .rule { flex: 1; height: 3px; background: #D8000F; transform-origin: left center; |
| 44 | transform: scaleX(0); animation: ruleX 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s forwards; } |
| 45 | .kicker .date { font-size: 22px; font-weight: 500; letter-spacing: 3px; |
| 46 | text-transform: uppercase; color: #1C1410; white-space: nowrap; |
| 47 | opacity: 0; animation: fade 0.5s ease-out 0.55s forwards; } |
| 48 | @keyframes ruleX { to { transform: scaleX(1); } } |
| 49 | |
| 50 | /* giant red figure — the poster's loudest move, rotates + drops in */ |
| 51 | .figure { position: absolute; top: 150px; right: 96px; font-family: 'Shrikhand', cursive; |
| 52 | font-size: 320px; line-height: 0.8; color: #D8000F; letter-spacing: 1px; |
| 53 | opacity: 0; transform: translateY(-60px) rotate(-14deg); |
| 54 | animation: figureIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.7s forwards; } |
| 55 | @keyframes figureIn { to { opacity: 1; transform: translateY(0) rotate(-6deg); } } |
| 56 | |
| 57 | /* three-line headline, each line its own tilt, rising in sequence */ |
| 58 | .head { position: absolute; left: 110px; bottom: 300px; font-family: 'Shrikhand', cursive; |
| 59 | line-height: 0.86; } |
| 60 | .head .ln { display: block; font-size: 150px; opacity: 0; transform: translateY(40px); } |
| 61 | .head .ln1 { color: #1C1410; transform-origin: left bottom; animation: lineUp 0.7s cubic-bezier(0.16,1,0.3,1) 1.15s forwards; } |
| 62 | .head .ln2 { color: #D8000F; animation: lineUpTilt 0.7s cubic-bezier(0.16,1,0.3,1) 1.35s forwards; } |
| 63 | .head .ln3 { color: #1C1410; animation: lineUpTilt2 0.7s cubic-bezier(0.16,1,0.3,1) 1.55s forwards; } |
| 64 | @keyframes lineUp { to { opacity: 1; transform: translateY(0) rotate(-2deg); } } |
| 65 | @keyframes lineUpTilt { to { opacity: 1; transform: translateY(0) rotate(-4deg); } } |
| 66 | @keyframes lineUpTilt2 { to { opacity: 1; transform: translateY(0) rotate(2deg); } } |
| 67 | |
| 68 | /* serif standfirst */ |
| 69 | .standfirst { position: absolute; left: 114px; bottom: 200px; max-width: 980px; |
| 70 | font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 34px; |
| 71 | line-height: 1.4; color: #1C1410; |
| 72 | opacity: 0; animation: fadeUp 0.7s ease-out 1.95s forwards; } |
| 73 | @keyframes fadeUp { 0%{opacity:0;transform:translateY(22px)} 100%{opacity:1;transform:translateY(0)} } |
| 74 | |
| 75 | /* footer: ink rule + mono metadata */ |
| 76 | .footer { position: absolute; left: 110px; right: 110px; bottom: 96px; } |
| 77 | .footer .rule { height: 2px; background: #1C1410; transform-origin: left center; |
| 78 | transform: scaleX(0); animation: ruleX 0.7s cubic-bezier(0.16,1,0.3,1) 2.15s forwards; } |
| 79 | .footer .meta { display: flex; justify-content: space-between; margin-top: 18px; |
| 80 | font-size: 18px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; |
| 81 | color: #1C1410; opacity: 0; animation: fade 0.6s ease-out 2.4s forwards; } |
| 82 | .footer .meta .red { color: #D8000F; } |
| 83 | |
| 84 | @keyframes fade { to { opacity: 1; } } |
| 85 | |
| 86 | @media (prefers-reduced-motion: reduce) { |
| 87 | * { animation: none !important; } |
| 88 | .sheet { opacity: 1; } |
| 89 | .kicker .label, .kicker .date { opacity: 1; } |
| 90 | .kicker .rule, .footer .rule { transform: scaleX(1); } |
| 91 | .figure { opacity: 1; transform: rotate(-6deg); } |
| 92 | .head .ln1 { opacity: 1; transform: rotate(-2deg); } |
| 93 | .head .ln2 { opacity: 1; transform: rotate(-4deg); } |
| 94 | .head .ln3 { opacity: 1; transform: rotate(2deg); } |
| 95 | .standfirst, .footer .meta { opacity: 1; transform: none; } |
| 96 | } |
| 97 | </style> |
| 98 | </head> |
| 99 | <body> |
| 100 | <div class="sheet"></div> |
| 101 | |
| 102 | <div class="kicker"> |
| 103 | <span class="label">Manifesto</span> |
| 104 | <span class="rule"></span> |
| 105 | <span class="date">Vol. 04 · 2026</span> |
| 106 | </div> |
| 107 | |
| 108 | <div class="figure">03</div> |
| 109 | |
| 110 | <div class="head"> |
| 111 | <span class="ln ln1">Make it</span> |
| 112 | <span class="ln ln2">loud.</span> |
| 113 | <span class="ln ln3">Make it last.</span> |
| 114 | </div> |
| 115 | |
| 116 | <div class="standfirst">Every slide should land like a printed page — set in heavy type, locked to one red accent, ruled in ink.</div> |
| 117 | |
| 118 | <div class="footer"> |
| 119 | <div class="rule"></div> |
| 120 | <div class="meta"> |
| 121 | <span>Bold Poster</span> |
| 122 | <span class="red">html-video</span> |
| 123 | </div> |
| 124 | </div> |
| 125 | </body> |
| 126 | </html> |
| 127 |