https://voltaire.ably.com/component---src-pages-four-pillars-of-dependability-tsx-1a5d58150e93687da3f1.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"4fdb87eed04ecf49489ec6db9b15acde2c687d66"};var t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="6cd3c3cb-6873-4c3c-ae5b-8f8fa8f31f22",e._sentryDebugIdIdentifier="sentry-dbid-6cd3c3cb-6873-4c3c-ae5b-8f8fa8f31f22")}catch(e){}}(),(self.webpackChunkvoltaire=self.webpackChunkvoltaire||[]).push([[9216],{26646:function(e,t,n){"use strict";n.d(t,{A:function(){return a.A}});var a=n(26930)},26930:function(e,t,n){"use strict";n.d(t,{j:function(){return s}});var a=n(96540),i=n(5588),r=n(68154),l=n(64251);const o=e=>e.startsWith("//")?`https:${e}`:e,s={twitterSite:"@ablyrealtime",siteName:"Ably Realtime"};t.A=({title:e,metaDescription:t,metaImage:n,pageSchema:c,twitterSite:u,twitterTitle:m,twitterDesc:d,twitterImage:p,canonical:h,path:f,slug:g,siteUrl:b,fullPath:y,noindex:v})=>{const w=(e=>{return e?"string"==typeof e?e:null!==(t=null==e?void 0:e.metaDescription)&&void 0!==t?t:null:null;var t})(t),E=(e=>{if(!e)return null;let t=null;var n,a,r;return t="string"==typeof e?e:null!==(n=null!==(a=(0,i.d)(e))&&void 0!==a?a:null===(r=e.file)||void 0===r?void 0:r.url)&&void 0!==n?n:null,t?o(t):null})(n),x=(({title:e})=>`${e||""}`)({title:e}),k=h?((e,t)=>{try{return new URL(e,t).toString()}catch{return e}})(h,b):(({path:e,slug:t,fullPath:n,siteUrl:a})=>{const i=new URL(a);return i.pathname=(({path:e,slug:t,fullPath:n})=>n||(e?`${e}/${t}`:null!=t?t:""))({path:e,slug:t,fullPath:n}),i.toString()})({path:f,slug:g,siteUrl:b,fullPath:y});return a.createElement(r.m,null,a.createElement("title",null,x),a.createElement("link",{rel:"canonical",href:k}),a.createElement("link",{rel:"icon",href:"/favicon.svg",type:"image/svg+xml"}),a.createElement("link",{rel:"icon",href:"/favicon-96x96.png",sizes:"96x96",type:"image/png"}),a.createElement("link",{rel:"icon",href:"/favicon.ico",sizes:"48x48 32x32 16x16"}),a.createElement("link",{rel:"apple-touch-icon",href:"/apple-touch-icon.png"}),a.createElement("link",{rel:"manifest",href:"/site.webmanifest"}),w?a.createElement("meta",{name:"description",content:w}):null,a.createElement("meta",{property:"og:site_name",content:s.siteName}),a.createElement("meta",{property:"og:type",content:"website"}),k?a.createElement("meta",{property:"og:url",content:k}):null,x?a.createElement("meta",{property:"og:title",content:x}):null,w?a.createElement("meta",{property:"og:description",content:w}):null,E?a.createElement("meta",{property:"og:image",content:E}):null,v?a.createElement("meta",{name:"robots",content:"noindex"}):null,a.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),a.createElement("meta",{name:"twitter:site",content:null!=u?u:s.twitterSite}),m?a.createElement("meta",{name:"twitter:title",content:m}):null,d?a.createElement("meta",{name:"twitter:description",content:d}):null,p?a.createElement("meta",{name:"twitter:image",content:o(p)}):null,c&&(()=>{try{const e=Array.isArray(c)?{"@context":"https://schema.org","@graph":c.filter(e=>null!=e&&"object"==typeof e&&!Array.isArray(e)).map(e=>{const{"@context":t,...n}=e;return n})}:c,t=JSON.stringify(e).replace(/</g,"\\u003c");return a.createElement("script",{type:"application/ld+json"},t)}catch(e){return l.Cp(e,{tags:{component:"Head",section:"pageSchema"},extra:{pageSchema:c}}),null}})(),a.createElement("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),a.createElement("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:""}),a.createElement("link",{href:"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manrope:[email protected]&family=Source+Code+Pro:wght@600&display=swap",rel:"stylesheet"}))}},41174:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return I}});var a=n(96540),i=n(3210),r=n(26646),l=n(70655),o=n(86632);var s=()=>a.createElement("section",{className:"ui-standard-container py-20"},a.createElement("h3",{className:"vt-pillar-resources-heading-border relative ui-text-h3 pb-6"},"Get started right now"),a.createElement("div",{className:"vt-pillar-resources-grid ui-grid-gap"}

1,a.createElement("a",{href:"https://ably.com/docs",className:"vt-pillar-resource-holder flex flex-col h-full space-between"},a.createElement("div",{className:"flex-1"},a.createElement("h4",{className:"ui-text-p2 font-medium text-dark-grey tracking-[-0.01em] pb-4"},"Documentation"),"Rapidly build production-ready realtime capabilities with quickstart guides, realtime concepts, and full API reference."),a.createElement("div",{className:"flex-0"},a.createElement(o.A,{contentfulLinkButton:{path:"https://ably.com/docs",label:"Read"},type:"featured-link-div",iconColor:"text-cool-black",textSize:"text-p1"}))),a.createElement("a",{href:"https://ably.com/tutorials",className:"vt-pillar-resource-holder flex flex-col h-full space-between"},a.createElement("div",{className:"flex-1"},a.createElement("h4",{className:"ui-text-p2 font-medium text-dark-grey tracking-[-0.01em] pb-4"},"Tutorials"),"Our step-by-step tutorials and demos will help you learn Ably and understand what our realtime platform is capable of."),a.createElement("div",{className:"flex-0"},a.createElement(o.A,{contentfulLinkButton:{path:"https://ably.com/tutorials",label:"Browse the tutorials"},type:"featured-link-div",iconColor:"text-cool-black",textSize:"text-p1"}))),a.createElement("a",{href:"https://ably.com/download",className:"vt-pillar-resource-holder flex flex-col h-full space-between"},a.createElement("div",{className:"flex-1"},a.createElement("h4",{className:"ui-text-p2 font-medium text-dark-grey tracking-[-0.01em] pb-4"},"25+ Client Library SDKs"),"We support the environments, languages, and platforms you work with. Ably fits into your stack wherever you need us."),a.createElement("div",{className:"flex-0"},a.createElement(o.A,{contentfulLinkButton:{path:"https://ably.com/download",label:"Download an SDK"},type:"featured-link-div",iconColor:"text-cool-black",textSize:"text-p1"})))));var c=[{name:"Performance",number:"01",sectionId:"performance",image:n.p+"static/pillar-performance-8488a0dceb7e6a678321364bdf120c92.svg",color:"text-jazzy-pink",gradient:"--gradient-pillars-active-warm",heroQuote:"Performance is the end-to-end latency and achievable bandwidth for data sent via the service.",intro:{heading:"A word on performance",description:()=>a.createElement(a.Fragment,null,a.createElement("p",{className:"ui-text-p1 text-white mb-6 mt-8 md:mt-0"},"While a focus on predictability may seem counterintuitive, when it comes to developing realtime functionality, performance isn’t simply about minimizing latency and bandwidth requirements. It’s also about minimizing the variance in them and providing predictability to developers."),a.createElement("p",{className:"ui-text-p1 text-white"},"If you know Ably’s median global latencies and bandwidth will always be within specific operating boundaries it provides a level of certainty in uncertain operating conditions. You can design, build, and scale features around this certainty, confident they’ll perform as expected under various conditions."))},body:[{heading:"Message performance (individual)",description:()=>a.createElement(a.Fragment,null,"The latency of individual messages between publisher and subscriber when transiting through Ably’s global network of ",a.createElement("a",{href:"/network"},"17 datacenters and 700+ edge acceleration Points of Presence (PoPs).")),content:()=>a.createElement(a.Fragment,null,a.createElement("h3",null,"Round trip latency within a datacenter:"),a.createElement("h4",null,"< 30ms for 99th percentile"),a.createElement("p",null,"Transit latency measured at the Ably datacenter boundary. Measured from the point a message arrives from a publisher at an Ably datacenter to the point it leaves en-route to a subscriber within the same region."),a.createElement("h3",null,"Round trip latency from any of our 700+ PoPs globally that receive at least 1% of our global traffic:"),a.createElement("h4",null,"< 65ms for 99th percentile"),a.createElement("p",null,"This represents the transit latency individual clients experience. Measured at the Point of Presence (PoP) boundary within the Ably access network, which will be closer than a datacenter. Limited to PoPs that receive at least 1% of global traffic."),a.createElement("h3",null,"Mean roundtrip latency"),a.createElement("h4",null,"< 99ms from all 700+ PoPs"),a.createElement("p",null,"Transit latency for all PoPs, including those that are remote and rarely used, hence a 30ms higher latency target."))},{heading:"Throughput performance (aggregate)",description:()=>a.createElement(a.Fragment,null,"The throughput capacity you can achieve with Ably in aggregate, to achieve the scale you need while maintaining performance."),content:()=>a.createElement(a.Fragment,null,a.createElement("h3",null,"Channel (shard) throughput:"),a.createElement("h4",null,"200 messages per second, 13MiB per second"),a.createElement("p",null,"Ably provides unlimited throughput capacity at a system-level. We achieve this with channels (sharding), constraining message and bandwidth throughput per second at a channel (shard) level in order to provide predictable performance. You can activate an unlimited number of channels for unlimited throughput."),a.createElement("h3",null,"Channel resource allocation"),a.createElement("h4",null,"< 200ms for 99th percentile"),a.createElement("p",null,"Ably is a stateful system so there is a latency ‘cost’ when activating new channels. This latency has no material impact on the performance for subscribers and is different from message round-trip latency (< 65ms), which is the latency subscribers actually experience. It’s possible to activate channels ahead of time to bypass this initial resource allocation latency and increase predictability of latency for clients."),a.createElement("h3",null,"Channel churn rate"),a.createElement("h4",null,"limitless (constrained only by quota)"),a.createElement("p",null,"This is the rate at which you can allocate and deallocate channels. This is effectively limitless: you can in theory activate one million channels per second."))}],footer:{heading:"Performance at scale",description:"Speak to one of our architecture experts today about how you can build highly performant applications on the Ably platform",buttonLabel:"Get your expert advice now",buttonPath:"https://ably.c

1om/contact"},menuDesc:{top:"We focus on predictability of latencies to provide certainty in uncertain operating conditions.",bottom:"<65ms roundtrip latency in 99% percentile. Unlimited channel throughput."}},{name:"Integrity",number:"02",sectionId:"integrity",image:n.p+"static/pillar-integrity-7705780fa6769ac92abd96de9e85f6d6.svg",color:"text-electric-cyan",gradient:"--gradient-pillars-active-zing",heroQuote:"Integrity comes from the guarantees we provide around realtime messages sent using the Ably service.",intro:{heading:"A word on integrity",description:()=>a.createElement(a.Fragment,null,a.createElement("p",{className:"ui-text-p1 text-white mb-6 mt-8 md:mt-0"},"When apps rely on a sequence of messages that mutually depend upon one another, like chat, Ably maintains the end-to-end integrity of them. This simplifies app architecture: there’s no need to handle missed, unordered, or duplicate messages."),a.createElement("p",{className:"ui-text-p1 text-white mb-6"},"This frees you from design limitations so you can focus on solving the challenges that really matter, not the frustrating realtime edge cases you’re otherwise forced to think about and develop around."),a.createElement("p",{className:"ui-text-p1 text-white"},"Due to our more modern system architecture we’re able to actually provide these guarantees at scale - something other pub/sub messaging providers with similar claims struggle to deliver on."))},body:[{heading:"Message guarantees",description:()=>a.createElement(a.Fragment,null),content:()=>a.createElement(a.Fragment,null,a.createElement("h3",null,"Guaranteed Message Ordering from any single realtime or non-realtime publisher to all subscribers"),a.createElement("p",null,"Companies like HubSpot, Vitac, Genius Sports, and 17Media rely on Ably for message ordering to simplify app architecture and engineering. This also allows us to deliver features like"," ",a.createElement("a",{href:"https://ably.com/blog/message-delta-compression"},"Message Delta Compression while maintaining ordering of messages.")),a.createElement("h3",null,"Idempotent publish operations are guaranteed within two minutes"),a.createElement("p",null,"We guarantee messages will be published only once as we discard those delivered multiple times. This provides flexibility around how you design your app as you don’t need to account for duplication. Limited to two minutes by default, but can reach back into persisted history for up to 72 hours."),a.createElement("h3",null,"Exactly-once delivery semantics with the Ably protocol"),a.createElement("p",null,"Ably’s exactly-once message delivery semantics mean you can simplify your app so it doesn’t need to account for duplicate or failed message deliveries, as is the case with at least once or at most once delivery. Note that this is dependent on using Ably client library SDKs that support idempotency in publishers and serial number based stream resumes in subscribers."),a.createElement("h3",null,"100% Guaranteed Message Delivery and Onwards Processing"),a.createElement("p",null,"Ably’s design and protocol ensures that once an ACK is received by the publishing client, all subscribers on that channel are guaranteed to receive the message."),a.createElement("h3",null,"Preserve connection integrity guarantee across disconnection for 2 minutes"),a.createElement("p",null,"Ably’s clients ensure connection state is maintained so abrupt disconnections or intermittent connections are resumed automatically by the SDKs, and message stream continuity ensured. Messages published when disconnected are delivered upon reconnection."),a.createElement("h3",null,"Maximum divergence of 30s advertised state and actual state of connection liveness & presence "),a.createElement("p",null,"The Ably protocol and underlying transports incorporate a liveness check that guarantees a faulty connection is detected within no more than 30s. Typically a dropped connection is detected immediately, however all transports depend on TCP/IP, which can in some circumstances fail to detect a connection failure. In these cases, the Ably liveness check ensures the unhealthy connection is determined, and all subscribers listening for connection or presence state will be notified within the 30s window."))}],footer:{heading:"Message integrity guarantees",description:"Speak to one of our realtime experts today about how you can leverage Ably's message guarantees",buttonLabel:"Book your session",buttonPath:"https://ably.c

1om/contact"},menuDesc:{top:"Guarantees for ordering and delivery to overcome limitations of pub/sub & simplify app architecture.",bottom:"Message Ordering and Delivery guaranteed from publisher to subscribers."}},{name:"Reliability",number:"03",sectionId:"reliability",image:n.p+"static/pillar-reliability-573147a5999df1c10fed4e0071d0dc68.svg",color:"text-gui-focus",gradient:"--gradient-pillars-active-cool",heroQuote:"Reliability is the ability to continue operating in spite of something going wrong.",intro:{heading:"A word on reliability",description:()=>a.createElement(a.Fragment,null,a.createElement("p",{className:"ui-text-p1 text-white mb-6 mt-8 md:mt-0"},"Ably’s platform is fault tolerant. We can continue to operate even if a component, or multiple components, should fail. But it’s not enough to have multiple components to achieve fault tolerance. You need to have multiple components capable of maintaining the system if the other components are lost in order to achieve fault tolerance."),a.createElement("p",{className:"ui-text-p1 text-white mb-6"},"Applying this to Ably, we’ve designed around statistical risks of failure, ensuring sufficient redundancy at a regional and global level to ensure continuity of service even in the face of multiple infrastru

1cture failures."),a.createElement("p",{className:"ui-text-p1 text-white"},"Companies like"," ",a.createElement("a",{className:"ui-link",href:"https://ably.com/case-studies/split"},"Split.io")," ","and"," ",a.createElement("a",{className:"ui-link",href:"https://ably.com/case-studies/people-fun"},"PeopleFun")," ","build on Ably because they know our system is designed in such a way that even if we are facing issues, the statistical risk of issues affecting their end-users is immaterial."))},body:[{heading:"Regional fault tolerance",description:()=>a.createElement(a.Fragment,null,a.createElement("p",null,"How we design and compensate for random, individual component failure at a regional level (instances and datacenters)."),a.createElement("p",null,"The following guarantees apply to two types of processing:"),a.createElement("ul",null,a.createElement("li",null,"Realtime message delivery"),a.createElement("li",null,"Durable message storage and onward processing (for example, processing into AWS Kinesis)"))),content:()=>a.createElement(a.Fragment,null,a.createElement("h3",null,"Message survivability of 8x9s as a result of instance failures."),a.createElement("p",null,"When Ably confirms receipt of a message (ACK), we guarantee we’ll process that. Once we receive a message, we immediately begin migrating it so we can replicate it in two Availability Zones to mitigate against instance failure. Failure of AZs is independent. If we drop down to one replica due to AZ failure we can be back to two replicas within 30 seconds."),a.createElement("p",null,"Instance failure is calculated on the fact that any two instances failing within a five minute window of one another is 0.0000007%. And we’ve designed Ably so that any instance failure will migrate to a healthy instance within eight seconds, so we can have 99.999999% (8x9s) message availability."),a.createElement("h3",null,"Message survivability of 8x9s as a result of datacenter failure."),a.createElement("p",null,"If there’s a problem causing issues within an AZ, for example a networking issue, we won’t be able to redistribute load within a datacenter. In this case, we fall back to datacenters in other AZs. We can survive two AZs going down simultaneously without bringing more AZs online."),a.createElement("p",null,"Ably is designed around AZs with 99.99% SLAs, which statistically means we can provide 99.999999% (8x9s) message survivability."))},{heading:"Global fault tolerance",description:()=>a.createElement(a.Fragment,null,a.createElement("p",null,"How we design and compensate for system disruption at regional levels like capacity issues, DDoS attacks, or intervening network issues."),a.createElement("p",null,"Regional failures reduce redundancy in the system and may degrade latencies, but service continues.")),content:()=>a.createElement(a.Fragment,null,a.createElement("h3",null,"Persisted data survivability of 10x9s as a result of instance or datacenter failures"),a.createElement("p",null,"This measures the reliability of our globally-available long-term storage. Once messages are persisted, we provide 99.99999999% (10x9s) survivability. You can continue to access data even if one or more regions globally might be down."),a.createElement("h3",null,"Edge network failure resolution by the client SDKs within 30s"),a.createElement("p",null,"Our SDKs can detect and resolve faults by finding a healthy datacenter within 30s."),a.createElement("h3",null,"Automated routing of all traffic away from an abrupt failure of datacenter in less than two minutes"),a.createElement("p",null,"We can detect and route away from abrupt failures in less than two minutes. Our routing layer will stop routing clients to that datacenter and route them elsewhere."),a.createElement("h3",null,"Discontinuity time for an emergency ATM response under two minutes"),a.createElement("p",null,"We have the ability to manually reroute traffic for customers with active traffic management within two mins. This is an enterprise feature."))}],footer:{heading:"Reliability as standard",description:"Speak to one of our architecture experts today about how you can build highly reliable applications using Ably's platform",buttonLabel:"Get your expert advice now",buttonPath:"https://ably.c

1om/contact"},menuDesc:{top:"Fault tolerant at regional and global level so we can survive multiple failures without outages.",bottom:"99.999999% message survivability for instance and datacenter failure."}},{name:"Availability",number:"04",sectionId:"availability",image:n.p+"static/pillar-availability-3560da9ab16ec439f2886439e09604e0.svg",color:"text-active-orange",gradient:"--gradient-pillars-active-orange",heroQuote:"Availability is uptime. At any time I want to use a service, what is the probability I can use it?",intro:{heading:"A word on availability",description:()=>a.createElement(a.Fragment,null,a.createElement("p",{className:"ui-text-p1 text-white mb-6 mt-8 md:mt-0"},"Ably is meticulously designed to be elastic and highly-available, providing the uptime and elastic scale required for stringent and demanding realtime requirements. Under load, achieving availability and elasticity isn’t just traditional mechanics like failover, it’s about managing capacity."),a.createElement("p",{className:"ui-text-p1 text-white"},"Ably’s mathematically grounded design means we can transparently share operating boundaries we monitor to ensure capacity and therefore availability, helping you understand the type of scale and elasticity capable with Ably."))},body:[{heading:"Network capacity",description:()=>a.createElement(a.Fragment,null,a.createElement("p",null,"How we measure and scale capacity within the Ably network to maintain elasticity and high availability."),a.createElement("p",null,"Note that this is subject to availability of infrastructure from cloud vendors, which we depend upon to deliver the Ably service.")),content:()=>a.createElement(a.Fragment,null,a.createElement("h3",null,"50% global capacity margin for instantaneous surge"),a.createElement("p",null,"Ably operates at internet-scale, so our normal dimensions for capacity are already large. Regardless, we operate at 50% capacity margin so we can elastically deal with instant surges in demand and continue to be available in the event of AZ failure."),a.createElement("h3",null,"Connection capacity can double every 5 mins, halve every 10 mins & Channel capacity can double every 10 mins, halve every 20 mins"),a.createElement("p",null,"Ably can react to changes and elastically scale beyond instant surge capacity. But we must maintain state in all new areas when scaling. To do this and allow the system to keep up as it scales, we constrain the ability of the system to double (or halve) in capacity."),a.createElement("h3",null,"DoS: Layer 3, 4 and 7 defence in our edge network"),a.createElement("p",null,"Ably is designed with mechanisms to defend against various DoS vectors across different layers. This includes Layer 7 ‘attacks’ that might be legitimate operations but at unsustainable rates."),a.createElement("h3",null,"Max number of channels:"),a.createElement("h4",null,"Limitless - constrained only by plan quota"),a.createElement("p",null,"Ably can scale limitlessly with an unlimited number of channels. We achieve this with channel sharding, where each channel has limited capacity, but you can activate as many channels as you need for your scale. For example, ",a.createElement("a",{href:"https://ably.com/case-studies/hubspot"},"HubSpot")," employs over 500m channels per day on Ably."),a.createElement("h3",null,"Max number of connections:"),a.createElement("h4",null,"Limitless - constrained only by quota"),a.createElement("p",null,"Ably can serve unlimited numbers of connections. This includes fanout to millions of subscribers over a handful of channels, or one-to-one connections for each user over individual channels."),a.createElement("h3",null,"Max message throughput:"),a.createElement("h4",null,"Limitless - constrained only by quota"),a.createElement("p",null,"By restricting throughput on a per channel basis, we provide the ability to have unlimited throughput in aggregate. This is a mechanism to facilitate horizontal scaling."),a.createElement("h3",null,"Global service availability:"),a.createElement("h4",null,"99.9999%"),a.createElement("p",null,"Ably is designed around the statistical probability that service availability will be 99.9999% (6x9s) - just 31s of downtime per year. To account for real-world behaviour, the lowest SLA we design around and commercially offer is 99.999% (5x9s) - 5 minutes 15 seconds of downtime per year."),a.createElement("p",null,"Over the last year Ably’s uptime has been 100%, which is why we’re legitimately able to offer a 99.999% uptime SLA: ",a.createElement("a",{href:"https://status.ably.com/"},"status.ably.com"),"."))}],footer:{heading:"Designed for maximum availability",description:"Speak to one of our realtime experts today about how availability can help your project",buttonLabel:"Book your session",buttonPath:"https://ably.c

1om/contact"},menuDesc:{top:"A transparent, mathematically grounded design for extreme scale, elasticity, and service uptime.",bottom:"50% capacity margin for instant surge. 99.999% uptime SLA."}}];const u=(e,t,n)=>{e&&e.current&&(e.current.scrollIntoView({behavior:"smooth",block:"start"}),t.preventDefault(),history.pushState(null,"",`#${n}`))};var m=({sectionRefs:e})=>a.createElement("section",{className:"bg-cool-black py-20 sm:py-24 md:py-32 border-b border-charcoal-grey"},a.createElement("div",{className:"ui-standard-container pt-16 grid grid-cols-12 ui-grid-px ui-grid-gap"},a.createElement("div",{className:"col-span-12 sm:col-span-9 md:col-span-6"},a.createElement("h1",{className:"ui-text-h1 text-white mb-8 sm:mb-10",style:{maxWidth:"31.25rem "}},"A platform engineered around ",a.createElement("span",{className:"text-active-orange"},"Four Pillars of Dependability")),a.createElement("p",{className:"ui-text-sub-header font-medium text-dark-grey mb-4 sm:mb-6",style:{maxWidth:"27.5rem "}},"Synchronizing data in realtime is vital for a seamless user experience. That’s why we created the Four Pillars."),a.createElement("p",{className:"ui-text-p1 text-white mb-8 sm:mb-10 md:mb-0",style:{maxWidth:"27.5rem "}},"This mathematically modelled approach to system design guarantees business-critical realtime digital experiences at scale.")),a.createElement("div",{className:"col-span-12 md:col-span-6"},a.createElement("div",{className:"vt-four-pillars-hero-panels ui-grid-gap"},c.map((t,n)=>a.createElement("a",{href:`#${t.sectionId}`,className:"vt-four-pillars-hero-panel",key:n,style:{backgroundImage:`var(${t.gradient})`},onClick:a=>{u(e[n],a,t.sectionId)}},a.createElement("div",{className:"vt-four-pillars-hero-inner-panel"},a.createElement("div",{className:"flex items-center sm:items-start"},a.createElement("p",{className:"text-dark-grey flex-grow-0 flex-shrink-0 ui-text-p1 font-medium pr-3 sm:pr-0 sm:pb-3 border-r-2 sm:border-b-2 sm:border-r-0 border-dark-grey inline-block sm:self-start"},t.number),a.createElement("p",{className:"text-white sm:hidden ui-text-p1 font-medium ml-6"},t.name),a.createElement("div",{className:"relative ml-auto flex-1 h-10 sm:h-auto"},a.createElement("img",{className:"vt-four-pillars-hero-panel-img ml-auto",height:"40",width:"40",src:t.image,alt:""}))),a.createElement("p",{className:"vt-four-pillars-hero-panel-title ui-text-h3"},t.name),a.createElement("p",{className:"vt-four-pillars-hero-panel-description ui-text-p3 text-dark-grey"},t.menuDesc.top)))))))),d=n(69349),p=n(882),h=n(93247),f=n.p+"static/paddy-avatar-68b1d65bf1219e956f068304e3a4e4ca.png";const g=p.default.div.withConfig({displayName:"pillar-hero__Container",componentId:"sc-qzo2m5-0"})(["background-image:url(",");background-repeat:no-repeat;background-position-y:var(--position-y);"],({$url:e})=>e);var b=({id:e,sectionRef:t,pillarName:n,pillarNumber:i,pillarQuote:r,pillarColor:l,pillarImageUrl:o})=>{const s=`vt-pillar-parallax-${n.toLowerCase()}`;return(0,h.A)({animationPlayed:!1,basicScrollData:{elemSelector:`[data-id=${s}]`,from:"top-bottom",to:"middle-middle",direct:!0,props:{"--position-y":{from:"-80vh",to:"20vh",timing:e=>.95*e}}}}),a.createElement("section",null,a.createElement("div",{className:"relative bg-cool-black",i

1d:e},a.createElement(g,{$url:o,className:"vt-pillar-bg","data-id":s},a.createElement("div",{className:"ui-standard-container grid grid-cols-12 ui-grid-px pt-8 md:pt-24 pb-10 overflow-hidden relative z-20 opacity-100",ref:t},a.createElement("div",{className:"col-span-full md:col-span-11 md:col-start-2 z-20"},a.createElement("div",{className:"ui-text-h3 text-dark-grey pb-4 border-b-2 border-dark-grey w-min mb-2"},i),a.createElement("div",{className:"vt-big-title text-white -ml-1 md:-ml-2"},n)),a.createElement("div",{className:"col-span-full sm:col-span-6 sm:col-start-2 md:col-span-5 md:col-start-2 pt-10 z-20"},a.createElement(d.A,{name:"icon-gui-quote-marks-fill",size:"1.5rem",color:l}),a.createElement("div",{className:"ui-text-quote text-white mb-6 sm:mb-8 relative z-10"},r),a.createElement("div",{className:"flex flex-row"},a.createElement("img",{src:f,className:"w-12 h-12 mr-4"}),a.createElement("div",{className:"pt-1 mb-20 sm:mb-64 md:mb-20"},a.createElement("div",{className:"ui-text-p2 font-medium text-white"},"Dr Paddy Byers"),a.createElement("div",{className:"ui-text-p3 text-dark-grey"},"CTO of Ably"))))))))},y=n(33660);var v=({sectionRefs:e,currentIndex:t})=>a.createElement("div",{className:"bg-white border-t border-b border-mid-grey"},a.createElement("div",{className:"ui-standard-container"},a.createElement("div",{className:"w-full text-white flex flex-row flex-wrap py-16 justify-between z-20"},a.createElement("div",{className:"flex flex-row"},a.createElement("div",{className:"hidden sm:block"},a.createElement(y.eu,null)),a.createElement("div",{className:"flex flex-row items-center ml-0 sm:ml-10 md:ml-16 h-full w-full sm:w-auto ui-text-label2 font-medium text-black"},c.map((n,i)=>a.createElement("a",{href:`#${n.sectionId}`,key:`menu-${i}`,className:"mr-2 sm:mr-8 hover:text-active-orange cursor-pointer break-normal\n              "+(t===i?"text-active-orange":""),onClick:a=>{t!==i&&u(e[i],a,n.sectionId)}},a.createElement("span",{className:"hidden sm:inline"},n.number)," ",n.name)))),a.createElement("div",{className:"block sm:hidden"},a.createElement(y.eu,null)))));var w=({heading:e,intro:t})=>a.createElement("section",{className:"bg-charcoal-grey py-20 sm:py-24 md:py-32"},a.createElement("div",{className:"ui-standard-container grid grid-cols-12 ui-grid-px"},a.createElement("div",{className:"col-span-full md:col-span-2"},a.createElement("h2",{className:"ui-text-overline1 pb-8"},e),a.createElement("div",{className:"border-b-2 border-active-orange",style:{width:"2.5rem"}})),a.createElement("div",{className:"col-span-full md:col-span-7 md:col-start-6"},t())));var E=({heading:e,description:t,body:n})=>a.createElement("section",{className:"ui-standard-container grid grid-cols-12 ui-grid-px pt-big"},a.createElement("div",{className:"col-span-full md:col-span-4 md:col-start-1 relative"},a.createElement("div",{className:"vt-sticky-body-heading"},a.createElement("div",{className:"ui-text-h1 mb-6 md:mb-8"},e),t&&a.createElement("div",{className:"ui-text-p2 text-charcoal-grey vt-pillar-link-holder vt-pillars-p-holder vt-pillars-ul-holder mb-12 md:mb-0"},t()))),a.createElement("div",{className:"col-span-full md:col-span-7 md:col-start-6"},a.createElement("div",{className:"vt-pillar-body-text-holder vt-pillar-link-holder"},n())));var x=({heading:e,description:t,buttonLabel:n,buttonPath:i,image:r})=>a.createElement("div",{className:"ui-standard-container grid grid-cols-12 ui-grid-px pt-big pb-big relative"},a.createElement("div",{className:"col-span-full md:col-span-10 md:col-start-2 bg-cool-black rounded grid grid-cols-10 p-6 sm:p-10 md:p-16 relative"},a.createElement("div",{className:"col-span-full sm:col-span-7 md:col-span-6 pb-24 sm:pb-0 relative z-20"},a.createElement("h3",{className:"ui-text-h3 text-white mb-6"},e),a.createElement("p",{className:"ui-text-p2 text-mid-grey mb-6"},t),a.createElement(o.A,{contentfulLinkButton:{label:n,path:i},extClass:"ui-btn-secondary-invert",type:"button"})),a.createElement("div",{className:"absolute right-2 sm:right-12 md:right-16 bottom-6 sm:top-12 md:top-10 z-10"},a.createElement("img",{src:r,className:"vt-pillar-footer-image"}))));var k=()=>{const e=(0,a.useRef)(null),t=[(0,a.useRef)(null),(0,a.useRef)(null),(0,a.useRef)(null),(0,a.useRef)(null)];return a.createElement("div",{ref:e},a.createElement(m,{sectionRefs:t}),c.map((n,i)=>a.createElement("div",{key:i},a.createElement(b,{id:n.sectionId,sectionRef:t[i],pillarName:n.name,pillarNumber:n.number,pillarQuote:n.heroQuote,pillarColor:n.color,pillarImageUrl:n.image}),a.createElement(w,{heading:n.intro.heading,intro:n.intro.description}),n.body.map((e,t)=>a.createElement("div",{key:`${i}-${t}`}

1,a.createElement(E,{heading:e.heading,description:e.description,body:e.content,key:`pillar-body-${i}-${t}`}))),a.createElement(x,{heading:n.footer.heading,description:n.footer.description,buttonLabel:n.footer.buttonLabel,buttonPath:n.footer.buttonPath,image:n.image,key:`pillar-footer-${i}`}),a.createElement(v,{topOfScreenRef:e,sectionRefs:t,currentIndex:i}))),a.createElement(s,null))},N=n(61822),A=n(45396);var I=({data:e})=>{const t=(0,i.A)(),{contentfulGlobalDataAbly:n}=e;return a.createElement(i.u.Provider,{value:t},a.createElement(l.A,{siteMetadata:e.site.siteMetadata,config:{footerCta:!1,mainClassName:"font-sans antialiased",scrollToTop:!1,navTheme:"dark"}},a.createElement(r.A,{title:"Four Pillars of Dependability | Ably Realtime",slug:"four-pillars-of-dependability",metaImage:A.A,metaDescription:"Ably’s enterprise-grade platform is engineered around Four Pillars of Dependability to guarantee realtime data synchronization at scale. This transparent, mathematically modelled approach to system design guarantees business critical functionality at scale while allowing you to efficiently design, quickly ship, and seamlessly scale realtime digital experiences.",siteUrl:e.site.siteMetadata.siteUrl}),a.createElement(k,null),null!=n&&n.defaultFeatureFooter?a.createElement(N.A,{data:{...n.defaultFeatureFooter}}):null))}},45396:function(e,t,n){"use strict";t.A=n.p+"static/[email protected]"},61822:function(e,t,n){"use strict";n.d(t,{A:function(){return m}});var a=n(96540),i=n(5556),r=n.n(i),l=n(69349),o=n(48078),s=n(38238),c=n(64319),u=n(86632);r().shape({promoHeading:r().string,promoSubheading:r().string,promoCta:r().shape({label:r().string.isRequired,path:r().string,action:r().string,labelWhenDisabled:r().string}),promoImage:c.d,getStartedHeading:r().string,getStartedSubheading:r().string,getStartedListItems:r().arrayOf(r().string),getStartedCta:r().shape({label:r().string.isRequired,path:r().string,action:r().string,labelWhenDisabled:r().string}),promoEndText:r().shape({raw:r().string})});var m=({data:e})=>{const t=(0,s._X)();return a.createElement("section",{className:"vt-feature-footer","data-id":"feature-footer"},a.createElement("div",{className:"pt-small pb-small w-full bp-lg max-w-screen-xl mx-auto md:grid grid-cols-3 ui-grid-gap ui-grid-px"},a.createElement("div",{className:"col-span-2 bg-cool-black text-white rounded-lg overflow-hidden sm:flex flex-row mb-6 md:mb-0"},a.createElement("div",{className:"grid grid-cols-8 ui-grid-gap"},a.createElement("div",{className:"col-span-full sm:col-span-4 h-64 overflow-hidden sm:overflow-visible "},a.createElement(c.A,{asset:e.promoImage,hasZoom:!1,extClass:"w-full h-cover"})),a.createElement("div",{className:"col-span-full sm:col-span-4 py-6 sm:py-8 pr-6 sm:pr-8 pl-6 md:pl-0 flex-1 h-full"},a.createElement("div",{className:"flex flex-col h-full space-between"},a.createElement("span",{className:"flex-1"},a.createElement("h3",{className:"ui-text-h3 text-white mb-6 flex-1"},e.promoHeading),a.createElement("p",{className:"ui-text-p1 text-white"},e.promoSubheading),a.createElement(u.A,{contentfulLinkButton:e.promoCta,extClass:"ui-btn-secondary-invert self-start mt-6",type:"button"})),a.createElement("span",{className:"flex-0 mt-6 md:mt-0 font-bold"},e.promoEndText?(0,o.C)(e.promoEndText,t):null))))),a.createElement("div",{className:"bg-white rounded-lg p-6 sm:p-8 w-auto"},a.createElement("div",{className:"flex flex-col h-full space-between"},a.createElement("span",{className:"flex-1"},a.createElement("h3",{className:"ui-text-h3 mb-6"},e.getStartedHeading),a.createElement("p",{className:"ui-text-p1 font-bold mb-4"},e.getStartedSubheading),a.createElement("div",{className:"relative ui-text-p1 leading-8"},e.getStartedListItems.map((e,t)=>a.createElement("div",{key:t},a.createElement(l.A,{name:"icon-gui-check-outline",size:"1.5rem",additionalCSS:"align-text-bottom mr-4"}),e)))),a.createElement("span",{className:"flex-0"},a.createElement(u.A,{contentfulLinkButton:e.getStartedCta,extClass:"ui-btn-secondary self-start mt-6",type:"button"}))))))}},85184:function(e){e.exports=function e(t,n,a){function i(l,o){if(!n[l]){if(!t[l]){if(r)return r(l,!0);var s=new Error("Cannot find module '"+l+"'");throw s.code="MODULE_NOT_FOUND",s}var c=n[l]={exports:{}};t[l][0].call(c.exports,function(e){return i(t[l][1][e]||e)},c,c.exports,e,t,n,a)}return n[l].exports}for(var r=void 0,l=0;l<a.length;l++)i(a[l]);return i}({1:[function(e,t,n){t.exports=function(e){var t=2.5949095;return(e*=2)<1?e*e*((t+1)*e-t)*.5:.5*((e-=2)*e*((t+1)*e+t)+2)}},{}],2:[function(e,t,n){t.exports=function(e){var t=1.70158;return e*e*((t+1)*e-t)}},{}],3:[function(e,t,n){t.exports=function(e){var t=1.70158;return--e*e*((t+1)*e+t)+1}},{}],4:[function(e,t,n){var a=e("./bounce-out");t.exports=function(e){return e<.5?.5*(1-a(1-2*e)):.5*a(2*e-1)+.5}},{"./bounce-out":6}],5:[function(e,t,n){var a=e("./bounce-out");t.exports=function(e){return 1-a(1-e)}},{"./bounce-out":6}],6:[function(e,t,n){t.exports=function(e){var t=e*e;return e<4/11?7.5625*t:e<8/11?9.075*t-9.9*e+3.4:e<.9?4356/361*t-35442/1805*e+16061/1805:10.8*e*e-20.52*e+10.72}},{}],7:[function(e,t,n){t.exports=function(e){return(e*=2)<1?-.5*(Math.sqrt(1-e*e)-1):.5*(Math.sqrt(1-(e-=2)*e)+1)}},{}],8:[function(e,t,n){t.exports=function(e){return 1-Math.sqrt(1-e*e)}},{}],9:[function(e,t,n){t.exports=function(e){return Math.sqrt(1- --e*e)}},{}],10:[function(e,t,n){t.exports=function(e){return e<.5?4*e*e*e:.5*Math.pow(2*e-2,3)+1}},{}],11:[function(e,t,n){t.exports=function(e){return e*e*e}},{}],12:[function(e,t,n){t.exports=function(e){var t=e-1;return t*t*t+1}},{}],13:[function(e,t,n){t.exports=function(e){return e<.5?.5*Math.sin(13*Math.PI/2*2*e)*Math.pow(2,10*(2*e-1)):.5*Math.sin(-13*Math.PI/2*(2*e-1+1))*Math.pow(2,-10*(2*e-1))+1}},{}],14:[function(e,t,n){t.exports=function(e){return Math.sin(13*e*Math.PI/2)*Math.pow(2,10*(e-1))}},{}],15:[function(e,t,n){t.exports=function(e){return Math.sin(-13*(e+1)*Math.PI/2)*Math.pow(2,-10*e)+1}},{}],16:[function(e,t,n){t.exports=function(e){return 0===e||1===e?e:e<.5?.5*Math.pow(2,20*e-10):-.5*Math.pow(2,10-20*e)+1}},{}],17:[function(e,t,n){t.exports=function(e){return 0===e?e:Math.pow(2,10*(e-1))}},{}],18:[function(e,t,n){t.exports=function(e){return 1===e?e:1-Math.pow(2,-10*e)}},{}],19:[function(e,t,n){t.exports={backInOut:e("./back-in-out"),backIn:e("./back-in"),backOut:e("./back-out"),bounceInOut:e("./bounce-in-out"),bounceIn:e("./bounce-in"),bounceOut:e("./bounce-out"),circInOut:e("./circ-in-out"),circIn:e("./circ-in"),circOut:e("./circ-out"),cub

1icInOut:e("./cubic-in-out"),cubicIn:e("./cubic-in"),cubicOut:e("./cubic-out"),elasticInOut:e("./elastic-in-out"),elasticIn:e("./elastic-in"),elasticOut:e("./elastic-out"),expoInOut:e("./expo-in-out"),expoIn:e("./expo-in"),expoOut:e("./expo-out"),linear:e("./linear"),quadInOut:e("./quad-in-out"),quadIn:e("./quad-in"),quadOut:e("./quad-out"),quartInOut:e("./quart-in-out"),quartIn:e("./quart-in"),quartOut:e("./quart-out"),quintInOut:e("./quint-in-out"),quintIn:e("./quint-in"),quintOut:e("./quint-out"),sineInOut:e("./sine-in-out"),sineIn:e("./sine-in"),sineOut:e("./sine-out")}},{"./back-in":2,"./back-in-out":1,"./back-out":3,"./bounce-in":5,"./bounce-in-out":4,"./bounce-out":6,"./circ-in":8,"./circ-in-out":7,"./circ-out":9,"./cubic-in":11,"./cubic-in-out":10,"./cubic-out":12,"./elastic-in":14,"./elastic-in-out":13,"./elastic-out":15,"./expo-in":17,"./expo-in-out":16,"./expo-out":18,"./linear":20,"./quad-in":22,"./quad-in-out":21,"./quad-out":23,"./quart-in":25,"./quart-in-out":24,"./quart-out":26,"./quint-in":28,"./quint-in-out":27,"./quint-out":29,"./sine-in":31,"./sine-in-out":30,"./sine-out":32}],20:[function(e,t,n){t.exports=function(e){return e}},{}],21:[function(e,t,n){t.exports=function(e){return(e/=.5)<1?.5*e*e:-.5*(--e*(e-2)-1)}},{}],22:[function(e,t,n){t.exports=function(e){return e*e}},{}],23:[function(e,t,n){t.exports=function(e){return-e*(e-2)}},{}],24:[function(e,t,n){t.exports=function(e){return e<.5?8*Math.pow(e,4):-8*Math.pow(e-1,4)+1}},{}],25:[function(e,t,n){t.exports=function(e){return Math.pow(e,4)}},{}],26:[function(e,t,n){t.exports=function(e){return Math.pow(e-1,3)*(1-e)+1}},{}],27:[function(e,t,n){t.exports=function(e){return(e*=2)<1?.5*e*e*e*e*e:.5*((e-=2)*e*e*e*e+2)}},{}],28:[function(e,t,n){t.exports=function(e){return e*e*e*e*e}},{}],29:[function(e,t,n){t.exports=function(e){return--e*e*e*e*e+1}},{}],30:[function(e,t,n){t.exports=function(e){return-.5*(Math.cos(Math.PI*e)-1)}},{}],31:[function(e,t,n){t.exports=function(e){var t=Math.cos(e*Math.PI*.5);return Math.abs(t)<1e-14?1:1-t}},{}],32:[function(e,t,n){t.exports=function(e){return Math.sin(e*Math.PI/2)}},{}],33:[function(e,t,n){t.exports=function(e,t){t||(t=[0,""]),e=String(e);var n=parseFloat(e,10);return t[0]=n,t[1]=e.match(/[\d.\-\+]*\s*(.*)/)[1]||"",t}},{}],34:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.create=void 0;var a=r(e("parse-unit")),i=r(e("eases"));function r(e){return e&&e.__esModule?e:{default:e}}function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o,s,c,u=[],m="undefined"!=typeof window,d=function(){return(document.scrollingElement||document.documentElement).scrollTop},p=function(){return window.innerHeight||window.outerHeight},h=function(e){return!1===isNaN((0,a.default)(e)[0])},f=function(e){var t=(0,a.default)(e);return{value:t[0],unit:t[1]}},g=function(e){return null!==String(e).match(/^[a-z]+-[a-z]+$/)},b=function(e,t){return!0===e?t.elem:e instanceof HTMLElement==1?t.direct:t.global},y=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:d(),a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:p(),i=t.getBoundingClientRect(),r=e.match(/^[a-z]+/)[0],l=e.match(/[a-z]+$/)[0],o=0;return"top"===l&&(o-=0),"middle"===l&&(o-=a/2),"bottom"===l&&(o-=a),"top"===r&&(o+=i.top+n),"middle"===r&&(o+=i.top+n+i.height/2),"bottom"===r&&(o+=i.top+n+i.height),"".concat(o,"px")},v=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d(),n=e.getData(),a=n.to.value-n.from.value,i=(t-n.from.value)/(a/100),r=Math.min(Math.max(i,0),100),l=b(n.direct,{global:document.documentElement,elem:n.elem,direct:n.direct}),o=Object.keys(n.props).reduce(function(e,t){var a=n.props[t],i=a.from.unit||a.to.unit,l=a.from.value-a.to.value,o=a.timing(r/100),s=a.from.value-l*o,c=Math.round(1e4*s)/1e4;return e[t]=c+i,e},{}),s=i<0||i>100;return 1==(i>=0&&i<=100)&&n.inside(e,i,o),!0===s&&n.outside(e,i,o),{elem:l,props:o}},w=function(e,t){Object.keys(t).forEach(function(n){return function(e,t){e.style.setProperty(t.key,t.value)}(e,{key:n,value:t[n]})})};n.create=function(e){var t=null,n=!1,a={isActive:function(){return n},getData:function(){return t},calculate:function(){t=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(null==(e=Object.assign({},e)).inside&&(e.inside=function(){}),null==e.outside&&(e.outside=function(){}),null==e.direct&&(e.direct=!1),null==e.track&&(e.track=!0),null==e.props&&(e.props={}),null==e.from)throw new Error("Missing property `from`");

1if(null==e.to)throw new Error("Missing property `to`");if("function"!=typeof e.inside)throw new Error("Property `inside` must be undefined or a function");if("function"!=typeof e.outside)throw new Error("Property `outside` must be undefined or a function");if("boolean"!=typeof e.direct&&e.direct instanceof HTMLElement==0)throw new Error("Property `direct` must be undefined, a boolean or a DOM element/node");if(!0===e.direct&&null==e.elem)throw new Error("Property `elem` is required when `direct` is true");if("boolean"!=typeof e.track)throw new Error("Property `track` must be undefined or a boolean");if("object"!==l(e.props))throw new Error("Property `props` must be undefined or an object");if(null==e.elem){if(!1===h(e.from))throw new Error("Property `from` must be a absolute value when no `elem` has been provided");if(!1===h(e.to))throw new Error("Property `to` must be a absolute value when no `elem` has been provided")}else!0===g(e.from)&&(e.from=y(e.from,e.elem)),!0===g(e.to)&&(e.to=y(e.to,e.elem));return e.from=f(e.from),e.to=f(e.to),e.props=Object.keys(e.props).reduce(function(t,n){var a=Object.assign({},e.props[n]);if(!1===h(a.from))throw new Error("Property `from` of prop must be a absolute value");if(!1===h(a.to))throw new Error("Property `from` of prop must be a absolute value");if(a.from=f(a.from),a.to=f(a.to),null==a.timing&&(a.timing=i.default.linear),"string"!=typeof a.timing&&"function"!=typeof a.timing)throw new Error("Property `timing` of prop must be undefined, a string or a function");if("string"==typeof a.timing&&null==i.default[a.timing])throw new Error("Unknown timing for property `timing` of prop");return"string"==typeof a.timing&&(a.timing=i.default[a.timing]),t[n]=a,t},{}),e}(e)},update:function(){var e=v(a),t=e.elem,n=e.props;return w(t,n),n},start:function(){n=!0},stop:function(){n=!1},destroy:function(){u[r]=void 0}},r=u.push(a)-1;return a.calculate(),a},!0===m?(function e(t,n){var a=function(){requestAnimationFrame(function(){return e(t,n)})},i=function(e){return e.filter(function(e){return null!=e&&e.isActive()})}(u);if(0===i.length)return a();var r=d();if(n===r)return a();n=r,i.map(function(e){return v(e,r)}).forEach(function(e){var t=e.elem,n=e.props;return w(t,n)}),a()}(),window.addEventListener("resize",(o=function(){(function(e){return e.filter(function(e){return null!=e&&e.getData().track})})(u).forEach(function(e){e.calculate(),e.update()})},s=50,c=null,function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];clearTimeout(c),c=setTimeout(function(){return o.apply(void 0,t)},s)}))):console.warn("basicScroll is not executing because you are using it in an environment without a `window` object")},{eases:19,"parse-unit":33}]},{},[34])(34)},93247:function(e,t,n){"use strict";var a=n(96540),i=n(85184);t.A=function({basicScrollData:e,animationPlayed:t}){const{0:n,1:r}=(0,a.useState)(null);(0,a.useEffect)(()=>{n?t?(n.stop(),n.destroy()):n.start():r(function(e){let t=document.querySelector(e.elemSelector),n=null;if(t)try{n=i.create({...e,elem:t})}catch(a){console.log(a),n=a}return n}(e))},[t,n]),(0,a.useEffect)(()=>()=>{n&&(n.stop(),n.destroy())},[n])}}}]);