// Hero block per the Direction Lab decisions, ported into page conventions. // — H1 three-line funnel (lab v2.2 type) // — lead line drawn from CTA down to the morph // — morph with burned-in word-by-word headlines that swap per format, // ken-burns breathing image, clickable format pills BELOW the stage // — animated logo marquee: grayscale at rest → color on hover, pause on hover // Replaces PcHero + MorphClip + LogoMarquee. const PFH_CSS = ` @keyframes pfhDrawY { from { transform:scaleY(0); } to { transform:scaleY(1); } } .pfh-h1 { font:700 clamp(42px,5vw,64px)/1.04 var(--font-sans); letter-spacing:-0.02em; text-transform:uppercase; margin:26px 0 8px; text-align:center; } .pfh-h1 i { font-style:normal; color:var(--brand-600); } .pfh-eyebrow { display:inline-block; font:600 13px/1 var(--font-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--text-secondary); } /* soft sage-gray ambient — continuous side envelope across hero → video → logos. side-anchored (no horizontal band) and uniform alpha at the seams, fading to white at the logos. */ .pfh-bg { background: radial-gradient(58% 56% at 50% 40%, #fff 40%, rgba(255,255,255,0) 80%), radial-gradient(42% 140% at 0% 50%, rgba(120,138,122,0.09), transparent 66%), radial-gradient(42% 140% at 100% 50%, rgba(120,138,122,0.09), transparent 66%), radial-gradient(96% 60% at 50% -8%, rgba(120,138,122,0.05), transparent 72%), #fff; } .pfh-vidbg { background: radial-gradient(42% 140% at 0% 50%, rgba(120,138,122,0.09), transparent 66%), radial-gradient(42% 140% at 100% 50%, rgba(120,138,122,0.09), transparent 66%), #fff; } .pfh-logobg { background: radial-gradient(46% 120% at 0% -12%, rgba(120,138,122,0.075), transparent 70%), radial-gradient(46% 120% at 100% -12%, rgba(120,138,122,0.075), transparent 70%), #fff; } @media (max-width:1024px) { .pfh-bg, .pfh-vidbg { background: radial-gradient(48% 140% at 0% 50%, rgba(120,138,122,0.065), transparent 70%), radial-gradient(48% 140% at 100% 50%, rgba(120,138,122,0.065), transparent 70%), #fff; } .pfh-logobg { background: radial-gradient(50% 120% at 0% -12%, rgba(120,138,122,0.055), transparent 72%), radial-gradient(50% 120% at 100% -12%, rgba(120,138,122,0.055), transparent 72%), #fff; } } @media (max-width:767px) { .pfh-vidbg, .pfh-logobg { background:#fff; } .pfh-bg { background: radial-gradient(130% 44% at 50% 0%, rgba(120,138,122,0.045), transparent 70%), #fff; } } .pfh-h1 .nb { white-space:nowrap; } .pfh-lead { width:1px; height:30px; margin:20px auto 0; background:rgba(0,0,0,0.28); transform-origin:top; animation:pfhDrawY .6s cubic-bezier(.2,0,0,1) .5s both; } /* morph — refined glide; the image only breathes */ .pfh-stage { display:flex; align-items:center; justify-content:center; height:540px; } .pfh-morph { position:relative; flex:none; overflow:hidden; border-radius:16px; background:#15110f; box-shadow:0 16px 36px -8px rgba(0,0,0,0.16); transition:width .5s cubic-bezier(.45,1.25,.35,1), height .5s cubic-bezier(.45,1.25,.35,1); } .pfh-morph:hover .pc-vplay { transform:translate(-50%,-50%) scale(1.1); background:var(--brand-600); } @keyframes pfhKen { 0% { transform:scale(1); } 100% { transform:scale(1.055); } } .pfh-morph img.src { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:50% 26%; /* anchor breathing zoom on the eye line → eyes stay put, headroom preserved */ transition:object-position .5s cubic-bezier(.45,1.25,.35,1); animation:pfhKen 13s ease-in-out infinite alternate; } .pfh-cap { position:absolute; left:16px; right:16px; bottom:9%; z-index:3; text-align:center; pointer-events:none; font:700 42px/1.08 var(--font-sans); letter-spacing:-0.03em; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,0.5); text-wrap:balance; } .pfh-cap .wm { display:inline-block; overflow:hidden; vertical-align:top; margin:0 .11em; padding-bottom:.1em; } .pfh-cap .wi { display:inline-block; transform:translateY(118%); animation:pfhWordUp .46s cubic-bezier(.2,0,0,1) both; } @keyframes pfhWordUp { to { transform:none; } } .pfh-prog { position:absolute; left:0; bottom:0; height:3px; width:100%; z-index:5; background:var(--brand-600); transform:scaleX(0); transform-origin:left; animation:pfhProg 3s linear forwards; } @keyframes pfhProg { from { transform:scaleX(0); } to { transform:scaleX(1); } } .pfh-fmtrow { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:24px; } .pfh-fmt { appearance:none; cursor:pointer; font:600 14px/1 var(--font-sans); padding:11px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--text-secondary); letter-spacing:-0.01em; transition:all .25s cubic-bezier(.2,0,0,1); } .pfh-fmt .lbl { font-weight:500; opacity:.72; margin-left:7px; } .pfh-fmt.on { background:#000; border-color:#000; color:#fff; } .pfh-fmt:hover:not(.on) { border-color:#000; color:var(--text-primary); } .pfh-help { text-align:center; font:400 14px/1.4 var(--font-sans); color:var(--text-tertiary); margin:16px 0 0; } /* logo marquee — one living line between the head and the content below */ .pfh-mhead { text-align:center; font:400 15px/1 var(--font-sans); color:var(--text-tertiary); } .pfh-mhead strong { font-weight:600; color:var(--text-primary); } .pfh-tick { width:1px; height:30px; margin:14px auto 0; background:rgba(0,0,0,0.22); transform-origin:top; animation:pfhDrawY .7s cubic-bezier(.2,0,0,1) .25s both; } .pfh-band { position:relative; border-top:1px solid rgba(0,0,0,0.1); } @keyframes pfhMarq { from { transform:translateX(0); } to { transform:translateX(-50%); } } .pfh-marq { overflow:hidden; padding:56px 0; } .pfh-track { display:flex; align-items:center; gap:64px; width:max-content; animation:pfhMarq 36s linear infinite; } .pfh-band:hover .pfh-track { animation-play-state:paused; } .pfh-fade { position:absolute; top:0; bottom:0; width:180px; z-index:2; pointer-events:none; } .pfh-logo { object-fit:contain; opacity:.62; filter:grayscale(100%); transition:opacity .25s, filter .25s, transform .25s; } .pfh-logo:hover { opacity:1; filter:grayscale(0); transform:translateY(-2px); } @media (prefers-reduced-motion: reduce) { .pfh-track, .pfh-lead, .pfh-tick { animation:none; } .pfh-morph img.src { animation:none; } .pfh-cap .wi { animation:none; transform:none; } .pfh-prog { display:none; } } @media (max-width:860px) { .pfh-cap { font-size:30px; } .pfh-stage { height:470px; } } /* ═══ MOBILE hero (≤767px) ═══ */ @media (max-width:767px) { #top .pc-wrap { padding-top:18px !important; padding-bottom:0 !important; } /* value pill — homepage style: compact, hairline pink/grey border, pink bolt */ .pfh-pill { align-items:center; gap:7px; padding:7px 15px; border-radius:999px; border:1px solid rgba(255,35,140,0.24); background:rgba(255,255,255,0.65); backdrop-filter:blur(4px); font:600 11.5px/1 var(--font-sans); letter-spacing:.13em; text-transform:uppercase; color:var(--text-secondary); } .pfh-pill svg { color:var(--brand-600); flex:none; } /* H1 — three tight lines, homepage feel */ .pfh-h1 { font-size:38px !important; line-height:0.96 !important; letter-spacing:-0.03em !important; margin-top:14px !important; max-width:none; } .pfh-h1-m { display:block !important; } #top .pfh-h1-m { display:block !important; } .pfh-h1 .nb { white-space:normal !important; } .pfh-mob-sub { font-size:16px !important; line-height:1.4 !important; margin-top:10px !important; max-width:30ch !important; } .pfh-cta-wrap { margin-top:16px !important; gap:8px !important; } /* compact pink CTA — not full-width, less vertical padding */ .pfh-cta-m { width:auto !important; max-width:none !important; height:48px !important; padding:0 26px !important; font-size:15.5px !important; } .pfh-hide-mob { display:none !important; } /* desktop-only hero variants hidden on mobile */ .pfh-price { font-size:12.5px !important; line-height:1.5 !important; max-width:34ch; color:var(--text-tertiary) !important; margin-top:2px; } .pfh-lead { display:none !important; } /* remove long connector */ .pfh-stage { height:auto !important; padding-top:6px; } .pfh-morphsec .pc-wrap { padding-top:0 !important; } .pfh-cap { font:700 22px/1.15 var(--font-sans) !important; bottom:18px; left:14px; right:14px; } .pfh-bigcap { display:none !important; } /* no duplicate sentence below video */ /* format tabs: compact single row — labels drop, just the ratio chips */ .pfh-fmtrow { margin-top:14px; gap:7px; flex-wrap:nowrap; justify-content:center; } .pfh-fmt { flex:none; padding:0 16px; min-height:44px; font-size:13.5px; display:inline-flex; align-items:center; } .pfh-fmt .lbl { display:none !important; } .pfh-help { font-size:12.5px !important; margin-top:11px !important; color:var(--text-inactive) !important; } /* mobile "logo wall" — full-bleed muted surface with hairline-separated cells */ .pfh-logosec { display:none; } .pfh-trust.pc-sec { padding:28px 0 34px !important; } .pfh-trustband { background:var(--bg-grey); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0 2px; } .pfh-mhead { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-tertiary); text-align:center; margin-bottom:20px; } .pfh-tick { display:none !important; } .pfh-trustgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); } .pfh-cell { background:var(--bg-grey); display:flex; align-items:center; justify-content:center; min-height:78px; padding:14px 10px; } .pfh-trust .pfh-logo { width:auto; max-width:90px; object-fit:contain; opacity:.5; filter:grayscale(100%); } } `; // ── hero stack ── function PfhHero() { return (
Add-on · Testimonial Ads One shoot Multiple ads

Turn testimonials
into ads.

Turn
Testimonials
into ads.

Real customer proof, cut for paid, social, landing pages, and sales — from the same shoot. Real customer proof. Ready to run.

First clip $690 · Additional clips $590 · 3 formats included. First ad $690 · Additional ads $590 · 3 formats included.
); } // ── morph with burned-in headlines ── const PFH_MORPH = [ { fmt: "9:16", w: 282, h: 502, big: "Built for Reels.", label: "Meta Reels", objPos: "27% 50%" }, { fmt: "1:1", w: 456, h: 456, big: "Built for the feed.", label: "LinkedIn Feed", objPos: "13% 50%" }, { fmt: "16:9", w: 760, h: 428, big: "Landing & sales.", label: "Landing & Sales", objPos: "50% 42%" }, ]; function PfhMorphClip() { const [i, setI] = React.useState(0); const isMobile = usePcIsMobile(); const reduce = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches; React.useEffect(() => { if (reduce || isMobile) return; // no auto-rotate on mobile — format heights differ too much to morph cleanly const t = setTimeout(() => setI((n) => (n + 1) % PFH_MORPH.length), 3000); return () => clearTimeout(t); }, [i, reduce, isMobile]); const s = PFH_MORPH[i]; const [vw, setVw] = React.useState(typeof window !== "undefined" ? window.innerWidth : 1200); React.useEffect(() => { const f = () => setVw(window.innerWidth); window.addEventListener("resize", f); return () => window.removeEventListener("resize", f); }, []); const pad = vw <= 960 ? 22 : 56; const factor = Math.min(1, (vw - pad * 2 - 8) / 760); // 760 = widest (16:9) state let mw = Math.round(s.w * factor), mh = Math.round(s.h * factor); let stageH = Math.round(502 * factor) + 28; // tallest (9:16) + breathing room let playD = Math.max(40, Math.round(54 * factor)); if (isMobile) { // Size each format to FILL the column width so the tall 9:16 reads as a large // portrait card (not a thumbnail), capping height so a portrait clip never // dominates the whole screen. Stage height follows the card (CSS height:auto). const colW = Math.min(vw - pad * 2, 430); const maxH = Math.round((typeof window !== "undefined" ? window.innerHeight : 800) * 0.6); let cw = colW, ch = Math.round(colW * s.h / s.w); if (ch > maxH) { ch = maxH; cw = Math.round(maxH * s.w / s.h); } mw = cw; mh = ch; stageH = mh + 20; playD = Math.max(46, Math.round(Math.min(mw, mh) * 0.16)); } const capFs = Math.max(17, Math.round(42 * factor)); const heroSrc = (window.SaysoFilms ? window.SaysoFilms.embed(window.SaysoFilms.get().feature.hero) : "https://player.vimeo.com/video/1191605106?h=3e64f4a9a3&autoplay=1&title=0&byline=0&portrait=0"); return (
window.openPcVideo(heroSrc)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); window.openPcVideo(heroSrc); } }}>
{s.big.split(" ").map((w, k) => ( {w} ))}
{s.fmt}
{PFH_MORPH.map((m, k) => ( ))}

One customer shoot. Cut for every placement.

); } // ── animated logo marquee ── const PFH_LOGOS = [ ["logos/n/aws.png", "AWS", 30], ["logos/n/monday.png", "monday.com", 17], ["logos/n/fiverr.png", "Fiverr", 16], ["logos/n/taboola.png", "Taboola", 15], ["logos/n/similarweb.png", "SimilarWeb", 16], ["logos/n/checkpoint.png", "Check Point", 28], ["logos/n/clarivate.png", "Clarivate", 16], ["logos/n/stratasys.png", "Stratasys", 26], ["logos/n/sapiens.png", "Sapiens", 15], ["logos/n/talonone.png", "Talon.One", 32], ["logos/n/nayax.png", "Nayax", 16], ["logos/n/panaya.png", "Panaya", 20], ["logos/n/payem.png", "PayEm", 20], ["logos/n/drivenets.png", "DriveNets", 28], ["logos/n/alma.png", "Alma", 22], ["logos/n/guesty.png", "Guesty", 21], ]; function PfhLogoMarquee() { const isMobile = usePcIsMobile(); // Mobile: a calm, STATIC "logo wall" — a full-bleed muted band (a surface, not a // floating frame), with each logo in an equal cell separated by hairlines and // sized for uniform OPTICAL weight (tuned per logo, not by raw dimensions). if (isMobile) { const WALL = [ ["logos/n/guesty.png", "Guesty", 22], ["logos/n/monday.png", "monday.com", 19], ["logos/n/checkpoint.png", "Check Point", 30], ["logos/n/taboola.png", "Taboola", 17], ["logos/n/similarweb.png", "SimilarWeb", 17], ["logos/n/aws.png", "AWS", 25], ["logos/n/fiverr.png", "Fiverr", 19], ["logos/n/nayax.png", "Nayax", 21], ["logos/n/clarivate.png", "Clarivate", 19], ]; return (
Trusted by teams at
{WALL.map(([src, alt, h], i) => (
{alt}
))}
); } const row = [...PFH_LOGOS, ...PFH_LOGOS]; return (
Trusted by leading marketing & revenue teams Trusted by teams at
{row.map(([src, alt, h], i) => {alt})}
); } Object.assign(window, { PFH_CSS, PfhHero, PfhMorphClip, PfhLogoMarquee });