{"id":7580,"date":"2026-05-18T11:55:40","date_gmt":"2026-05-18T11:55:40","guid":{"rendered":"https:\/\/etchenet.com\/?page_id=7580"},"modified":"2026-05-27T20:29:14","modified_gmt":"2026-05-27T20:29:14","slug":"luxury-watch-scroll-experience","status":"publish","type":"page","link":"https:\/\/etchenet.com\/es\/luxury-watch-scroll-experience\/","title":{"rendered":"Experiencia de desplazamiento de relojes de lujo"},"content":{"rendered":"\n <style>\n :root {\n --etch-gold: #d7b46a;\n --etch-gold-light: #fff0bd;\n --etch-white: rgba(255, 255, 255, 0.96);\n --etch-muted: rgba(255, 255, 255, 0.68);\n --etch-border: rgba(255, 255, 255, 0.16);\n --etch-black: #050507;\n --etch-max: 1160px;\n }\n\n \n\n * { box-sizing: border-box; }\n a { color: inherit; text-decoration: none; }\n\n \n\n .etch-page-bg video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.82;\n transform: scale(1.015);\n filter: saturate(1.02) contrast(1.04);\n }\n\n .etch-page-bg::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background:\n linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.36) 27%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.44) 100%),\n linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.03) 38%, rgba(0,0,0,0.50) 100%);\n pointer-events: none;\n }\n\n .etch-lw-demo {\n position: relative;\n z-index: 2;\n width: 100%;\n min-height: 100vh;\n }\n\n .etch-lw-fake-header {\n position: fixed;\n top: 18px;\n left: 50%;\n z-index: 50;\n width: min(var(--etch-max), calc(100% - 32px));\n transform: translateX(-50%);\n }\n\n .etch-lw-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 22px;\n padding: 12px 16px;\n border: 1px solid var(--etch-border);\n border-radius: 999px;\n background: rgba(8, 10, 16, 0.38);\n backdrop-filter: blur(24px) saturate(150%);\n -webkit-backdrop-filter: blur(24px) saturate(150%);\n box-shadow: 0 18px 70px rgba(0,0,0,0.34);\n }\n\n .etch-lw-brand {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n color: var(--etch-white);\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-weight: 760;\n }\n\n .etch-lw-logo {\n width: 36px;\n height: 36px;\n flex: 0 0 36px;\n filter: drop-shadow(0 0 14px rgba(215,180,106,0.45));\n }\n\n .etch-lw-brand-text {\n display: flex;\n flex-direction: column;\n line-height: 1;\n }\n\n .etch-lw-brand-main { font-size: 0.88rem; }\n\n .etch-lw-brand-sub {\n margin-top: 5px;\n color: var(--etch-gold);\n font-size: 0.56rem;\n letter-spacing: 0.24em;\n font-weight: 500;\n }\n\n .etch-lw-menu {\n display: flex;\n align-items: center;\n gap: 24px;\n font-size: 0.74rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n .etch-lw-menu a { color: rgba(255,255,255,0.68); }\n .etch-lw-menu a:hover { color: var(--etch-gold-light); }\n\n .etch-lw-pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 36px;\n padding: 0 17px;\n border-radius: 999px;\n border: 1px solid rgba(215,180,106,0.54);\n color: var(--etch-gold-light);\n background: rgba(215,180,106,0.08);\n font-size: 0.76rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n .etch-lw-section {\n position: relative;\n z-index: 2;\n width: min(var(--etch-max), calc(100% - 32px));\n min-height: 100vh;\n margin: 0 auto;\n }\n\n .etch-lw-section > * {\n opacity: 1;\n filter: blur(0);\n }\n\n .etch-lw-demo.etch-snap-ready .etch-lw-section > * {\n opacity: 0.36;\n filter: blur(0.3px);\n transition: opacity 780ms ease, filter 780ms ease, transform 780ms ease;\n }\n\n .etch-lw-demo.etch-snap-ready .etch-lw-section.etch-lw-active > * {\n opacity: 1;\n filter: blur(0);\n }\n\n .etch-lw-hero {\n display: grid;\n grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);\n align-items: center;\n gap: 54px;\n padding-top: 110px;\n }\n\n .etch-hero-content {\n align-self: center;\n width: min(640px, 100%);\n }\n\n .etch-lw-timeline-section {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);\n align-items: center;\n gap: 0;\n }\n\n .etch-lw-timeline-section::before {\n content: \"\";\n position: absolute;\n top: 18vh;\n bottom: 18vh;\n left: 50%;\n width: 1px;\n transform: translateX(-50%);\n background: linear-gradient(180deg, transparent, rgba(215,180,106,0.30) 16%, rgba(255,240,189,0.52) 50%, rgba(215,180,106,0.30) 84%, transparent);\n box-shadow: 0 0 22px rgba(215,180,106,0.22);\n pointer-events: none;\n }\n\n .etch-timeline-dot {\n position: relative;\n grid-column: 2;\n grid-row: 1;\n justify-self: center;\n align-self: center;\n width: 16px;\n height: 16px;\n border-radius: 999px;\n border: 1px solid rgba(255,240,189,0.78);\n background: rgba(215,180,106,0.28);\n box-shadow: 0 0 0 8px rgba(215,180,106,0.08), 0 0 26px rgba(215,180,106,0.42);\n }\n\n .etch-timeline-content {\n grid-row: 1;\n width: min(500px, calc(100% - 20px));\n align-self: center;\n }\n\n .etch-timeline-content.is-left {\n grid-column: 1;\n justify-self: end;\n padding-right: clamp(18px, 2.5vw, 34px);\n }\n\n .etch-timeline-content.is-right {\n grid-column: 3;\n justify-self: start;\n padding-left: clamp(18px, 2.5vw, 34px);\n }\n\n .etch-lw-kicker {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 16px;\n color: var(--etch-gold);\n font-size: 0.72rem;\n font-weight: 760;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n }\n\n .etch-lw-kicker::before {\n content: \"\";\n width: 34px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--etch-gold));\n }\n\n .etch-lw-title {\n margin: 0;\n max-width: 640px;\n color: rgba(255,255,255,0.98);\n font-size: clamp(2.75rem, 5.6vw, 6.2rem);\n line-height: 0.91;\n letter-spacing: -0.065em;\n font-weight: 780;\n text-wrap: balance;\n }\n\n .etch-lw-title span,\n .etch-lw-heading span {\n color: transparent;\n background: linear-gradient(125deg, #fff3c4, #d7b46a 48%, #8a6a30);\n -webkit-background-clip: text;\n background-clip: text;\n }\n\n .etch-lw-heading {\n margin: 0;\n max-width: 600px;\n color: rgba(255,255,255,0.98);\n font-size: clamp(2.05rem, 3.85vw, 4.4rem);\n line-height: 0.96;\n letter-spacing: -0.052em;\n font-weight: 760;\n text-wrap: balance;\n }\n\n .etch-lw-text {\n max-width: 470px;\n margin: 20px 0 0;\n color: var(--etch-muted);\n font-size: clamp(0.98rem, 1.05vw, 1.12rem);\n line-height: 1.7;\n }\n\n .etch-lw-panel {\n width: min(430px, 100%);\n margin-top: 28px;\n padding: 22px 24px;\n border: 1px solid var(--etch-border);\n border-radius: 26px;\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)), rgba(8, 10, 16, 0.30);\n backdrop-filter: blur(24px) saturate(150%);\n -webkit-backdrop-filter: blur(24px) saturate(150%);\n box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);\n }\n\n .etch-lw-panel-title {\n margin: 0 0 10px;\n color: rgba(255,255,255,0.98);\n font-size: 0.86rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n }\n\n .etch-lw-panel p {\n margin: 0;\n color: rgba(255,255,255,0.66);\n line-height: 1.62;\n font-size: 0.96rem;\n }\n\n .etch-lw-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 13px;\n margin-top: 26px;\n }\n\n .etch-lw-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 46px;\n padding: 0 22px;\n border-radius: 999px;\n border: 1px solid rgba(215,180,106,0.62);\n color: #111;\n background: linear-gradient(135deg, #fff2bd, #d7b46a 56%, #9d7b38);\n font-weight: 760;\n letter-spacing: 0.045em;\n box-shadow: 0 18px 46px rgba(215,180,106,0.18);\n }\n\n .etch-lw-btn-dark {\n color: var(--etch-white);\n background: rgba(255,255,255,0.07);\n border-color: rgba(255,255,255,0.18);\n }\n\n .etch-lw-mini-specs {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 26px;\n }\n\n .etch-lw-mini-spec {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 13px;\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 999px;\n color: rgba(255,255,255,0.72);\n background: rgba(255,255,255,0.055);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n font-size: 0.78rem;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n }\n\n .etch-lw-mini-spec strong {\n color: var(--etch-gold-light);\n font-weight: 760;\n }\n\n .etch-lw-list {\n display: grid;\n gap: 12px;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .etch-lw-list li {\n display: flex;\n align-items: center;\n gap: 11px;\n color: rgba(255,255,255,0.70);\n line-height: 1.5;\n font-size: 0.95rem;\n }\n\n .etch-lw-list li::before {\n content: \"\";\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--etch-gold);\n box-shadow: 0 0 16px rgba(215,180,106,0.72);\n flex: 0 0 auto;\n }\n\n .etch-lw-thin-card {\n width: min(420px, 100%);\n margin-top: 26px;\n padding: 18px 20px;\n border: 1px solid rgba(255,255,255,0.14);\n border-radius: 22px;\n background: rgba(8,10,16,0.28);\n backdrop-filter: blur(20px) saturate(150%);\n -webkit-backdrop-filter: blur(20px) saturate(150%);\n box-shadow: 0 20px 60px rgba(0,0,0,0.28);\n }\n\n .etch-lw-thin-card strong {\n display: block;\n color: var(--etch-gold-light);\n margin-bottom: 7px;\n font-size: 0.76rem;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n }\n\n .etch-lw-thin-card span {\n color: rgba(255,255,255,0.66);\n line-height: 1.58;\n font-size: 0.93rem;\n }\n\n .etch-lw-final {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 34px;\n min-height: 100vh;\n padding: 112px 0 42px;\n text-align: center;\n }\n\n .etch-final-content {\n width: min(760px, 100%);\n margin: 0 auto;\n padding-top: 18px;\n }\n\n .etch-final-content .etch-lw-kicker {\n justify-content: center;\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-final-content .etch-lw-heading,\n .etch-final-content .etch-lw-text,\n .etch-final-content .etch-lw-panel {\n margin-left: auto;\n margin-right: auto;\n }\n\n .etch-final-content .etch-lw-actions { justify-content: center; }\n\n .etch-lw-footer {\n width: 100%;\n margin: 0 auto;\n padding: 28px;\n border: 1px solid var(--etch-border);\n border-radius: 32px;\n background: rgba(8,10,16,0.34);\n backdrop-filter: blur(24px) saturate(145%);\n -webkit-backdrop-filter: blur(24px) saturate(145%);\n box-shadow: 0 24px 80px rgba(0,0,0,0.30);\n text-align: left;\n }\n\n .etch-lw-footer-grid {\n display: grid;\n grid-template-columns: 1.4fr 1fr 1fr;\n gap: 28px;\n }\n\n .etch-lw-footer-title {\n margin: 0 0 11px;\n color: rgba(255,255,255,0.98);\n font-size: 0.88rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n }\n\n .etch-lw-footer-text,\n .etch-lw-footer-links a {\n color: rgba(255,255,255,0.60);\n font-size: 0.92rem;\n line-height: 1.66;\n }\n\n .etch-lw-footer-links {\n display: grid;\n gap: 7px;\n }\n\n .etch-lw-footer-bottom {\n display: flex;\n justify-content: space-between;\n gap: 18px;\n margin-top: 26px;\n padding-top: 18px;\n border-top: 1px solid rgba(255,255,255,0.12);\n color: rgba(255,255,255,0.46);\n font-size: 0.8rem;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .etch-lw-section > * { transition: none !important; }\n }\n\n @media (max-width: 980px) {\n .etch-lw-menu { display: none; }\n\n .etch-lw-hero {\n grid-template-columns: 1fr;\n padding-top: 118px;\n }\n\n .etch-lw-timeline-section {\n grid-template-columns: 1fr;\n align-items: center;\n padding: 118px 0 76px;\n }\n\n .etch-lw-timeline-section::before,\n .etch-timeline-dot { display: none; }\n\n .etch-timeline-content,\n .etch-timeline-content.is-left,\n .etch-timeline-content.is-right {\n grid-column: 1;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n justify-self: stretch;\n }\n\n .etch-lw-title { font-size: clamp(2.85rem, 15vw, 5.2rem); }\n .etch-lw-heading { font-size: clamp(2.2rem, 11vw, 4.2rem); }\n .etch-lw-panel, .etch-lw-thin-card { width: 100%; }\n\n .etch-lw-final {\n min-height: 100svh;\n padding: 112px 0 26px;\n }\n\n .etch-lw-footer-grid { grid-template-columns: 1fr; }\n .etch-lw-footer-bottom { flex-direction: column; }\n }\n\n @media (max-width: 560px) {\n .etch-lw-fake-header {\n top: 10px;\n width: min(100% - 20px, var(--etch-max));\n }\n\n .etch-lw-nav { padding: 11px 13px; }\n .etch-lw-brand-main { font-size: 0.78rem; }\n .etch-lw-brand-sub { font-size: 0.5rem; }\n .etch-lw-pill { display: none; }\n .etch-lw-section { width: min(100% - 24px, var(--etch-max)); }\n .etch-lw-footer { padding: 23px; }\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"etch-page-bg\" aria-hidden=\"true\">\n <video id=\"etchBgVideo\" muted playsinline preload=\"auto\">\n <source src=\".\/watch-background.mp4\" type=\"video\/mp4\">\n <\/video>\n <\/div>\n\n <main class=\"etch-lw-demo\" id=\"etchChronovaDemo\">\n <header class=\"etch-lw-fake-header\">\n <div class=\"etch-lw-nav\">\n <a class=\"etch-lw-brand\" href=\"#top\" aria-label=\"Chronova Atelier\">\n <svg class=\"etch-lw-logo\" viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"etchWatchGold\" x1=\"12\" y1=\"8\" x2=\"52\" y2=\"58\" gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#fff4c8\"><\/stop>\n <stop offset=\"0.48\" stop-color=\"#d7b46a\"><\/stop>\n <stop offset=\"1\" stop-color=\"#80612c\"><\/stop>\n <\/linearGradient>\n <\/defs>\n <path d=\"M24 4h16l-3 9H27L24 4Z\" fill=\"url(#etchWatchGold)\"><\/path>\n <path d=\"M27 51h10l3 9H24l3-9Z\" fill=\"url(#etchWatchGold)\"><\/path>\n <circle cx=\"32\" cy=\"32\" r=\"19\" fill=\"none\" stroke=\"url(#etchWatchGold)\" stroke-width=\"4\"><\/circle>\n <circle cx=\"32\" cy=\"32\" r=\"3\" fill=\"url(#etchWatchGold)\"><\/circle>\n <path d=\"M32 20v12l8 7\" fill=\"none\" stroke=\"url(#etchWatchGold)\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n <path d=\"M18 32h4M42 32h4M32 18v4M32 42v4\" stroke=\"#fff0bd\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\".8\"><\/path>\n <\/svg>\n <span class=\"etch-lw-brand-text\">\n <span class=\"etch-lw-brand-main\">Chronova<\/span>\n <span class=\"etch-lw-brand-sub\">Atelier<\/span>\n <\/span>\n <\/a>\n <nav class=\"etch-lw-menu\" aria-label=\"Demo navigation\">\n <a href=\"#mechanism\">Mechanism<\/a>\n <a href=\"#craft\">Craft<\/a>\n <a href=\"#motion\">Motion<\/a>\n <a href=\"#reveal\">Reveal<\/a>\n <\/nav>\n <a class=\"etch-lw-pill\" href=\"#experience\">Experience<\/a>\n <\/div>\n <\/header>\n\n <section id=\"top\" class=\"etch-lw-section etch-lw-hero\">\n <div class=\"etch-hero-content\">\n <div class=\"etch-lw-kicker\">Luxury Scroll Demo<\/div>\n <h1 class=\"etch-lw-title\">Luxury Watch <span>Scroll<\/span><\/h1>\n <p class=\"etch-lw-text\">A cinematic landing page where the movement of time is revealed by the scroll.<\/p>\n <div class=\"etch-lw-actions\">\n <a class=\"etch-lw-btn\" href=\"#mechanism\">Start the journey<\/a>\n <a class=\"etch-lw-btn etch-lw-btn-dark\" href=\"#experience\">Plugin demo<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"mechanism\" class=\"etch-lw-section etch-lw-timeline-section\">\n <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n <div class=\"etch-timeline-content is-right\">\n <div class=\"etch-lw-kicker\">01 \/ Mechanism<\/div>\n <h2 class=\"etch-lw-heading\">Mechanical <span>Soul<\/span><\/h2>\n <p class=\"etch-lw-text\">Suspended components appear progressively as the page controls the cinematic rhythm.<\/p>\n <div class=\"etch-lw-panel\">\n <h3 class=\"etch-lw-panel-title\">Precision in Motion<\/h3>\n <p>The scroll becomes the timeline of the mechanism.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"craft\" class=\"etch-lw-section etch-lw-timeline-section\">\n <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n <div class=\"etch-timeline-content is-left\">\n <div class=\"etch-lw-kicker\">02 \/ Materials<\/div>\n <h2 class=\"etch-lw-heading\">Light, Steel and Reflection<\/h2>\n <p class=\"etch-lw-text\">A premium atmosphere built on metal, shadow, glass and warm gold highlights.<\/p>\n <div class=\"etch-lw-mini-specs\">\n <span class=\"etch-lw-mini-spec\"><strong>Steel<\/strong> Case<\/span>\n <span class=\"etch-lw-mini-spec\"><strong>Sapphire<\/strong> Glass<\/span>\n <span class=\"etch-lw-mini-spec\"><strong>Gold<\/strong> Light<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"motion\" class=\"etch-lw-section etch-lw-timeline-section\">\n <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n <div class=\"etch-timeline-content is-right\">\n <div class=\"etch-lw-kicker\">03 \/ Storytelling<\/div>\n <h2 class=\"etch-lw-heading\">Every Detail in Motion<\/h2>\n <p class=\"etch-lw-text\">The background video is not decorative. It becomes the structure of the product story.<\/p>\n <div class=\"etch-lw-panel\">\n <ul class=\"etch-lw-list\">\n <li>Scroll-controlled cinematic background<\/li>\n <li>Transparent glassmorphism interface<\/li>\n <li>Progressive product reveal<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"reveal\" class=\"etch-lw-section etch-lw-timeline-section\">\n <span class=\"etch-timeline-dot\" aria-hidden=\"true\"><\/span>\n <div class=\"etch-timeline-content is-left\">\n <div class=\"etch-lw-kicker\">04 \/ Reveal<\/div>\n <h2 class=\"etch-lw-heading\">The Watch Reveals Itself<\/h2>\n <p class=\"etch-lw-text\">The final frames bring the completed watch into focus while the interface stays discreet.<\/p>\n <div class=\"etch-lw-thin-card\">\n <strong>Scroll Frame Control<\/strong>\n <span>The visitor controls the cinematic reveal naturally, section after section.<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"experience\" class=\"etch-lw-section etch-lw-final\">\n <div class=\"etch-final-content\">\n <div class=\"etch-lw-kicker\">WordPress Plugin Demo<\/div>\n <h2 class=\"etch-lw-heading\">Scroll-Controlled Product Storytelling<\/h2>\n <p class=\"etch-lw-text\">A fictional luxury watch landing page designed to demonstrate a cinematic video background controlled by scroll.<\/p>\n <div class=\"etch-lw-panel\">\n <h3 class=\"etch-lw-panel-title\">Luxury Watch Scroll Experience<\/h3>\n <p>Transparent content above an immersive video timeline.<\/p>\n <div class=\"etch-lw-actions\">\n <a class=\"etch-lw-btn\" href=\"#top\">Replay experience<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <footer class=\"etch-lw-footer\">\n <div class=\"etch-lw-footer-grid\">\n <div>\n <h3 class=\"etch-lw-footer-title\">Chronova Atelier<\/h3>\n <p class=\"etch-lw-footer-text\">Fictional luxury watch brand created for a scroll-controlled video background demonstration.<\/p>\n <\/div>\n <div>\n <h3 class=\"etch-lw-footer-title\">Collection<\/h3>\n <div class=\"etch-lw-footer-links\">\n <a href=\"#mechanism\">Mechanical Soul<\/a>\n <a href=\"#craft\">Steel &amp; Light<\/a>\n <a href=\"#reveal\">Final Reveal<\/a>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"etch-lw-footer-title\">Experience<\/h3>\n <div class=\"etch-lw-footer-links\">\n <a href=\"#experience\">Scroll Video Demo<\/a>\n <a href=\"#top\">Back to top<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"etch-lw-footer-bottom\">\n <span>\u00a9 2026 Chronova Atelier \u2014 Fictional demo brand<\/span>\n <span>Powered by scroll-controlled cinematic storytelling<\/span>\n <\/div>\n <\/footer>\n <\/section>\n <\/main>\n\n <script>\n (function () {\n function startEtchSnap() {\n var root = document.querySelector('.etch-lw-demo');\n\n if (!root) {\n window.setTimeout(startEtchSnap, 300);\n return;\n }\n\n if (root.dataset.etchSnapReady === '1') return;\n\n root.dataset.etchSnapReady = '1';\n root.classList.add('etch-snap-ready');\n\n var sections = Array.prototype.slice.call(root.querySelectorAll('.etch-lw-section'));\n var video = document.getElementById('etchBgVideo');\n\n if (!sections.length) return;\n\n var snapDuration = 1900;\n var wheelThreshold = 8;\n var touchThreshold = 44;\n var activeIndex = 0;\n var isAnimating = false;\n var touchStartY = 0;\n var touchStartX = 0;\n var resizeTimer = null;\n var wheelLockTimer = null;\n\n function clamp(value, min, max) {\n return Math.max(min, Math.min(max, value));\n }\n\n function easeInOutCubic(t) {\n if (t < 0.5) return 4 * t * t * t;\n return 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n }\n\n function getScrollY() {\n return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\n }\n\n function getElementTop(element) {\n return getScrollY() + element.getBoundingClientRect().top;\n }\n\n function isDemoZoneActive() {\n var rect = root.getBoundingClientRect();\n var topLimit = window.innerHeight * 0.75;\n var bottomLimit = window.innerHeight * 0.25;\n if (rect.top >= topLimit) return false;\n if (rect.bottom <= bottomLimit) return false;\n return true;\n }\n\n function getNearestSectionIndex() {\n var nearest = 0;\n var nearestDistance = Infinity;\n sections.forEach(function (section, index) {\n var distance = Math.abs(section.getBoundingClientRect().top);\n if (distance < nearestDistance) {\n nearestDistance = distance;\n nearest = index;\n }\n });\n return nearest;\n }\n\n function setActiveSection(index) {\n activeIndex = clamp(index, 0, sections.length - 1);\n sections.forEach(function (section, sectionIndex) {\n if (sectionIndex === activeIndex) section.classList.add('etch-lw-active');\n else section.classList.remove('etch-lw-active');\n });\n }\n\n function updateVideoProgress() {\n if (!video) return;\n if (!video.duration) return;\n if (!isFinite(video.duration)) return;\n\n var rootTop = getElementTop(root);\n var rootHeight = root.offsetHeight - window.innerHeight;\n var rawProgress = 0;\n\n if (rootHeight > 0) rawProgress = (getScrollY() - rootTop) \/ rootHeight;\n\n var progress = clamp(rawProgress, 0, 1);\n var targetTime = progress * Math.max(video.duration - 0.08, 0);\n\n try {\n if (Math.abs(video.currentTime - targetTime) > 0.035) video.currentTime = targetTime;\n } catch (error) {}\n }\n\n function refreshActiveSection() {\n setActiveSection(getNearestSectionIndex());\n updateVideoProgress();\n }\n\n function scrollToSection(index) {\n var targetIndex = clamp(index, 0, sections.length - 1);\n var targetSection = sections[targetIndex];\n if (!targetSection) return;\n\n var startY = getScrollY();\n var targetY = getElementTop(targetSection);\n var distance = targetY - startY;\n\n if (Math.abs(distance) < 2) {\n setActiveSection(targetIndex);\n updateVideoProgress();\n return;\n }\n\n isAnimating = true;\n setActiveSection(targetIndex);\n\n var startTime = performance.now();\n\n function animate(now) {\n var elapsed = now - startTime;\n var progress = Math.min(elapsed \/ snapDuration, 1);\n var easedProgress = easeInOutCubic(progress);\n var nextY = startY + distance * easedProgress;\n\n window.scrollTo(0, nextY);\n updateVideoProgress();\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n } else {\n window.scrollTo(0, targetY);\n updateVideoProgress();\n window.setTimeout(function () {\n isAnimating = false;\n refreshActiveSection();\n }, 160);\n }\n }\n\n requestAnimationFrame(animate);\n }\n\n function requestSectionMove(direction) {\n refreshActiveSection();\n var targetIndex = activeIndex + direction;\n if (targetIndex < 0) return false;\n if (targetIndex >= sections.length) return false;\n scrollToSection(targetIndex);\n return true;\n }\n\n function handleWheel(event) {\n if (!isDemoZoneActive()) return;\n if (Math.abs(event.deltaY) < wheelThreshold) return;\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n window.clearTimeout(wheelLockTimer);\n\n var direction = event.deltaY > 0 ? 1 : -1;\n var moved = requestSectionMove(direction);\n\n if (moved) {\n event.preventDefault();\n wheelLockTimer = window.setTimeout(function () { refreshActiveSection(); }, snapDuration + 220);\n }\n }\n\n function handleKeydown(event) {\n if (!isDemoZoneActive()) return;\n\n var tagName = document.activeElement ? document.activeElement.tagName : '';\n if (tagName === 'INPUT') return;\n if (tagName === 'TEXTAREA') return;\n if (tagName === 'SELECT') return;\n\n var isNext = false;\n var isPrevious = false;\n var isHome = false;\n var isEnd = false;\n\n if (event.code === 'ArrowDown') isNext = true;\n if (event.code === 'PageDown') isNext = true;\n if (event.code === 'Space') isNext = true;\n if (event.code === 'ArrowUp') isPrevious = true;\n if (event.code === 'PageUp') isPrevious = true;\n if (event.code === 'Home') isHome = true;\n if (event.code === 'End') isEnd = true;\n\n if (!isNext) {\n if (!isPrevious) {\n if (!isHome) {\n if (!isEnd) return;\n }\n }\n }\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n if (isNext) {\n if (requestSectionMove(1)) event.preventDefault();\n return;\n }\n\n if (isPrevious) {\n if (requestSectionMove(-1)) event.preventDefault();\n return;\n }\n\n if (isHome) {\n scrollToSection(0);\n event.preventDefault();\n return;\n }\n\n if (isEnd) {\n scrollToSection(sections.length - 1);\n event.preventDefault();\n }\n }\n\n function handleTouchStart(event) {\n if (!isDemoZoneActive()) return;\n if (!event.touches) return;\n if (event.touches.length !== 1) return;\n touchStartY = event.touches[0].clientY;\n touchStartX = event.touches[0].clientX;\n }\n\n function handleTouchEnd(event) {\n if (!touchStartY) return;\n if (!isDemoZoneActive()) return;\n\n var touch = null;\n if (event.changedTouches) touch = event.changedTouches[0];\n if (!touch) return;\n\n var deltaY = touch.clientY - touchStartY;\n var deltaX = touch.clientX - touchStartX;\n\n touchStartY = 0;\n touchStartX = 0;\n\n if (Math.abs(deltaY) < touchThreshold) return;\n if (Math.abs(deltaY) < Math.abs(deltaX)) return;\n\n if (isAnimating) {\n event.preventDefault();\n return;\n }\n\n var direction = deltaY < 0 ? 1 : -1;\n var moved = requestSectionMove(direction);\n if (moved) event.preventDefault();\n }\n\n var links = root.querySelectorAll('a[href^=\"#\"]');\n Array.prototype.forEach.call(links, function (link) {\n link.addEventListener('click', function (event) {\n var targetId = link.getAttribute('href');\n if (!targetId) return;\n if (targetId === '#') return;\n\n var targetSection = root.querySelector(targetId);\n var targetIndex = sections.indexOf(targetSection);\n if (targetIndex === -1) return;\n\n event.preventDefault();\n scrollToSection(targetIndex);\n });\n });\n\n window.addEventListener('wheel', handleWheel, { passive: false });\n window.addEventListener('keydown', handleKeydown);\n window.addEventListener('touchstart', handleTouchStart, { passive: true });\n window.addEventListener('touchend', handleTouchEnd, { passive: false });\n\n window.addEventListener('scroll', function () {\n if (!isAnimating) refreshActiveSection();\n else updateVideoProgress();\n }, { passive: true });\n\n window.addEventListener('resize', function () {\n window.clearTimeout(resizeTimer);\n resizeTimer = window.setTimeout(function () { refreshActiveSection(); }, 180);\n });\n\n if (video) video.addEventListener('loadedmetadata', updateVideoProgress);\n\n refreshActiveSection();\n }\n\n if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', startEtchSnap);\n else startEtchSnap();\n\n window.addEventListener('load', startEtchSnap);\n })();\n <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Chronova Atelier Mechanism Craft Motion Reveal Experience Luxury Scroll Demo Luxury Watch Scroll A cinematic landing page where the movement of time is revealed by the scroll. Start the journey Plugin demo 01 \/ Mechanism Mechanical Soul Suspended components appear progressively as the page controls the cinematic rhythm. Precision in Motion The scroll becomes the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"sin-header-footer","meta":{"_svbs_page_enabled":true,"_svbs_page_video_id":7584,"_svbs_page_video_url":"https:\/\/etchenet.com\/wp-content\/uploads\/2026\/05\/magnific_create-a-12second-premium_3000999425-scrub.mp4","_svbs_page_overlay_color":"#020617","_svbs_page_overlay_opacity":0,"_svbs_page_scroll_range":6000,"_svbs_page_scroll_range_desktop":6000,"_svbs_page_scroll_range_tablet":0,"_svbs_page_scroll_range_mobile":0,"_svbs_page_start_time":0,"_svbs_page_end_time":0,"_svbs_page_mobile_behavior":"enabled","_svbs_page_z_index":0,"footnotes":""},"class_list":["post-7580","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/comments?post=7580"}],"version-history":[{"count":17,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7580\/revisions"}],"predecessor-version":[{"id":7643,"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/pages\/7580\/revisions\/7643"}],"wp:attachment":[{"href":"https:\/\/etchenet.com\/es\/wp-json\/wp\/v2\/media?parent=7580"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}