[Template: Electric Studio Split-Screen Frame (Electric Studio)] [Intent] pull-quote / endorsement / mission statement / high-contrast headline. Visual distilled from the Electric Studio preset of frontend-slides (MIT, © Zara Zhang).
[Canvas] 1920×1080, white upper screen (540px) + electric blue lower screen (#4361ee, 540px), split by a center line.
[Fonts] both display + body use Manrope 800/700/500/400。
[Main structure (timeline, default 4s)]
- 0.1s The upper screen falls from translateY(-100%), the lower screen rises from translateY(100%), simultaneously "opening/closing" into place from the center (expo-out).
- 0.9s At the seam, a black accent bar (8px high) grows from width 0 → 320px.
- Starting at 1.0s the quote appears line by line (each line .ln, staggered 150ms, translateY 26→0); lines crossing into the blue screen use white (
.on-blue)。font-size 96px, weight 800。 - 2.2s Lower-screen attribution (name 28px 700 + role uppercase 0.7 opacity, white) fades in.
- 2.5s Top-right brand mark (dark) + bottom-right brand mark (white 0.6) fade in.
[Color discipline] White / electric blue #4361ee / near-black #0a0a0a three colors. The accent bar and brand words use black/white, blue is the large color block.Forbiddenfourth primary color.
[Content discipline]
- Split the quote into 2-4 lines, letting 1-2 lines land on the blue screen (change the
.on-blueclass) to create cross-screen contrast. - Must use a real quote/statement, lorem ipsum is strictly forbidden.
- For animation use
@keyframes,prefers-reduced-motionall stop at the final state. - Single-file HTML.