https://caliberjobs.com/lab/lab-hero-fan.js

1(()=>{const p=[{src:"assets/product/caliber-dashboard.png",alt:"Caliber home: my desk, open jobs and today\u2019s tasks",r:-9,x:-40,y:-36,z:1.25,o:"83% 51%"},{src:"assets/product/caliber-scout.png",alt:"Scout searching 2.4 billion profiles for senior engineers in Auckland",r:-2,x:6,y:-12,z:1.25,o:"73% 86%"},{src:"assets/product/caliber-calling.png",alt:"A candidate record with a live call, Scout listening",r:7,x:38,y:20,z:1.29,o:"0% 39%"}],u=["Bullhorn","JobAdder","Loxo","Vincere","Recruit CRM"],b="(max-width: 900px)";function v(r,e,o){React.useEffect(()=>{const n=r.current,t=e.current;if(!o||!n||!t)return;const a=matchMedia(b);let i=0,s=-1;const d=()=>{t.style.removeProperty("--fan"),t.style.removeProperty("--exit"),s=-1},f=()=>{if(i=0,a.matches){s!==-1&&d();return}const{top:h,height:m}=n.getBoundingClientRect(),l=Math.min(1,Math.max(0,-h/(m*.75)));if(l===s)return;s=l;const x=l<.3?1+l/.3*.25:Math.max(0,1.25*(1-(l-.3)/.5));t.style.setProperty("--fan",x.toFixed(3)),t.style.setProperty("--exit",Math.max(0,(l-.45)/.55).toFixed(3))},c=()=>{i||(i=requestAnimationFrame(f))};return f(),addEventListener("scroll",c,{passive:!0}),addEventListener("resize",c),()=>{cancelAnimationFrame(i),removeEventListener("scroll",c),removeEventListener("resize",c),d()}},[r,e,o])}function g({active:r}){const[e,o]=React.useState(68);return React.useEffect(()=>{if(!r)return;const n=setInterval(()=>o(t=>t+1),1e3);return()=>clearInterval(n)},[r]),React.createElement("span",{className:"lhf-time"},Math.floor(e/60),":",String(e%60).padStart(2,"0"))}function y(){const r=React.useRef(null),e=React.useRef(null),o=useReducedMotion(),n=useSeenOnce(e,.15),t=useSectionPause(e);return v(r,e,!o),React.createElement(LabSection,{id:"hero",tone:"canvas",rule:!1,pad:"0",className:"lhf"},React.createElement("style",null,`
2        .lhf { margin-top: -88px; }
3        /* Fanned or hovered, the front card's corner crosses the right rail: let it float over the hairline instead of being cut by it. */
4        .lhf > .lab-rails { z-index: 0; }
5        .lhf-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 176px 0 72px; }
6        .lhf h1.lab-title { font-size: clamp(44px, 5.2vw, 76px); }
7        .lhf .lab-lede { max-width: 480px; }
8        .lhf-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
9        .lhf .lab-btn:focus-visible { outline: 2px solid var(--cal-blue-ink); outline-offset: 3px; }
10        .lhf-switch { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--cal-line); font-size: 13px; color: var(--cal-muted); }
11        .lhf-switch span { display: block; margin-bottom: 10px; }
12        .lhf-switch b { display: inline-block; margin-right: 18px; font-size: 15px; font-weight: 500; color: var(--cal-body); }
13
14        /* Stack: --fan scales every tilt and offset, --exit slides the whole hand down and out */
15        .lhf-stack { --fan: 1; --exit: 0; position: relative; aspect-ratio: 10 / 9;
16          transform: translateY(calc(var(--exit) * 140px)); opacity: calc(1 - var(--exit)); }
17        .lhf-card { position: absolute; left: 7%; top: 12%; width: 86%; aspect-ratio: 4 / 3; transform-origin: 50% 100%;
18          opacity: 0; transform: translateY(-48px);
19          transition: opacity .7s var(--lab-ease), transform .7s var(--lab-ease); transition-delay: var(--d); }
20        .lhf-stack.in .lhf-card { opacity: 1; transform: none; }
21        @media (hover: hover) {
22          .lhf-stack.in:hover .lhf-card { transform: translate(calc(var(--x) * .3px), calc(var(--y) * .3px)) rotate(calc(var(--r) * .3deg)); }
23        }
24        .lhf-shot { position: absolute; inset: 0; transform-origin: 50% 100%;
25          transform: translate(calc(var(--x) * var(--fan) * 1px), calc(var(--y) * var(--fan) * 1px)) rotate(calc(var(--r) * var(--fan) * 1deg)); }
26        .lhf-frame { height: 100%; border-radius: 20px; border: 1px solid var(--cal-line); background: #fff; overflow: hidden;
27          box-shadow: var(--shadow-md); transform: translateZ(0); }
28        .lhf-card:last-child .lhf-frame { box-shadow: var(--shadow-lg); }
29        .lhf-frame img { display: block; width: 100%; height: 100%; transform: scale(var(--z)); transform-origin: var(--o); }
30
31        /* Live pill, hung off the front card's bottom-left corner */
32        .lhf-pill { position: absolute; left: -14px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 12px;
33          border-radius: 999px; background: rgba(255,255,255,.84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
34          border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-md); font: 500 13px/1 var(--cal-font); color: var(--cal-ink); white-space: nowrap; }
35        .lhf-pill i { position: relative; width: 8px; height: 8px; border-radius: 99px; background: var(--cal-green); }
36        .lhf-pill i::after { content: ''; position: absolute; inset: -4px; border-radius: 99px; border: 2px solid var(--cal-green); opacity: 0; animation: lhfPulse 2s var(--lab-ease) infinite; }
37        .lhf-time { color: var(--cal-muted); font-variant-numeric: tabular-nums; }
38        @keyframes lhfPulse { from { transform: scale(.5); opacity: .6; } to { transform: scale(1.4);

38 opacity: 0; } }
39
40        @media (max-width: 900px) {
41          .lhf-grid { grid-template-columns: 1fr; gap: 56px; }
42          .lhf-stack { --fan: .7; max-width: 520px; }
43          .lhf-card { left: 10%; width: 80%; }
44        }
45        @media (max-width: 760px) {
46          .lab-sec.lhf { margin-top: -80px; padding-top: var(--mob-hero-pt) !important; padding-bottom: 32px !important; }
47          .lhf h1.lab-title { font-size: var(--mob-h1); }
48          .lhf-grid { padding: 0; gap: 40px; }
49          .lhf-stack { --fan: .5; }
50          .lhf-pill { left: 8px; bottom: 12px; }
51        }
52        @media (prefers-reduced-motion: reduce) {
53          .lhf-card, .lhf-stack.in:hover .lhf-card { opacity: 1; transform: none; transition: none; }
54          .lhf-pill i::after { animation: none; }
55        }
56      `),React.createElement("div",{ref:r,className:"lhf-grid"},React.createElement("div",null,React.createElement(LabTitle,{as:"h1",lines:[["Meet your new","grey"],"Recruitment OS."]}),React.createElement("p",{className:"lab-lede"},"Source across 2.4 billion profiles. Call from any record. Run your ATS, CRM and hiring manager portal in one tab."),React.createElement("div",{className:"lhf-ctas"},React.createElement("a",{className:"lab-btn lab-btn--primary",href:"/book.html"},"See Caliber in action ",Icon.arrowR({size:15})),React.createElement("a",{className:"lab-btn lab-btn--ghost",href:"pricing.html#guarantee"},"Love it, or it's free")),React.createElement("p",{className:"lhf-switch"},React.createElement("span",null,"Recruiters are switching from"),u.map(a=>React.createElement("b",{key:a},a)))),React.createElement("div",{ref:e,className:`lhf-stack ${n?"in":""}`},p.map((a,i)=>React.createElement("div",{key:a.src,className:"lhf-card",style:{"--r":a.r,"--x":a.x,"--y":a.y,"--d":`${i*100}ms`}},React.createElement("div",{className:"lhf-shot"},React.createElement("div",{className:"lhf-frame"},React.createElement("img",{src:a.src,alt:a.alt,width:"1600",height:"1200",decoding:"async",style:{"--z":a.z,"--o":a.o}})),i===p.length-1&&React.createElement("div",{className:"lhf-pill"},React.createElement("i",{"aria-hidden":"true"}),"Scout is listening",React.createElement(g,{active:t}))))))))}Object.assign(window,{LabHeroFan:y});})();