from pathlib import Path
# Reuse the previously authored standalone WebGL shader, adapted as a Tilda T123 embed fragment:
source = Path("/mnt/data/index.html").read_text(encoding="utf-8")
# Extract CSS style and script from prior file, keeping shader/logic intact but removing demo page/text.
style = source[source.index("")]
script = source[source.index("")]
# Replace demo-page-specific CSS with a fixed full-page background suitable for Tilda.
tilda_style = r'''
#tilda-liquid-webgl-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: #000000;
}
#tilda-liquid-webgl-canvas {
display: block;
width: 100%;
height: 100%;
}
/* Keep Tilda page content above the decorative background. */
#allrecords {
position: relative;
z-index: 1;
}
/* Keep the specified footer fully black. */
#rec3864132703 {
position: relative;
z-index: 2;
background: #000000 !important;
isolation: isolate;
}
'''
# Update script selectors and make hero intersection observation optional/whole page.
script = script.replace("document.getElementById('liquid-canvas')", "document.getElementById('tilda-liquid-webgl-canvas')")
script = script.replace("const hero = document.getElementById('hero');", "const hero = document.getElementById('tilda-liquid-webgl-bg');")
script = script.replace("document.getElementById('liquid-bg').style.backgroundImage", "document.getElementById('tilda-liquid-webgl-bg').style.backgroundImage")
script = script.replace("document.getElementById('liquid-bg').style.background =", "document.getElementById('tilda-liquid-webgl-bg').style.background =")
# For Tilda, observe the fixed background container; it fills viewport, so observer works as page stays visible.
# Resize is viewport-driven in addition to ResizeObserver.
fragment = f'''
'''
out = Path("/mnt/data/tilda_liquid_webgl_background.html")
out.write_text(fragment, encoding="utf-8")
print(f"Created {out} ({out.stat().st_size:,} bytes)")