[{"data":1,"prerenderedAt":803},["ShallowReactive",2],{"navigation":3,"/features/visibility":238,"/features/visibility-surround":798},[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":98,"body":240,"description":792,"extension":793,"links":794,"meta":795,"navigation":563,"path":99,"seo":796,"stem":100,"__hash__":797},"docs/04.features/2.visibility.md",{"type":241,"value":242,"toc":785},"minimark",[243,252,257,339,343,346,353,464,468,478,484,592,596,603,608,679,682,686,689,781],[244,245,246,247,251],"p",{},"The ",[248,249,250],"code",{},"visibility"," config controls whether the widget starts hidden and how it transitions between shown and hidden states. By default, the widget mounts hidden and fades in once the video is ready — this avoids showing an empty container while the video loads.",[253,254,256],"h2",{"id":255},"config","Config",[258,259,260,279],"table",{},[261,262,263],"thead",{},[264,265,266,270,273,276],"tr",{},[267,268,269],"th",{},"Property",[267,271,272],{},"Type",[267,274,275],{},"Default",[267,277,278],{},"Description",[280,281,282,303,321],"tbody",{},[264,283,284,290,295,300],{},[285,286,287],"td",{},[248,288,289],{},"isHidden",[285,291,292],{},[248,293,294],{},"boolean",[285,296,297],{},[248,298,299],{},"true",[285,301,302],{},"Start the widget in a hidden state",[264,304,305,310,314,318],{},[285,306,307],{},[248,308,309],{},"isAnimated",[285,311,312],{},[248,313,294],{},[285,315,316],{},[248,317,299],{},[285,319,320],{},"Enable CSS animations for show/hide transitions",[264,322,323,328,332,336],{},[285,324,325],{},[248,326,327],{},"isShownOnReady",[285,329,330],{},[248,331,294],{},[285,333,334],{},[248,335,299],{},[285,337,338],{},"Automatically show the widget when the video is ready",[253,340,342],{"id":341},"show-on-ready","Show on ready",[244,344,345],{},"The default behavior — the widget mounts hidden and appears once the video is ready to play:",[347,348,349],"scena-container",{},[350,351],"scena-component",{":config":352},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false,\"visibility\":{\"isShownOnReady\":true,\"isAnimated\":true}}",[354,355,360],"pre",{"className":356,"code":357,"language":358,"meta":359,"style":359},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  visibility: {\n    isShownOnReady: true,\n  },\n});\n","ts","",[248,361,362,389,420,431,446,452],{"__ignoreMap":359},[363,364,367,371,375,379,383,386],"span",{"class":365,"line":366},"line",1,[363,368,370],{"class":369},"s7zQu","await",[363,372,374],{"class":373},"sTEyZ"," scena",[363,376,378],{"class":377},"sMK4o",".",[363,380,382],{"class":381},"s2Zo4","mount",[363,384,385],{"class":373},"(",[363,387,388],{"class":377},"{\n",[363,390,392,396,399,402,405,407,410,414,417],{"class":365,"line":391},2,[363,393,395],{"class":394},"swJcz","  video",[363,397,398],{"class":377},":",[363,400,401],{"class":377}," {",[363,403,404],{"class":394}," src",[363,406,398],{"class":377},[363,408,409],{"class":377}," '",[363,411,413],{"class":412},"sfazB","/video.mp4",[363,415,416],{"class":377},"'",[363,418,419],{"class":377}," },\n",[363,421,423,426,428],{"class":365,"line":422},3,[363,424,425],{"class":394},"  visibility",[363,427,398],{"class":377},[363,429,430],{"class":377}," {\n",[363,432,434,437,439,443],{"class":365,"line":433},4,[363,435,436],{"class":394},"    isShownOnReady",[363,438,398],{"class":377},[363,440,442],{"class":441},"sfNiH"," true",[363,444,445],{"class":377},",\n",[363,447,449],{"class":365,"line":448},5,[363,450,451],{"class":377},"  },\n",[363,453,455,458,461],{"class":365,"line":454},6,[363,456,457],{"class":377},"}",[363,459,460],{"class":373},")",[363,462,463],{"class":377},";\n",[253,465,467],{"id":466},"manual-control","Manual control",[244,469,470,471,473,474,477],{},"Use ",[248,472,289],{}," to manage visibility without waiting for the video. The widget stays hidden until ",[248,475,476],{},"instance.visibility.show()"," is called:",[347,479,480],{},[350,481],{":config":482,":---":483},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false,\"visibility\":{\"isHidden\":true}}","null",[354,485,487],{"className":356,"code":486,"language":358,"meta":359,"style":359},"await scena.mount({\n  video: { src: '/video.mp4' },\n  visibility: {\n    isHidden: true, \n  },\n});\n\n// Show when needed\ninstance.visibility.show();\n",[248,488,489,503,523,531,546,550,558,565,572],{"__ignoreMap":359},[363,490,491,493,495,497,499,501],{"class":365,"line":366},[363,492,370],{"class":369},[363,494,374],{"class":373},[363,496,378],{"class":377},[363,498,382],{"class":381},[363,500,385],{"class":373},[363,502,388],{"class":377},[363,504,505,507,509,511,513,515,517,519,521],{"class":365,"line":391},[363,506,395],{"class":394},[363,508,398],{"class":377},[363,510,401],{"class":377},[363,512,404],{"class":394},[363,514,398],{"class":377},[363,516,409],{"class":377},[363,518,413],{"class":412},[363,520,416],{"class":377},[363,522,419],{"class":377},[363,524,525,527,529],{"class":365,"line":422},[363,526,425],{"class":394},[363,528,398],{"class":377},[363,530,430],{"class":377},[363,532,533,536,538,540,543],{"class":365,"line":433},[363,534,535],{"class":394},"    isHidden",[363,537,398],{"class":377},[363,539,442],{"class":441},[363,541,542],{"class":377},",",[363,544,545],{"class":373}," \n",[363,547,548],{"class":365,"line":448},[363,549,451],{"class":377},[363,551,552,554,556],{"class":365,"line":454},[363,553,457],{"class":377},[363,555,460],{"class":373},[363,557,463],{"class":377},[363,559,561],{"class":365,"line":560},7,[363,562,564],{"emptyLinePlaceholder":563},true,"\n",[363,566,568],{"class":365,"line":567},8,[363,569,571],{"class":570},"sHwdD","// Show when needed\n",[363,573,575,578,580,582,584,587,590],{"class":365,"line":574},9,[363,576,577],{"class":373},"instance",[363,579,378],{"class":377},[363,581,250],{"class":373},[363,583,378],{"class":377},[363,585,586],{"class":381},"show",[363,588,589],{"class":373},"()",[363,591,463],{"class":377},[253,593,595],{"id":594},"disable-animations","Disable animations",[244,597,598,599,602],{},"Set ",[248,600,601],{},"isAnimated: false"," to skip the CSS transition and toggle visibility instantly:",[347,604,605],{},[350,606],{":config":607},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false,\"visibility\":{\"isShownOnReady\":true,\"isAnimated\":false}}",[354,609,611],{"className":356,"code":610,"language":358,"meta":359,"style":359},"await scena.mount({\n  video: { src: '/video.mp4' },\n  visibility: {\n    isAnimated: false,\n  },\n});\n",[248,612,613,627,647,655,667,671],{"__ignoreMap":359},[363,614,615,617,619,621,623,625],{"class":365,"line":366},[363,616,370],{"class":369},[363,618,374],{"class":373},[363,620,378],{"class":377},[363,622,382],{"class":381},[363,624,385],{"class":373},[363,626,388],{"class":377},[363,628,629,631,633,635,637,639,641,643,645],{"class":365,"line":391},[363,630,395],{"class":394},[363,632,398],{"class":377},[363,634,401],{"class":377},[363,636,404],{"class":394},[363,638,398],{"class":377},[363,640,409],{"class":377},[363,642,413],{"class":412},[363,644,416],{"class":377},[363,646,419],{"class":377},[363,648,649,651,653],{"class":365,"line":422},[363,650,425],{"class":394},[363,652,398],{"class":377},[363,654,430],{"class":377},[363,656,657,660,662,665],{"class":365,"line":433},[363,658,659],{"class":394},"    isAnimated",[363,661,398],{"class":377},[363,663,664],{"class":441}," false",[363,666,445],{"class":377},[363,668,669],{"class":365,"line":448},[363,670,451],{"class":377},[363,672,673,675,677],{"class":365,"line":454},[363,674,457],{"class":377},[363,676,460],{"class":373},[363,678,463],{"class":377},[244,680,681],{},"Unmounting also skips the hide transition and removes the widget immediately.",[253,683,685],{"id":684},"runtime-api","Runtime API",[244,687,688],{},"Control visibility through the instance:",[354,690,692],{"className":356,"code":691,"language":358,"meta":359,"style":359},"// Show the widget\ninstance.visibility.show();\n\n// Hide the widget\ninstance.visibility.hide();\n\n// Check current state\ninstance.visibility.isHidden; \ninstance.visibility.isShownOnReady; \n",[248,693,694,699,715,719,724,741,745,750,767],{"__ignoreMap":359},[363,695,696],{"class":365,"line":366},[363,697,698],{"class":570},"// Show the widget\n",[363,700,701,703,705,707,709,711,713],{"class":365,"line":391},[363,702,577],{"class":373},[363,704,378],{"class":377},[363,706,250],{"class":373},[363,708,378],{"class":377},[363,710,586],{"class":381},[363,712,589],{"class":373},[363,714,463],{"class":377},[363,716,717],{"class":365,"line":422},[363,718,564],{"emptyLinePlaceholder":563},[363,720,721],{"class":365,"line":433},[363,722,723],{"class":570},"// Hide the widget\n",[363,725,726,728,730,732,734,737,739],{"class":365,"line":448},[363,727,577],{"class":373},[363,729,378],{"class":377},[363,731,250],{"class":373},[363,733,378],{"class":377},[363,735,736],{"class":381},"hide",[363,738,589],{"class":373},[363,740,463],{"class":377},[363,742,743],{"class":365,"line":454},[363,744,564],{"emptyLinePlaceholder":563},[363,746,747],{"class":365,"line":560},[363,748,749],{"class":570},"// Check current state\n",[363,751,752,754,756,758,760,762,765],{"class":365,"line":567},[363,753,577],{"class":373},[363,755,378],{"class":377},[363,757,250],{"class":373},[363,759,378],{"class":377},[363,761,289],{"class":373},[363,763,764],{"class":377},";",[363,766,545],{"class":373},[363,768,769,771,773,775,777,779],{"class":365,"line":574},[363,770,577],{"class":373},[363,772,378],{"class":377},[363,774,250],{"class":373},[363,776,378],{"class":377},[363,778,327],{"class":373},[363,780,463],{"class":377},[782,783,784],"style",{},"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 .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 .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);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":359,"searchDepth":366,"depth":391,"links":786},[787,788,789,790,791],{"id":255,"depth":391,"text":256},{"id":341,"depth":391,"text":342},{"id":466,"depth":391,"text":467},{"id":594,"depth":391,"text":595},{"id":684,"depth":391,"text":685},"Control widget visibility with isHidden, isShownOnReady, and animated transitions.","md",null,{},{"title":98,"description":792},"yZ5IgNjnKMW7cksCn7RmquU9UFXVZLA-khyRWAhCBX8",[799,801],{"title":94,"path":95,"stem":96,"description":800,"children":-1},"Configure preview mode with temporary visual overrides before the user interacts with the widget.",{"title":102,"path":103,"stem":104,"description":802,"children":-1},"Automatically adapt widget size and shape to viewport width using breakpoint-based constants overrides.",1777984321219]