| 1 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" role="img" aria-label="Better Payment campaign video placeholder" preserveAspectRatio="xMidYMid slice"> |
| 2 |
<!-- |
| 3 |
Poster frame for the Campaign Builder's Video element on a FREE install. |
| 4 |
|
| 5 |
Drawn, never fetched: the builder must not pull a real thumbnail from |
| 6 |
img.youtube.com — that needs Pro-owned URL parsing and would send the admin's |
| 7 |
IP to Google on every preview render. See ProElementPreview::video(). |
| 8 |
|
| 9 |
Palette is deliberately the product's own: Better Payment indigo (#6b63f6 / |
| 10 |
#5a7ff0, shared with ai-default-hero.svg) lighting the top-left, Pro's orange |
| 11 |
(#ec6a2b / #f6a821) lighting the bottom-right. The heart-in-hands mark is the |
| 12 |
same one ai-default-hero.svg uses, so generated and placeholder campaign |
| 13 |
artwork read as one family. |
| 14 |
|
| 15 |
WHAT MAKES IT READ AS A PHOTOGRAPH RATHER THAN A DIAGRAM, in order of how much |
| 16 |
each one does — none of these are ornament, and removing them flattens it: |
| 17 |
1. A silhouetted crowd along the bottom. Flat vector panels (this used to be |
| 18 |
three grey "builder column" rectangles) look like a chart; out-of-focus |
| 19 |
people look like a frame from a campaign film, and fundraising is about |
| 20 |
people. It also creates a real foreground. |
| 21 |
2. Depth of field. The crowd and the bokeh are Gaussian-blurred at different |
| 22 |
radii, so the image has near/far planes instead of one flat sheet. |
| 23 |
3. Film grain over everything. This is the single cheapest realism cue — |
| 24 |
perfectly clean gradients read as vector art to the eye. |
| 25 |
4. Light shafts that fade out along their length, rather than flat-opacity |
| 26 |
diagonal bands, which read as stray geometry. |
| 27 |
|
| 28 |
THE CENTRE IS KEPT CLEAR ON PURPOSE. The red play pill sits dead centre and |
| 29 |
the "Get PRO to Unlock" button lands just below it; motifs live in the left and |
| 30 |
right thirds and along the bottom, so neither button ever covers artwork or |
| 31 |
fights it for attention. Anything added here must respect that gap. |
| 32 |
--> |
| 33 |
<defs> |
| 34 |
<linearGradient id="bpvBase" x1="0" y1="0" x2="1200" y2="675" gradientUnits="userSpaceOnUse"> |
| 35 |
<stop stop-color="#252c52"/> |
| 36 |
<stop offset="0.55" stop-color="#151b31"/> |
| 37 |
<stop offset="1" stop-color="#0a0e18"/> |
| 38 |
</linearGradient> |
| 39 |
|
| 40 |
<!-- Better Payment indigo, keying the scene from the top left. --> |
| 41 |
<radialGradient id="bpvGlowIndigo" cx="230" cy="140" r="560" gradientUnits="userSpaceOnUse"> |
| 42 |
<stop stop-color="#6b63f6" stop-opacity="0.55"/> |
| 43 |
<stop offset="1" stop-color="#6b63f6" stop-opacity="0"/> |
| 44 |
</radialGradient> |
| 45 |
|
| 46 |
<radialGradient id="bpvGlowBlue" cx="690" cy="250" r="430" gradientUnits="userSpaceOnUse"> |
| 47 |
<stop stop-color="#5a7ff0" stop-opacity="0.26"/> |
| 48 |
<stop offset="1" stop-color="#5a7ff0" stop-opacity="0"/> |
| 49 |
</radialGradient> |
| 50 |
|
| 51 |
<!-- Pro's orange, answering from the bottom right. --> |
| 52 |
<radialGradient id="bpvGlowPro" cx="1010" cy="600" r="520" gradientUnits="userSpaceOnUse"> |
| 53 |
<stop stop-color="#ec6a2b" stop-opacity="0.42"/> |
| 54 |
<stop offset="1" stop-color="#ec6a2b" stop-opacity="0"/> |
| 55 |
</radialGradient> |
| 56 |
|
| 57 |
<linearGradient id="bpvProBar" x1="0" y1="0" x2="1" y2="0"> |
| 58 |
<stop stop-color="#f6a821"/> |
| 59 |
<stop offset="1" stop-color="#ec6a2b"/> |
| 60 |
</linearGradient> |
| 61 |
|
| 62 |
<!-- Light shafts fade along their length instead of being flat bands. --> |
| 63 |
<linearGradient id="bpvShaft" x1="0" y1="0" x2="0" y2="675" gradientUnits="userSpaceOnUse"> |
| 64 |
<stop stop-color="#ffffff" stop-opacity="0.10"/> |
| 65 |
<stop offset="0.55" stop-color="#ffffff" stop-opacity="0.035"/> |
| 66 |
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/> |
| 67 |
</linearGradient> |
| 68 |
|
| 69 |
<!-- Warm floor bounce under the crowd. --> |
| 70 |
<linearGradient id="bpvFloor" x1="0" y1="470" x2="0" y2="675" gradientUnits="userSpaceOnUse"> |
| 71 |
<stop stop-color="#0a0e18" stop-opacity="0"/> |
| 72 |
<stop offset="1" stop-color="#05070d" stop-opacity="0.72"/> |
| 73 |
</linearGradient> |
| 74 |
|
| 75 |
<radialGradient id="bpvHeartHalo" cx="232" cy="330" r="215" gradientUnits="userSpaceOnUse"> |
| 76 |
<stop stop-color="#a9b4ff" stop-opacity="0.20"/> |
| 77 |
<stop offset="1" stop-color="#a9b4ff" stop-opacity="0"/> |
| 78 |
</radialGradient> |
| 79 |
|
| 80 |
<!-- Darkens the edges so the duration pill stays legible. --> |
| 81 |
<radialGradient id="bpvVignette" cx="600" cy="338" r="720" gradientUnits="userSpaceOnUse"> |
| 82 |
<stop offset="0.45" stop-color="#000000" stop-opacity="0"/> |
| 83 |
<stop offset="1" stop-color="#000000" stop-opacity="0.55"/> |
| 84 |
</radialGradient> |
| 85 |
|
| 86 |
<filter id="bpvBokeh" x="-30%" y="-30%" width="160%" height="160%"> |
| 87 |
<feGaussianBlur stdDeviation="26"/> |
| 88 |
</filter> |
| 89 |
<filter id="bpvCrowdFar" x="-20%" y="-20%" width="140%" height="140%"> |
| 90 |
<feGaussianBlur stdDeviation="3.5"/> |
| 91 |
</filter> |
| 92 |
<filter id="bpvCrowdNear" x="-20%" y="-20%" width="140%" height="140%"> |
| 93 |
<feGaussianBlur stdDeviation="9"/> |
| 94 |
</filter> |
| 95 |
<filter id="bpvShaftSoft" x="-20%" y="-20%" width="140%" height="140%"> |
| 96 |
<feGaussianBlur stdDeviation="14"/> |
| 97 |
</filter> |
| 98 |
|
| 99 |
<!-- Film grain. Desaturated fractal noise, laid over the whole frame. --> |
| 100 |
<filter id="bpvGrain" x="0" y="0" width="100%" height="100%"> |
| 101 |
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/> |
| 102 |
<feColorMatrix type="saturate" values="0"/> |
| 103 |
</filter> |
| 104 |
</defs> |
| 105 |
|
| 106 |
<rect width="1200" height="675" fill="url(#bpvBase)"/> |
| 107 |
<rect width="1200" height="675" fill="url(#bpvGlowIndigo)"/> |
| 108 |
<rect width="1200" height="675" fill="url(#bpvGlowBlue)"/> |
| 109 |
<rect width="1200" height="675" fill="url(#bpvGlowPro)"/> |
| 110 |
|
| 111 |
<!-- Light shafts, softened and faded. --> |
| 112 |
<g filter="url(#bpvShaftSoft)" fill="url(#bpvShaft)"> |
| 113 |
<path d="M170 675 L630 -40 L742 -40 L282 675 Z"/> |
| 114 |
<path d="M470 675 L930 -40 L986 -40 L526 675 Z"/> |
| 115 |
</g> |
| 116 |
|
| 117 |
<!-- Out-of-focus bokeh — the far plane. --> |
| 118 |
<g filter="url(#bpvBokeh)"> |
| 119 |
<circle cx="128" cy="96" r="58" fill="#ffffff" opacity="0.07"/> |
| 120 |
<circle cx="1094" cy="536" r="92" fill="#ffb27a" opacity="0.10"/> |
| 121 |
<circle cx="1016" cy="112" r="30" fill="#ffffff" opacity="0.09"/> |
| 122 |
<circle cx="196" cy="576" r="24" fill="#ffffff" opacity="0.08"/> |
| 123 |
<circle cx="880" cy="330" r="36" fill="#ffd0a8" opacity="0.07"/> |
| 124 |
</g> |
| 125 |
|
| 126 |
<!-- ── Left third: heart-in-hands, shared with ai-default-hero.svg ── --> |
| 127 |
<rect x="0" y="100" width="470" height="470" fill="url(#bpvHeartHalo)"/> |
| 128 |
<g transform="translate(232 330) scale(0.60)" fill="#ffffff" opacity="0.17"> |
| 129 |
<path d="M-190 70 C-150 150 -70 190 0 190 C70 190 150 150 190 70 C150 120 70 145 0 145 C-70 145 -150 120 -190 70 Z"/> |
| 130 |
<path d="M-150 40 C-120 108 -60 140 0 140 C60 140 120 108 150 40 C120 82 60 104 0 104 C-60 104 -120 82 -150 40 Z" opacity="0.6"/> |
| 131 |
<path d="M0 -30 C-26 -84 -108 -80 -132 -24 C-152 22 -120 66 -60 112 L0 156 L60 112 C120 66 152 22 132 -24 C108 -80 26 -84 0 -30 Z"/> |
| 132 |
</g> |
| 133 |
|
| 134 |
<!-- ── Right third: a campaign progress card — the Campaign Builder motif ── --> |
| 135 |
<g transform="translate(838 218)"> |
| 136 |
<rect x="0" y="0" width="270" height="176" rx="18" |
| 137 |
fill="#ffffff" fill-opacity="0.07" |
| 138 |
stroke="#ffffff" stroke-opacity="0.20" stroke-width="2"/> |
| 139 |
<rect x="26" y="30" width="146" height="12" rx="6" fill="#ffffff" opacity="0.42"/> |
| 140 |
<rect x="26" y="54" width="196" height="8" rx="4" fill="#ffffff" opacity="0.18"/> |
| 141 |
<rect x="26" y="88" width="218" height="12" rx="6" fill="#ffffff" opacity="0.18"/> |
| 142 |
<rect x="26" y="88" width="142" height="12" rx="6" fill="url(#bpvProBar)"/> |
| 143 |
<rect x="26" y="114" width="62" height="8" rx="4" fill="#ffffff" opacity="0.34"/> |
| 144 |
<rect x="182" y="114" width="62" height="8" rx="4" fill="#ffffff" opacity="0.20"/> |
| 145 |
<rect x="26" y="138" width="112" height="22" rx="11" fill="#ffffff" opacity="0.30"/> |
| 146 |
</g> |
| 147 |
|
| 148 |
<!-- ── Donation coins ── --> |
| 149 |
<g opacity="0.15"> |
| 150 |
<circle cx="1052" cy="176" r="24" fill="none" stroke="#ffffff" stroke-width="3"/> |
| 151 |
<path d="M1052 163 v26 M1046 169 h9 a4.6 4.6 0 0 1 0 9 h-8 a4.6 4.6 0 0 0 0 9 h9" |
| 152 |
fill="none" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round"/> |
| 153 |
</g> |
| 154 |
<g opacity="0.10"> |
| 155 |
<circle cx="742" cy="470" r="17" fill="none" stroke="#ffffff" stroke-width="3"/> |
| 156 |
<path d="M742 461 v18 M737 465 h6.5 a3.4 3.4 0 0 1 0 6.6 h-5.6 a3.4 3.4 0 0 0 0 6.6 h6.5" |
| 157 |
fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"/> |
| 158 |
</g> |
| 159 |
|
| 160 |
<!-- Floor bounce, sitting under the crowd so they read as standing in it. --> |
| 161 |
<rect x="0" y="470" width="1200" height="205" fill="url(#bpvFloor)"/> |
| 162 |
|
| 163 |
<!-- ── Foreground: a silhouetted crowd of supporters ── |
| 164 |
Two planes at different blur radii. Heads sit above the bottom edge and |
| 165 |
shoulders run off it, so the crowd is cropped by the frame the way a real |
| 166 |
foreground would be. --> |
| 167 |
<g fill="#05070d"> |
| 168 |
<g filter="url(#bpvCrowdFar)" opacity="0.62"> |
| 169 |
<g transform="translate(96 600)"><circle cy="-26" r="21"/><path d="M-42 75 q0 -68 42 -68 q42 0 42 68 Z"/></g> |
| 170 |
<g transform="translate(214 616)"><circle cy="-22" r="18"/><path d="M-36 59 q0 -58 36 -58 q36 0 36 58 Z"/></g> |
| 171 |
<g transform="translate(330 604)"><circle cy="-25" r="20"/><path d="M-40 71 q0 -65 40 -65 q40 0 40 65 Z"/></g> |
| 172 |
<g transform="translate(452 620)"><circle cy="-21" r="17"/><path d="M-34 55 q0 -55 34 -55 q34 0 34 55 Z"/></g> |
| 173 |
<g transform="translate(742 618)"><circle cy="-22" r="18"/><path d="M-36 57 q0 -57 36 -57 q36 0 36 57 Z"/></g> |
| 174 |
<g transform="translate(860 606)"><circle cy="-25" r="20"/><path d="M-40 69 q0 -64 40 -64 q40 0 40 64 Z"/></g> |
| 175 |
<g transform="translate(982 620)"><circle cy="-21" r="17"/><path d="M-34 55 q0 -55 34 -55 q34 0 34 55 Z"/></g> |
| 176 |
<g transform="translate(1096 608)"><circle cy="-24" r="19"/><path d="M-38 67 q0 -62 38 -62 q38 0 38 62 Z"/></g> |
| 177 |
</g> |
| 178 |
|
| 179 |
<!-- Nearer, softer figures at the edges — the depth cue that sells it. --> |
| 180 |
<g filter="url(#bpvCrowdNear)" opacity="0.72"> |
| 181 |
<g transform="translate(20 604)"><circle cy="-34" r="30"/><path d="M-60 105 q0 -96 60 -96 q60 0 60 96 Z"/></g> |
| 182 |
<g transform="translate(1176 598)"><circle cy="-36" r="32"/><path d="M-64 113 q0 -102 64 -102 q64 0 64 102 Z"/></g> |
| 183 |
<g transform="translate(596 640)" opacity="0.55"><circle cy="-28" r="24"/><path d="M-48 78 q0 -76 48 -76 q48 0 48 76 Z"/></g> |
| 184 |
</g> |
| 185 |
</g> |
| 186 |
|
| 187 |
<rect width="1200" height="675" fill="url(#bpvVignette)"/> |
| 188 |
|
| 189 |
<!-- Grain last, over everything. --> |
| 190 |
<rect width="1200" height="675" filter="url(#bpvGrain)" opacity="0.085" style="mix-blend-mode:overlay"/> |
| 191 |
</svg> |
| 192 |
|
