[{"data":1,"prerenderedAt":611},["ShallowReactive",2],{"navigation":3,"/getting-started/introduction":238,"/getting-started/introduction-surround":608},[4,22,55,88,105,138,159,180,217],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"id":239,"title":11,"body":240,"description":601,"extension":602,"links":603,"meta":604,"navigation":605,"path":12,"seo":606,"stem":13,"__hash__":607},"docs/01.getting-started/1.introduction.md",{"type":241,"value":242,"toc":595},"minimark",[243,248,252,255,266,279,283,291,298,513,523,526,571,575,582,591],[244,245,247],"h2",{"id":246},"what-is-scena","What is Scena?",[249,250,251],"p",{},"Scena is an embeddable video widget designed to bring short-form video reels directly onto your website. The widget mounts as a floating overlay on top of your page — similar to what you see on social media platforms, but fully under your control.",[249,253,254],{},"Scena works on any type of site — landing pages, e-commerce stores, SaaS dashboards — without redirecting visitors elsewhere. The widget ships with configurable video playback, multiple visual shapes, a preview mode, and built-in interactive elements like a CTA button and a close control.",[249,256,257,258,265],{},"Built with ",[259,260,264],"a",{"href":261,"rel":262},"https://svelte.dev",[263],"nofollow","Svelte 5",", Scena compiles down to vanilla JavaScript with no framework runtime. The output integrates into React, Vue, Angular, or plain HTML without dependency conflicts. Distribution formats include ES Module, UMD, and CommonJS.",[267,268,270],"callout",{"color":269},"info",[249,271,272,273,278],{},"Scena is a fully open-source, non-commercial project. It's built and maintained by a small team in their free time with the goal of helping developers build better projects. If you encounter bugs or rough edges — we'd appreciate your patience and a ",[259,274,277],{"href":275,"rel":276},"https://github.com/use-retoo/scena",[263],"GitHub issue"," over frustration.",[244,280,282],{"id":281},"see-it-in-action","See it in action",[249,284,285,286,290],{},"The only required field is ",[287,288,289],"code",{},"video.src"," — everything else has sensible defaults. Placement and shape determine how the widget integrates into your page.",[292,293,294],"scena-container",{},[295,296],"scena-component",{":config":297},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":{\"text\":\"Get in touch\"},\"closeButton\":{}}",[299,300,305],"pre",{"className":301,"code":302,"language":303,"meta":304,"style":304},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const instance = await scena.mount({\n  video: { src: '/video.mp4', autoplay: false },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  container: {\n    position: ComponentPosition.ABSOLUTE,\n    placement: ComponentPlacement.MIDDLE_CENTER,\n  },\n  ctaButton: { text: 'Get in touch' },\n});\n","ts","",[287,306,307,344,387,406,424,435,453,471,477,501],{"__ignoreMap":304},[308,309,312,316,320,324,328,331,334,338,341],"span",{"class":310,"line":311},"line",1,[308,313,315],{"class":314},"spNyl","const",[308,317,319],{"class":318},"sTEyZ"," instance ",[308,321,323],{"class":322},"sMK4o","=",[308,325,327],{"class":326},"s7zQu"," await",[308,329,330],{"class":318}," scena",[308,332,333],{"class":322},".",[308,335,337],{"class":336},"s2Zo4","mount",[308,339,340],{"class":318},"(",[308,342,343],{"class":322},"{\n",[308,345,347,351,354,357,360,362,365,369,372,375,378,380,384],{"class":310,"line":346},2,[308,348,350],{"class":349},"swJcz","  video",[308,352,353],{"class":322},":",[308,355,356],{"class":322}," {",[308,358,359],{"class":349}," src",[308,361,353],{"class":322},[308,363,364],{"class":322}," '",[308,366,368],{"class":367},"sfazB","/video.mp4",[308,370,371],{"class":322},"'",[308,373,374],{"class":322},",",[308,376,377],{"class":349}," autoplay",[308,379,353],{"class":322},[308,381,383],{"class":382},"sfNiH"," false",[308,385,386],{"class":322}," },\n",[308,388,390,393,395,398,400,403],{"class":310,"line":389},3,[308,391,392],{"class":349},"  size",[308,394,353],{"class":322},[308,396,397],{"class":318}," ComponentSize",[308,399,333],{"class":322},[308,401,402],{"class":318},"MD",[308,404,405],{"class":322},",\n",[308,407,409,412,414,417,419,422],{"class":310,"line":408},4,[308,410,411],{"class":349},"  shape",[308,413,353],{"class":322},[308,415,416],{"class":318}," ComponentShape",[308,418,333],{"class":322},[308,420,421],{"class":318},"CIRCLE",[308,423,405],{"class":322},[308,425,427,430,432],{"class":310,"line":426},5,[308,428,429],{"class":349},"  container",[308,431,353],{"class":322},[308,433,434],{"class":322}," {\n",[308,436,438,441,443,446,448,451],{"class":310,"line":437},6,[308,439,440],{"class":349},"    position",[308,442,353],{"class":322},[308,444,445],{"class":318}," ComponentPosition",[308,447,333],{"class":322},[308,449,450],{"class":318},"ABSOLUTE",[308,452,405],{"class":322},[308,454,456,459,461,464,466,469],{"class":310,"line":455},7,[308,457,458],{"class":349},"    placement",[308,460,353],{"class":322},[308,462,463],{"class":318}," ComponentPlacement",[308,465,333],{"class":322},[308,467,468],{"class":318},"MIDDLE_CENTER",[308,470,405],{"class":322},[308,472,474],{"class":310,"line":473},8,[308,475,476],{"class":322},"  },\n",[308,478,480,483,485,487,490,492,494,497,499],{"class":310,"line":479},9,[308,481,482],{"class":349},"  ctaButton",[308,484,353],{"class":322},[308,486,356],{"class":322},[308,488,489],{"class":349}," text",[308,491,353],{"class":322},[308,493,364],{"class":322},[308,495,496],{"class":367},"Get in touch",[308,498,371],{"class":322},[308,500,386],{"class":322},[308,502,504,507,510],{"class":310,"line":503},10,[308,505,506],{"class":322},"}",[308,508,509],{"class":318},")",[308,511,512],{"class":322},";\n",[267,514,516],{"icon":515,"to":187},"i-lucide-settings-2",[249,517,518,519,522],{},"See the ",[520,521,186],"strong",{}," example to explore the full config in practice — an interactive panel lets you tweak every parameter live and observe how the widget responds without writing a single line of code.",[244,524,89],{"id":525},"features",[527,528,529,537,544,551,557,564],"field-group",{},[530,531,534],"field",{"name":532,"type":533},"Video playback","autoplay, loop, mute, poster, seek, volume",[249,535,536],{},"Full control over the video element — configure on mount or change at runtime through the controller API.",[530,538,541],{"name":539,"type":540},"Shapes & sizes","circle, square, portrait, landscape",[249,542,543],{},"Multiple aspect ratios with predefined size presets. Combine any shape with any size.",[530,545,548],{"name":546,"type":547},"CTA button","configurable",[249,549,550],{},"Built-in call-to-action overlay with customizable text, styling, and a dedicated click event.",[530,552,554],{"name":553,"type":547},"Preview mode",[249,555,556],{},"Compact preview state that expands to the full widget on interaction.",[530,558,561],{"name":559,"type":560},"Event system","subscribe / unsubscribe",[249,562,563],{},"Typed events for playback changes, user interactions, and lifecycle hooks — connect analytics, navigation.",[530,565,568],{"name":566,"type":567},"Runtime updates","mergeConfig / setConfig",[249,569,570],{},"Patch or replace the entire config without unmounting.",[244,572,574],{"id":573},"bundle-size","Bundle size",[249,576,577,578,581],{},"The production bundle weighs under ",[520,579,580],{},"30 KB gzipped"," (JS + CSS combined). Zero runtime dependencies — nothing is loaded beyond the video source you provide.",[267,583,585],{"icon":584,"to":232},"i-lucide-arrow-right",[249,586,587,588,590],{},"Full breakdown by format in the ",[520,589,231],{}," reference.",[592,593,594],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":304,"searchDepth":311,"depth":346,"links":596},[597,598,599,600],{"id":246,"depth":346,"text":247},{"id":281,"depth":346,"text":282},{"id":525,"depth":346,"text":89},{"id":573,"depth":346,"text":574},"Lightweight embeddable widget for adding video reels to any website.","md",null,{},true,{"title":11,"description":601},"6wgDY7LbyoZSqbXOMvXrecaqN9sPxrFcA4B66G38DBc",[603,609],{"title":15,"path":16,"stem":17,"description":610,"children":-1},"Install @retoo/scena via npm, pnpm, yarn, or connect via CDN.",1777984317790]