[Template: Creative Voltage Split-Screen Frame (Creative Voltage)] [Intent] Energetic brand/event title / creative reveal with a handwritten human touch / retro-modern hero. Visual distilled from the Creative Voltage preset of frontend-slides (MIT, © Zara Zhang).
[Canvas] 1920×1080, left electric-blue screen (#2f4bff, 47%) + right dark screen (#0d0d14, 53%), offset split.
[Fonts] display Syne 800; mono Space Mono; handwritten Caveat。
[Main structure (timeline, default 4s)]
- 0.1s Left blue screen slides in from translateX(-100%); 0.25s right dark screen slides in from translateX(100%) (staggered, expo-out).
- 0.9s Electric highlight wash fades in at the top-left of the blue screen.
- 1.0s Mono meta line (
// CREATIVE_MODE · ON) fades in at the top-left of the blue screen. - Starting at 1.0s the display title on the right screen rises line by line (each line .ln, staggered 180ms); one line uses
.voltan outlined electric word (-webkit-text-stroke+ blue fill). font-size 132px, right-aligned. - 1.4s Handwritten script on the blue screen (
Caveat, rotate -7°) pops in. - 1.9s Hand-drawn underline below the script (SVG path, stroke-dashoffset drawn out).
- 2.2s Mono caption at the bottom right fades in.
[Color discipline] Electric blue #2f4bff/#6f86ff / dark #0d0d14 / white. Blue is the primary energy color; the outlined word and script create the "voltage" contrast.Forbiddenmiscellaneous colors.
[Content discipline]
- Split display into 2-4 lines, choose one word for
.voltoutline emphasis. - script is a short handwritten phrase (≤24 characters), giving the image a human touch.
- Must use a real title, lorem ipsum is strictly forbidden.
- For animation use
@keyframes+ SVG stroke,prefers-reduced-motionall stop at the final state. - Single-file HTML.