Magic Animation<\/title>\r\n <style>\r\n #loader {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n background: #121225; display: flex; flex-direction: column;\r\n justify-content: center; align-items: center; color: #fff;\r\n z-index: 9999; transition: opacity 0.4s ease;\r\n }\r\n .progress-bar { width: 200px; height: 10px; background: #222; border-radius: 10px; margin-top: 20px; overflow: hidden; }\r\n .progress-fill { height: 100%; background: #FF6B6B; width: 0%; transition: width 0.1s linear; }\r\n #bg-loading-indicator {\r\n position: fixed; bottom: 20px; left: 20px; z-index: 100;\r\n color: rgba(255,255,255,0.4); font-size: 0.75rem; font-weight: bold;\r\n pointer-events: none; opacity: 0; transition: opacity 0.3s;\r\n }\r\n\r\n \/* =================\u753b\u5e03\u4e0eUI\u5c42================= *\/\r\n #main-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }\r\n canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }\r\n .ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; overflow: visible; }\r\n .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; opacity: 0; }\r\n .scene-content { padding: 8vw; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; }\r\n\r\n \/* =================\u4f18\u5316\u7248 SplitText \u52a8\u6548\u6838\u5fc3 CSS================= *\/\r\n .split-parent { display: inline-block; white-space: pre-wrap; }\r\n .split-char {\r\n display: inline-block;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), \r\n transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1);\r\n }\r\n .scene.active .split-char,\r\n .scene-3-group.active .split-char { \r\n opacity: 1; transform: translateY(0); \r\n }\r\n\r\n \/* =================\u6392\u7248\u4e0e\u6837\u5f0f================= *\/\r\n h1 { font-size:1.8125rem; font-weight: 900; line-height: 1.1; margin-bottom: 10px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); }\r\n h2 { font-size: 1.625rem; font-weight: 700; margin-bottom: 15px; color: #FFD166; text-shadow: 0 3px 10px rgba(0,0,0,0.4); }\r\n p { font-size: 1rem; font-weight: 400; line-height: 1.5; margin-bottom: 30px; }\r\n \r\n .btn {\r\n pointer-events: auto; \r\n \/* \u84dd\u8272\u6e10\u53d8\u6309\u94ae *\/\r\n background: linear-gradient(135deg, #005F9E, #5EA1DE); \r\n color: white; border: none;\r\n padding: 10px 20px; border-radius: 50px; font-size: 1.1rem; font-weight: 400; cursor: pointer;\r\n box-shadow: 0 8px 25px rgba(0, 95, 158, 0.4); \r\n transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: inline-block; text-transform: uppercase; letter-spacing: 1px;\r\n text-decoration: none;\r\n }\r\n .btn:active, .btn:hover { transform: scale(1.06) translateY(-2px); }\r\n\r\n \/* ================= \u573a\u666f1 \u6392\u7248\u4e0e\u6587\u5b57\u4fee\u590d ================= *\/\r\n #scene-1 .scene-content { align-items: flex-start; }\r\n \r\n #scene-1 h1 .split-char,\r\n #scene-1 h2 .split-char {\r\n background: linear-gradient(135deg, #00C9FF 0%, #005F9E 45%, #B892FF 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n }\r\n \r\n #scene-1 p .split-char {\r\n -webkit-text-fill-color: white;\r\n color: white;\r\n text-shadow: 0 2px 6px rgba(0,0,0,0.5);\r\n }\r\n #scene-1 p { max-width: 420px; text-shadow: none; }\r\n\r\n \/* ================= \u5411\u4e0b\u6eda\u52a8\u63d0\u793a\u52a8\u753b (Scroll Indicator) ================= *\/\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 5vh;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n opacity: 0; \r\n \/* \u5ef6\u8fdf\u663e\u793a\uff0c\u7b49\u4e3b\u6587\u5b57\u6e32\u67d3\u5b8c\u518d\u51fa\u73b0 *\/\r\n animation: fadeInScroll 1s ease 1.5s forwards; \r\n pointer-events: none; \/* \u9632\u6b62\u963b\u6321\u70b9\u51fb *\/\r\n z-index: 20;\r\n }\r\n\r\n .mouse-icon {\r\n width: 28px;\r\n height: 44px;\r\n border: 2px solid rgba(228, 241, 255, 0.7);\r\n border-radius: 20px;\r\n position: relative;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .mouse-wheel {\r\n width: 4px;\r\n height: 8px;\r\n background: #E4F1FF;\r\n border-radius: 2px;\r\n position: absolute;\r\n top: 8px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n animation: scrollWheel 1.5s infinite cubic-bezier(0.15, 0.41, 0.69, 0.94);\r\n }\r\n\r\n .scroll-text {\r\n color: rgba(228, 241, 255, 0.8);\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n animation: floatUpDown 2s infinite ease-in-out;\r\n }\r\n\r\n @keyframes fadeInScroll {\r\n to { opacity: 1; }\r\n }\r\n\r\n @keyframes scrollWheel {\r\n 0% { top: 8px; opacity: 1; height: 8px; }\r\n 50% { top: 18px; opacity: 0; height: 4px; }\r\n 100% { top: 8px; opacity: 0; height: 8px; }\r\n }\r\n\r\n @keyframes floatUpDown {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(4px); }\r\n }\r\n \r\n #scene-2 .scene-content, #scene-2-half .scene-content { align-items: flex-start; color: white; }\r\n #scene-2 p, #scene-2-half p { max-width: 580px; font-weight: 400; font-size:1rem; line-height: 1.6; }\r\n \r\n \/* ================= \u573a\u666f3 \u5de6\u53f3\u6392\u5e03\u903b\u8f91 ================= *\/\r\n #scene-3 .scene-content { align-items: flex-start; justify-content: center; }\r\n .scene-3-group { position: absolute; width: 100%; left: 0; padding: 0 8vw; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }\r\n \r\n .split-text-container { \r\n display: flex; \r\n width: 100%; \r\n justify-content: flex-start; \r\n margin-bottom: 6vh; \r\n flex-wrap: wrap; \r\n gap: 25px; \r\n }\r\n .text-right-side { \r\n flex: 1; \r\n min-width: 260px; \r\n color: white; \r\n text-align: left; \r\n }\r\n \r\n .text-right-side h1 { font-size: 2.215rem; display: block; margin-bottom: 10px; }\r\n .text-right-side p { max-width: 320px; display: block; margin-bottom: 0; font-weight: 400; margin-left: 0; }\r\n \r\n .bottom-btn-wrapper { width: max-content; }\r\n\r\n @media (max-width: 768px) {\r\n .split-text-container { flex-direction: column; margin-bottom: 4vh; gap: 30px; }\r\n .text-right-side { text-align: left; flex: none; width: 100%; }\r\n .text-right-side p { margin-left: 0; margin-right: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"loader\">\r\n <h2 style=\"color: white; text-shadow: none;\">Loading Magic...<\/h2>\r\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progress\"><\/div><\/div>\r\n <\/div>\r\n <div id=\"bg-loading-indicator\">Downloading high-res assets...<\/div>\r\n\r\n <div id=\"main-container\">\r\n <canvas id=\"bg-canvas\"><\/canvas>\r\n \r\n <div class=\"ui-layer\">\r\n <div class=\"scene\" id=\"scene-1\">\r\n <div class=\"scene-content\" id=\"content-1\">\r\n <h1 class=\"split-text\">Bring Magic To Life<\/h1>\r\n <h2 class=\"split-text\">From Paper to Precious<\/h2>\r\n <p class=\"split-text\">Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime.<\/p>\r\n <button class=\"btn\" onclick=\"window.location.href='\/about-us\/'\" style=\"opacity: 0; transform: translateY(20px); transition: opacity 0.8s 0.6s, transform 0.8s 0.6s;\">Discover How<\/button>\r\n <\/div>\r\n \r\n <div class=\"scroll-indicator\">\r\n <div class=\"mouse-icon\">\r\n <div class=\"mouse-wheel\"><\/div>\r\n <\/div>\r\n <div class=\"scroll-text\">Discover More<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scene\" id=\"scene-2\">\r\n <div class=\"scene-content\" id=\"content-2\">\r\n <h1 class=\"split-text\">Where Childhood Becomes Timeless<\/h1>\r\n <p class=\"split-text\">Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be recreated.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scene\" id=\"scene-2-half\">\r\n <div class=\"scene-content\" id=\"content-2-half\">\r\n <h1 class=\"split-text\">Crafted with love. Kept for a lifetime.<\/h1>\r\n <p class=\"split-text\">We believe these fleeting moments deserve a place beyond the page. That\u2019s why every piece is thoughtfully handcrafted and uniquely made from your child\u2019s original artwork, creating a timeless keepsake to celebrate the love and memories you\u2019ll cherish forever.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scene\" id=\"scene-3\">\r\n <div class=\"scene-content\" id=\"content-3\">\r\n \r\n \r\n <div class=\"scene-3-group\" id=\"s3-group-1\" style=\"align-items: flex-end;\">\r\n <div class=\"split-text-container\" style=\"justify-content: flex-end;\">\r\n <div class=\"text-right-side\" style=\"text-align: right;\">\r\n <h1 class=\"split-text\">Wear Their Imagination<\/h1>\r\n <p class=\"split-text\" style=\"margin-left: auto; margin-right: 0;\">Celebrate your child\u2019s boundless creativity with a handcrafted keepsake, and carry the magic of their fleeting childhood close to your heart\u2014every single day.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"scene-3-group\" id=\"s3-group-2\">\r\n <div class=\"split-text-container\">\r\n <div class=\"text-right-side\">\r\n <h1 class=\"split-text\">A Treasure Forever<\/h1>\r\n <p class=\"split-text\">The most meaningful gifts tell a story. Handcrafted from every piece is uniquely made to celebrate love, creativity, and the memories shared with parents, grandparents, and those closest to your heart.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bottom-btn-wrapper\">\r\n \r\n <button class=\"btn\" id=\"final-btn\" onclick=\"window.location.href='\/how-it-works\/'\" style=\"padding: 12px 35px; font-size: 1.1rem; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;\">Create Yours<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const CONFIG = {\r\n totalVideoFrames: 301,\r\n totalTicks: 550, \r\n initialLoadCount: 15, \r\n scrollSensitivity: 0.04, \r\n touchSensitivity: 0.08, \r\n friction: 0.85, \r\n maxVelocity: 2.5, \r\n lerpAmount: 0.07, \r\n parallaxStrength: 0.8, \r\n \r\n scenes: [\r\n { id: 'scene-1', contentId: 'content-1', start: 1, end: 100, fadeOutStart: 0.8 },\r\n { id: 'scene-2', contentId: 'content-2', start: 120, end: 250, fadeInStart: 0.15, fadeOutStart: 0.85 },\r\n { id: 'scene-2-half', contentId: 'content-2-half', start: 270, end: 400, fadeInStart: 0.15, fadeOutStart: 0.85 },\r\n { id: 'scene-3', contentId: 'content-3', start: 420, end: 550 }\r\n ]\r\n };\r\n\r\n const canvas = document.getElementById('bg-canvas');\r\n const ctx = canvas.getContext('2d', { alpha: false });\r\n const images = [];\r\n let loadedCount = 0;\r\n let isAppStarted = false;\r\n\r\n let currentTick = 1;\r\n let targetTick = 1;\r\n let velocity = 0;\r\n\r\n \/\/ \u3010\u91cd\u5199\uff1a\u6309\u5355\u8bcd\u62c6\u5206\u903b\u8f91\uff0c\u9632\u6b62\u82f1\u6587\u5355\u8bcd\u4e2d\u95f4\u65ad\u5f00\u3011\r\n function initSplitText() {\r\n document.querySelectorAll('.split-text').forEach(el => {\r\n const text = el.innerText;\r\n el.innerHTML = '';\r\n el.classList.add('split-parent');\r\n const fragment = document.createDocumentFragment();\r\n let charCount = 0;\r\n \r\n \/\/ \u6309\u7a7a\u767d\u5b57\u7b26\u62c6\u5206\uff0c\u4fdd\u7559\u5355\u8bcd\u548c\u7a7a\u683c\u7684\u76f8\u5bf9\u4f4d\u7f6e\r\n const words = text.split(\/(\\s+)\/);\r\n \r\n words.forEach(word => {\r\n if (!word) return;\r\n \r\n \/\/ \u5982\u679c\u662f\u8fde\u7eed\u7a7a\u683c\u6216\u6362\u884c\r\n if (word.trim() === '') {\r\n for (let i = 0; i < word.length; i++) {\r\n const char = word[i];\r\n if (char === '\\n') {\r\n fragment.appendChild(document.createElement('br'));\r\n } else {\r\n const span = document.createElement('span');\r\n span.className = 'split-char';\r\n span.innerHTML = ' ';\r\n span.style.transitionDelay = `${charCount * 0.01}s`;\r\n fragment.appendChild(span);\r\n charCount++;\r\n }\r\n }\r\n } else {\r\n \/\/ \u5982\u679c\u662f\u4e00\u4e2a\u5b8c\u6574\u7684\u82f1\u6587\u5355\u8bcd\uff0c\u4f7f\u7528 inline-block \u5305\u88f9\uff0c\u9632\u6b62\u88ab\u6253\u65ad\r\n const wordContainer = document.createElement('span');\r\n wordContainer.style.display = 'inline-block';\r\n \r\n for (let i = 0; i < word.length; i++) {\r\n const span = document.createElement('span');\r\n span.className = 'split-char';\r\n span.innerHTML = word[i];\r\n span.style.transitionDelay = `${charCount * 0.01}s`;\r\n wordContainer.appendChild(span);\r\n charCount++;\r\n }\r\n fragment.appendChild(wordContainer);\r\n }\r\n });\r\n el.appendChild(fragment);\r\n });\r\n }\r\n\r\n function preloadImages() {\r\n const progressEl = document.getElementById('progress');\r\n loadFrameRange(1, CONFIG.initialLoadCount, () => {\r\n setTimeout(() => {\r\n document.getElementById('loader').style.opacity = 0;\r\n setTimeout(() => document.getElementById('loader').style.display = 'none', 400);\r\n initApplication();\r\n \r\n document.getElementById('scene-1').classList.add('active');\r\n const btn = document.querySelector('#scene-1 .btn');\r\n if(btn) { btn.style.opacity = 1; btn.style.transform = 'translateY(0)'; }\r\n \r\n backgroundLoadRemaining();\r\n }, 100); \r\n }, (progress) => {\r\n progressEl.style.width = (progress * 100) + '%';\r\n });\r\n }\r\n\r\n function loadFrameRange(start, end, onComplete, onProgress) {\r\n let loaded = 0;\r\n const totalToLoad = end - start + 1;\r\n for (let i = start; i <= end; i++) {\r\n const img = new Image();\r\n img.src = `.\/frames\/frame_${String(i).padStart(4, '0')}.webp`;\r\n img.onload = img.onerror = () => {\r\n loaded++;\r\n if(onProgress) onProgress(loaded \/ totalToLoad);\r\n if (loaded === totalToLoad && onComplete) onComplete();\r\n };\r\n images[i] = img;\r\n }\r\n }\r\n\r\n function backgroundLoadRemaining() {\r\n const indicator = document.getElementById('bg-loading-indicator');\r\n indicator.style.opacity = 1;\r\n loadFrameRange(CONFIG.initialLoadCount + 1, CONFIG.totalVideoFrames, () => {\r\n indicator.innerText = \"All assets ready\";\r\n setTimeout(() => indicator.style.opacity = 0, 1500);\r\n });\r\n }\r\n\r\n function getBgFrame(tick) {\r\n return 1 + (tick - 1) * ((CONFIG.totalVideoFrames - 1) \/ (CONFIG.totalTicks - 1));\r\n }\r\n\r\n function renderFrame(tick) {\r\n let targetFrameIndex = Math.round(getBgFrame(tick));\r\n \r\n while(targetFrameIndex > 1 && (!images[targetFrameIndex] || !images[targetFrameIndex].complete)) {\r\n targetFrameIndex--;\r\n }\r\n\r\n const img = images[targetFrameIndex];\r\n if (!img || !img.complete || img.width === 0) return;\r\n \r\n const canvasRatio = canvas.width \/ canvas.height;\r\n const imgRatio = img.width \/ img.height;\r\n let drawWidth = canvas.width;\r\n let drawHeight = canvas.height;\r\n let offsetX = 0, offsetY = 0;\r\n\r\n if (canvasRatio > imgRatio) {\r\n drawHeight = canvas.width \/ imgRatio;\r\n offsetY = (canvas.height - drawHeight) \/ 2;\r\n } else {\r\n drawWidth = canvas.height * imgRatio;\r\n offsetX = (canvas.width - drawWidth) \/ 2;\r\n }\r\n ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);\r\n }\r\n\r\n function loop() {\r\n velocity *= CONFIG.friction;\r\n velocity = Math.max(-CONFIG.maxVelocity, Math.min(CONFIG.maxVelocity, velocity));\r\n targetTick += velocity;\r\n targetTick = Math.max(1, Math.min(CONFIG.totalTicks, targetTick));\r\n currentTick += (targetTick - currentTick) * CONFIG.lerpAmount;\r\n\r\n renderFrame(currentTick);\r\n updateUI(currentTick);\r\n\r\n requestAnimationFrame(loop);\r\n }\r\n\r\n function updateUI(tick) {\r\n CONFIG.scenes.forEach((scene, index) => {\r\n const el = document.getElementById(scene.id);\r\n const contentEl = document.getElementById(scene.contentId);\r\n \r\n if (tick >= scene.start && tick <= scene.end) {\r\n const progress = (tick - scene.start) \/ (scene.end - scene.start);\r\n let opacity = 0;\r\n\r\n if (scene.id === 'scene-1') {\r\n opacity = progress <= scene.fadeOutStart ? 1 : 1 - (progress - scene.fadeOutStart) \/ (1.0 - scene.fadeOutStart);\r\n el.style.opacity = opacity;\r\n contentEl.style.transform = `translateY(${(50 - tick) * CONFIG.parallaxStrength}px)`;\r\n el.style.pointerEvents = opacity > 0.5 ? 'auto' : 'none';\r\n\r\n } else if (scene.id === 'scene-2' || scene.id === 'scene-2-half') {\r\n if (progress >= scene.fadeInStart && progress <= 0.4) {\r\n opacity = (progress - scene.fadeInStart) \/ (0.4 - scene.fadeInStart);\r\n } else if (progress > 0.4 && progress < scene.fadeOutStart) {\r\n opacity = 1;\r\n } else if (progress >= scene.fadeOutStart) {\r\n opacity = 1 - (progress - scene.fadeOutStart) \/ (1.0 - scene.fadeOutStart);\r\n }\r\n \r\n if (opacity > 0.1 && !el.classList.contains('active')) el.classList.add('active');\r\n \r\n el.style.opacity = opacity;\r\n const midPoint = (scene.start + scene.end) \/ 2;\r\n contentEl.style.transform = `translateY(${(midPoint - tick) * CONFIG.parallaxStrength}px)`;\r\n el.style.pointerEvents = opacity > 0.5 ? 'auto' : 'none';\r\n\r\n } else if (scene.id === 'scene-3') {\r\n el.style.opacity = 1; \r\n el.style.pointerEvents = 'auto';\r\n \r\n const g1 = document.getElementById('s3-group-1');\r\n const g2 = document.getElementById('s3-group-2');\r\n const finalBtn = document.getElementById('final-btn');\r\n\r\n if (tick <= 490) { \r\n const p1 = (tick - 420) \/ 70; \r\n let o1 = p1 <= 0.2 ? p1 \/ 0.2 : (p1 < 0.8 ? 1 : 1 - (p1 - 0.8) \/ 0.2);\r\n g1.style.opacity = Math.max(0, o1);\r\n g2.style.opacity = 0;\r\n g1.style.transform = `translateY(${(455 - tick) * CONFIG.parallaxStrength}px)`;\r\n \r\n if(o1 > 0.1 && !g1.classList.contains('active')) g1.classList.add('active');\r\n if(o1 === 0) g1.classList.remove('active');\r\n g2.classList.remove('active');\r\n\r\n \/\/ \u91cd\u7f6e\u5e95\u90e8\u6309\u94ae\r\n finalBtn.style.opacity = 0;\r\n finalBtn.style.transform = 'translateY(20px)';\r\n finalBtn.style.pointerEvents = 'none';\r\n\r\n } else { \r\n const p2 = (tick - 491) \/ 59;\r\n g1.style.opacity = 0;\r\n let o2 = p2 <= 0.3 ? p2 \/ 0.3 : 1;\r\n g2.style.opacity = o2;\r\n g2.style.transform = `translateY(${(520 - tick) * CONFIG.parallaxStrength}px)`;\r\n \r\n if(o2 > 0.1 && !g2.classList.contains('active')) g2.classList.add('active');\r\n g1.classList.remove('active');\r\n\r\n \/\/ \u3010\u6838\u5fc3\u6539\u52a8\uff1a\u6ed1\u52a8\u5230\u51e0\u4e4e\u6700\u5e95\u90e8\uff08tick >= 535\uff0c\u6ee1\u503c\u4e3a 550\uff09\u65f6\uff0c\u6309\u94ae\u6d6e\u73b0\u3011\r\n if (tick >= 535) {\r\n finalBtn.style.opacity = 1;\r\n finalBtn.style.transform = 'translateY(0)';\r\n finalBtn.style.pointerEvents = 'auto';\r\n } else {\r\n finalBtn.style.opacity = 0;\r\n finalBtn.style.transform = 'translateY(20px)';\r\n finalBtn.style.pointerEvents = 'none';\r\n }\r\n }\r\n }\r\n } else {\r\n el.style.opacity = 0;\r\n el.style.pointerEvents = 'none';\r\n if(scene.id !== 'scene-1') el.classList.remove('active');\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener('wheel', (e) => { velocity += e.deltaY * CONFIG.scrollSensitivity; }, { passive: true });\r\n \r\n let touchStartY = 0;\r\n window.addEventListener('touchstart', (e) => { touchStartY = e.touches[0].clientY; }, { passive: true });\r\n window.addEventListener('touchmove', (e) => {\r\n const currentY = e.touches[0].clientY;\r\n velocity += (touchStartY - currentY) * CONFIG.touchSensitivity;\r\n touchStartY = currentY;\r\n }, { passive: true });\r\n\r\n window.addEventListener('resize', () => {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n renderFrame(Math.round(currentTick));\r\n });\r\n\r\n function initApplication() {\r\n if(isAppStarted) return;\r\n isAppStarted = true;\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n requestAnimationFrame(loop);\r\n }\r\n\r\n initSplitText();\r\n preloadImages();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Magic Animation Loading Magic… Downloading high-res assets… Bring Magic To Life From Paper to Precious Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime. Discover How Discover More Where Childhood Becomes Timeless Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Home - uniqartkids.com<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - uniqartkids.com\" \/>\n<meta property=\"og:description\" content=\"Magic Animation Loading Magic… Downloading high-res assets… Bring Magic To Life From Paper to Precious Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime. Discover How Discover More Where Childhood Becomes Timeless Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uniqartkids.com\/it\/\" \/>\n<meta property=\"og:site_name\" content=\"uniqartkids.com\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-16T12:48:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"name\":\"Home - uniqartkids.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#website\"},\"datePublished\":\"2026-06-28T08:00:39+00:00\",\"dateModified\":\"2026-07-16T12:48:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/uniqartkids.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/uniqartkids.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#website\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"name\":\"uniqartkids.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/uniqartkids.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#organization\",\"name\":\"uniqartkids.com\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png\",\"contentUrl\":\"https:\\\/\\\/uniqartkids.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png\",\"width\":1655,\"height\":1092,\"caption\":\"uniqartkids.com\"},\"image\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Home - uniqartkids.com","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"it_IT","og_type":"article","og_title":"Home - uniqartkids.com","og_description":"Magic Animation Loading Magic… Downloading high-res assets… Bring Magic To Life From Paper to Precious Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime. Discover How Discover More Where Childhood Becomes Timeless Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be […]","og_url":"https:\/\/uniqartkids.com\/it\/","og_site_name":"uniqartkids.com","article_modified_time":"2026-07-16T12:48:04+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/uniqartkids.com\/","url":"https:\/\/uniqartkids.com\/","name":"Home - uniqartkids.com","isPartOf":{"@id":"https:\/\/uniqartkids.com\/#website"},"datePublished":"2026-06-28T08:00:39+00:00","dateModified":"2026-07-16T12:48:04+00:00","breadcrumb":{"@id":"https:\/\/uniqartkids.com\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uniqartkids.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uniqartkids.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uniqartkids.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/uniqartkids.com\/#website","url":"https:\/\/uniqartkids.com\/","name":"uniqartkids.com","description":"","publisher":{"@id":"https:\/\/uniqartkids.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uniqartkids.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/uniqartkids.com\/#organization","name":"uniqartkids.com","url":"https:\/\/uniqartkids.com\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/uniqartkids.com\/#\/schema\/logo\/image\/","url":"https:\/\/uniqartkids.com\/wp-content\/uploads\/2026\/06\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png","contentUrl":"https:\/\/uniqartkids.com\/wp-content\/uploads\/2026\/06\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png","width":1655,"height":1092,"caption":"uniqartkids.com"},"image":{"@id":"https:\/\/uniqartkids.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":208,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":1081,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions\/1081"}],"wp:attachment":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Magic Animation<\/title>\r\n <style>\r\n #loader {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n background: #121225; display: flex; flex-direction: column;\r\n justify-content: center; align-items: center; color: #fff;\r\n z-index: 9999; transition: opacity 0.4s ease;\r\n }\r\n .progress-bar { width: 200px; height: 10px; background: #222; border-radius: 10px; margin-top: 20px; overflow: hidden; }\r\n .progress-fill { height: 100%; background: #FF6B6B; width: 0%; transition: width 0.1s linear; }\r\n #bg-loading-indicator {\r\n position: fixed; bottom: 20px; left: 20px; z-index: 100;\r\n color: rgba(255,255,255,0.4); font-size: 0.75rem; font-weight: bold;\r\n pointer-events: none; opacity: 0; transition: opacity 0.3s;\r\n }\r\n\r\n \/* =================\u753b\u5e03\u4e0eUI\u5c42================= *\/\r\n #main-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }\r\n canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }\r\n .ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; overflow: visible; }\r\n .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; opacity: 0; }\r\n .scene-content { padding: 8vw; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; }\r\n\r\n \/* =================\u4f18\u5316\u7248 SplitText \u52a8\u6548\u6838\u5fc3 CSS================= *\/\r\n .split-parent { display: inline-block; white-space: pre-wrap; }\r\n .split-char {\r\n display: inline-block;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), \r\n transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1);\r\n }\r\n .scene.active .split-char,\r\n .scene-3-group.active .split-char { \r\n opacity: 1; transform: translateY(0); \r\n }\r\n\r\n \/* =================\u6392\u7248\u4e0e\u6837\u5f0f================= *\/\r\n h1 { font-size:1.8125rem; font-weight: 900; line-height: 1.1; margin-bottom: 10px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); }\r\n h2 { font-size: 1.625rem; font-weight: 700; margin-bottom: 15px; color: #FFD166; text-shadow: 0 3px 10px rgba(0,0,0,0.4); }\r\n p { font-size: 1rem; font-weight: 400; line-height: 1.5; margin-bottom: 30px; }\r\n \r\n .btn {\r\n pointer-events: auto; \r\n \/* \u84dd\u8272\u6e10\u53d8\u6309\u94ae *\/\r\n background: linear-gradient(135deg, #005F9E, #5EA1DE); \r\n color: white; border: none;\r\n padding: 10px 20px; border-radius: 50px; font-size: 1.1rem; font-weight: 400; cursor: pointer;\r\n box-shadow: 0 8px 25px rgba(0, 95, 158, 0.4); \r\n transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: inline-block; text-transform: uppercase; letter-spacing: 1px;\r\n text-decoration: none;\r\n }\r\n .btn:active, .btn:hover { transform: scale(1.06) translateY(-2px); }\r\n\r\n \/* ================= \u573a\u666f1 \u6392\u7248\u4e0e\u6587\u5b57\u4fee\u590d ================= *\/\r\n #scene-1 .scene-content { align-items: flex-start; }\r\n \r\n #scene-1 h1 .split-char,\r\n #scene-1 h2 .split-char {\r\n background: linear-gradient(135deg, #00C9FF 0%, #005F9E 45%, #B892FF 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n }\r\n \r\n #scene-1 p .split-char {\r\n -webkit-text-fill-color: white;\r\n color: white;\r\n text-shadow: 0 2px 6px rgba(0,0,0,0.5);\r\n }\r\n #scene-1 p { max-width: 420px; text-shadow: none; }\r\n\r\n \/* ================= \u5411\u4e0b\u6eda\u52a8\u63d0\u793a\u52a8\u753b (Scroll Indicator) ================= *\/\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 5vh;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n opacity: 0; \r\n \/* \u5ef6\u8fdf\u663e\u793a\uff0c\u7b49\u4e3b\u6587\u5b57\u6e32\u67d3\u5b8c\u518d\u51fa\u73b0 *\/\r\n animation: fadeInScroll 1s ease 1.5s forwards; \r\n pointer-events: none; \/* \u9632\u6b62\u963b\u6321\u70b9\u51fb *\/\r\n z-index: 20;\r\n }\r\n\r\n .mouse-icon {\r\n width: 28px;\r\n height: 44px;\r\n border: 2px solid rgba(228, 241, 255, 0.7);\r\n border-radius: 20px;\r\n position: relative;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .mouse-wheel {\r\n width: 4px;\r\n height: 8px;\r\n background: #E4F1FF;\r\n border-radius: 2px;\r\n position: absolute;\r\n top: 8px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n animation: scrollWheel 1.5s infinite cubic-bezier(0.15, 0.41, 0.69, 0.94);\r\n }\r\n\r\n .scroll-text {\r\n color: rgba(228, 241, 255, 0.8);\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n animation: floatUpDown 2s infinite ease-in-out;\r\n }\r\n\r\n @keyframes fadeInScroll {\r\n to { opacity: 1; }\r\n }\r\n\r\n @keyframes scrollWheel {\r\n 0% { top: 8px; opacity: 1; height: 8px; }\r\n 50% { top: 18px; opacity: 0; height: 4px; }\r\n 100% { top: 8px; opacity: 0; height: 8px; }\r\n }\r\n\r\n @keyframes floatUpDown {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(4px); }\r\n }\r\n \r\n #scene-2 .scene-content, #scene-2-half .scene-content { align-items: flex-start; color: white; }\r\n #scene-2 p, #scene-2-half p { max-width: 580px; font-weight: 400; font-size:1rem; line-height: 1.6; }\r\n \r\n \/* ================= \u573a\u666f3 \u5de6\u53f3\u6392\u5e03\u903b\u8f91 ================= *\/\r\n #scene-3 .scene-content { align-items: flex-start; justify-content: center; }\r\n .scene-3-group { position: absolute; width: 100%; left: 0; padding: 0 8vw; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }\r\n \r\n .split-text-container { \r\n display: flex; \r\n width: 100%; \r\n justify-content: flex-start; \r\n margin-bottom: 6vh; \r\n flex-wrap: wrap; \r\n gap: 25px; \r\n }\r\n .text-right-side { \r\n flex: 1; \r\n min-width: 260px; \r\n color: white; \r\n text-align: left; \r\n }\r\n \r\n .text-right-side h1 { font-size: 2.215rem; display: block; margin-bottom: 10px; }\r\n .text-right-side p { max-width: 320px; display: block; margin-bottom: 0; font-weight: 400; margin-left: 0; }\r\n \r\n .bottom-btn-wrapper { width: max-content; }\r\n\r\n @media (max-width: 768px) {\r\n .split-text-container { flex-direction: column; margin-bottom: 4vh; gap: 30px; }\r\n .text-right-side { text-align: left; flex: none; width: 100%; }\r\n .text-right-side p { margin-left: 0; margin-right: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"loader\">\r\n <h2 style=\"color: white; text-shadow: none;\">Loading Magic...<\/h2>\r\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progress\"><\/div><\/div>\r\n <\/div>\r\n <div id=\"bg-loading-indicator\">Downloading high-res assets...<\/div>\r\n\r\n <div id=\"main-container\">\r\n <canvas id=\"bg-canvas\"><\/canvas>\r\n \r\n <div class=\"ui-layer\">\r\n <div class=\"scene\" id=\"scene-1\">\r\n <div class=\"scene-content\" id=\"content-1\">\r\n <h1 class=\"split-text\">Bring Magic To Life<\/h1>\r\n <h2 class=\"split-text\">From Paper to Precious<\/h2>\r\n <p class=\"split-text\">Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime.<\/p>\r\n <button class=\"btn\" onclick=\"window.location.href='\/about-us\/'\" style=\"opacity: 0; transform: translateY(20px); transition: opacity 0.8s 0.6s, transform 0.8s 0.6s;\">Discover How<\/button>\r\n <\/div>\r\n \r\n <div class=\"scroll-indicator\">\r\n <div class=\"mouse-icon\">\r\n <div class=\"mouse-wheel\"><\/div>\r\n <\/div>\r\n <div class=\"scroll-text\">Discover More<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scene\" id=\"scene-2\">\r\n <div class=\"scene-content\" id=\"content-2\">\r\n <h1 class=\"split-text\">Where Childhood Becomes Timeless<\/h1>\r\n <p class=\"split-text\">Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be recreated.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scene\" id=\"scene-2-half\">\r\n <div class=\"scene-content\" id=\"content-2-half\">\r\n <h1 class=\"split-text\">Crafted with love. Kept for a lifetime.<\/h1>\r\n <p class=\"split-text\">We believe these fleeting moments deserve a place beyond the page. That\u2019s why every piece is thoughtfully handcrafted and uniquely made from your child\u2019s original artwork, creating a timeless keepsake to celebrate the love and memories you\u2019ll cherish forever.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scene\" id=\"scene-3\">\r\n <div class=\"scene-content\" id=\"content-3\">\r\n \r\n \r\n <div class=\"scene-3-group\" id=\"s3-group-1\" style=\"align-items: flex-end;\">\r\n <div class=\"split-text-container\" style=\"justify-content: flex-end;\">\r\n <div class=\"text-right-side\" style=\"text-align: right;\">\r\n <h1 class=\"split-text\">Wear Their Imagination<\/h1>\r\n <p class=\"split-text\" style=\"margin-left: auto; margin-right: 0;\">Celebrate your child\u2019s boundless creativity with a handcrafted keepsake, and carry the magic of their fleeting childhood close to your heart\u2014every single day.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"scene-3-group\" id=\"s3-group-2\">\r\n <div class=\"split-text-container\">\r\n <div class=\"text-right-side\">\r\n <h1 class=\"split-text\">A Treasure Forever<\/h1>\r\n <p class=\"split-text\">The most meaningful gifts tell a story. Handcrafted from every piece is uniquely made to celebrate love, creativity, and the memories shared with parents, grandparents, and those closest to your heart.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bottom-btn-wrapper\">\r\n \r\n <button class=\"btn\" id=\"final-btn\" onclick=\"window.location.href='\/how-it-works\/'\" style=\"padding: 12px 35px; font-size: 1.1rem; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;\">Create Yours<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const CONFIG = {\r\n totalVideoFrames: 301,\r\n totalTicks: 550, \r\n initialLoadCount: 15, \r\n scrollSensitivity: 0.04, \r\n touchSensitivity: 0.08, \r\n friction: 0.85, \r\n maxVelocity: 2.5, \r\n lerpAmount: 0.07, \r\n parallaxStrength: 0.8, \r\n \r\n scenes: [\r\n { id: 'scene-1', contentId: 'content-1', start: 1, end: 100, fadeOutStart: 0.8 },\r\n { id: 'scene-2', contentId: 'content-2', start: 120, end: 250, fadeInStart: 0.15, fadeOutStart: 0.85 },\r\n { id: 'scene-2-half', contentId: 'content-2-half', start: 270, end: 400, fadeInStart: 0.15, fadeOutStart: 0.85 },\r\n { id: 'scene-3', contentId: 'content-3', start: 420, end: 550 }\r\n ]\r\n };\r\n\r\n const canvas = document.getElementById('bg-canvas');\r\n const ctx = canvas.getContext('2d', { alpha: false });\r\n const images = [];\r\n let loadedCount = 0;\r\n let isAppStarted = false;\r\n\r\n let currentTick = 1;\r\n let targetTick = 1;\r\n let velocity = 0;\r\n\r\n \/\/ \u3010\u91cd\u5199\uff1a\u6309\u5355\u8bcd\u62c6\u5206\u903b\u8f91\uff0c\u9632\u6b62\u82f1\u6587\u5355\u8bcd\u4e2d\u95f4\u65ad\u5f00\u3011\r\n function initSplitText() {\r\n document.querySelectorAll('.split-text').forEach(el => {\r\n const text = el.innerText;\r\n el.innerHTML = '';\r\n el.classList.add('split-parent');\r\n const fragment = document.createDocumentFragment();\r\n let charCount = 0;\r\n \r\n \/\/ \u6309\u7a7a\u767d\u5b57\u7b26\u62c6\u5206\uff0c\u4fdd\u7559\u5355\u8bcd\u548c\u7a7a\u683c\u7684\u76f8\u5bf9\u4f4d\u7f6e\r\n const words = text.split(\/(\\s+)\/);\r\n \r\n words.forEach(word => {\r\n if (!word) return;\r\n \r\n \/\/ \u5982\u679c\u662f\u8fde\u7eed\u7a7a\u683c\u6216\u6362\u884c\r\n if (word.trim() === '') {\r\n for (let i = 0; i < word.length; i++) {\r\n const char = word[i];\r\n if (char === '\\n') {\r\n fragment.appendChild(document.createElement('br'));\r\n } else {\r\n const span = document.createElement('span');\r\n span.className = 'split-char';\r\n span.innerHTML = ' ';\r\n span.style.transitionDelay = `${charCount * 0.01}s`;\r\n fragment.appendChild(span);\r\n charCount++;\r\n }\r\n }\r\n } else {\r\n \/\/ \u5982\u679c\u662f\u4e00\u4e2a\u5b8c\u6574\u7684\u82f1\u6587\u5355\u8bcd\uff0c\u4f7f\u7528 inline-block \u5305\u88f9\uff0c\u9632\u6b62\u88ab\u6253\u65ad\r\n const wordContainer = document.createElement('span');\r\n wordContainer.style.display = 'inline-block';\r\n \r\n for (let i = 0; i < word.length; i++) {\r\n const span = document.createElement('span');\r\n span.className = 'split-char';\r\n span.innerHTML = word[i];\r\n span.style.transitionDelay = `${charCount * 0.01}s`;\r\n wordContainer.appendChild(span);\r\n charCount++;\r\n }\r\n fragment.appendChild(wordContainer);\r\n }\r\n });\r\n el.appendChild(fragment);\r\n });\r\n }\r\n\r\n function preloadImages() {\r\n const progressEl = document.getElementById('progress');\r\n loadFrameRange(1, CONFIG.initialLoadCount, () => {\r\n setTimeout(() => {\r\n document.getElementById('loader').style.opacity = 0;\r\n setTimeout(() => document.getElementById('loader').style.display = 'none', 400);\r\n initApplication();\r\n \r\n document.getElementById('scene-1').classList.add('active');\r\n const btn = document.querySelector('#scene-1 .btn');\r\n if(btn) { btn.style.opacity = 1; btn.style.transform = 'translateY(0)'; }\r\n \r\n backgroundLoadRemaining();\r\n }, 100); \r\n }, (progress) => {\r\n progressEl.style.width = (progress * 100) + '%';\r\n });\r\n }\r\n\r\n function loadFrameRange(start, end, onComplete, onProgress) {\r\n let loaded = 0;\r\n const totalToLoad = end - start + 1;\r\n for (let i = start; i <= end; i++) {\r\n const img = new Image();\r\n img.src = `.\/frames\/frame_${String(i).padStart(4, '0')}.webp`;\r\n img.onload = img.onerror = () => {\r\n loaded++;\r\n if(onProgress) onProgress(loaded \/ totalToLoad);\r\n if (loaded === totalToLoad && onComplete) onComplete();\r\n };\r\n images[i] = img;\r\n }\r\n }\r\n\r\n function backgroundLoadRemaining() {\r\n const indicator = document.getElementById('bg-loading-indicator');\r\n indicator.style.opacity = 1;\r\n loadFrameRange(CONFIG.initialLoadCount + 1, CONFIG.totalVideoFrames, () => {\r\n indicator.innerText = \"All assets ready\";\r\n setTimeout(() => indicator.style.opacity = 0, 1500);\r\n });\r\n }\r\n\r\n function getBgFrame(tick) {\r\n return 1 + (tick - 1) * ((CONFIG.totalVideoFrames - 1) \/ (CONFIG.totalTicks - 1));\r\n }\r\n\r\n function renderFrame(tick) {\r\n let targetFrameIndex = Math.round(getBgFrame(tick));\r\n \r\n while(targetFrameIndex > 1 && (!images[targetFrameIndex] || !images[targetFrameIndex].complete)) {\r\n targetFrameIndex--;\r\n }\r\n\r\n const img = images[targetFrameIndex];\r\n if (!img || !img.complete || img.width === 0) return;\r\n \r\n const canvasRatio = canvas.width \/ canvas.height;\r\n const imgRatio = img.width \/ img.height;\r\n let drawWidth = canvas.width;\r\n let drawHeight = canvas.height;\r\n let offsetX = 0, offsetY = 0;\r\n\r\n if (canvasRatio > imgRatio) {\r\n drawHeight = canvas.width \/ imgRatio;\r\n offsetY = (canvas.height - drawHeight) \/ 2;\r\n } else {\r\n drawWidth = canvas.height * imgRatio;\r\n offsetX = (canvas.width - drawWidth) \/ 2;\r\n }\r\n ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);\r\n }\r\n\r\n function loop() {\r\n velocity *= CONFIG.friction;\r\n velocity = Math.max(-CONFIG.maxVelocity, Math.min(CONFIG.maxVelocity, velocity));\r\n targetTick += velocity;\r\n targetTick = Math.max(1, Math.min(CONFIG.totalTicks, targetTick));\r\n currentTick += (targetTick - currentTick) * CONFIG.lerpAmount;\r\n\r\n renderFrame(currentTick);\r\n updateUI(currentTick);\r\n\r\n requestAnimationFrame(loop);\r\n }\r\n\r\n function updateUI(tick) {\r\n CONFIG.scenes.forEach((scene, index) => {\r\n const el = document.getElementById(scene.id);\r\n const contentEl = document.getElementById(scene.contentId);\r\n \r\n if (tick >= scene.start && tick <= scene.end) {\r\n const progress = (tick - scene.start) \/ (scene.end - scene.start);\r\n let opacity = 0;\r\n\r\n if (scene.id === 'scene-1') {\r\n opacity = progress <= scene.fadeOutStart ? 1 : 1 - (progress - scene.fadeOutStart) \/ (1.0 - scene.fadeOutStart);\r\n el.style.opacity = opacity;\r\n contentEl.style.transform = `translateY(${(50 - tick) * CONFIG.parallaxStrength}px)`;\r\n el.style.pointerEvents = opacity > 0.5 ? 'auto' : 'none';\r\n\r\n } else if (scene.id === 'scene-2' || scene.id === 'scene-2-half') {\r\n if (progress >= scene.fadeInStart && progress <= 0.4) {\r\n opacity = (progress - scene.fadeInStart) \/ (0.4 - scene.fadeInStart);\r\n } else if (progress > 0.4 && progress < scene.fadeOutStart) {\r\n opacity = 1;\r\n } else if (progress >= scene.fadeOutStart) {\r\n opacity = 1 - (progress - scene.fadeOutStart) \/ (1.0 - scene.fadeOutStart);\r\n }\r\n \r\n if (opacity > 0.1 && !el.classList.contains('active')) el.classList.add('active');\r\n \r\n el.style.opacity = opacity;\r\n const midPoint = (scene.start + scene.end) \/ 2;\r\n contentEl.style.transform = `translateY(${(midPoint - tick) * CONFIG.parallaxStrength}px)`;\r\n el.style.pointerEvents = opacity > 0.5 ? 'auto' : 'none';\r\n\r\n } else if (scene.id === 'scene-3') {\r\n el.style.opacity = 1; \r\n el.style.pointerEvents = 'auto';\r\n \r\n const g1 = document.getElementById('s3-group-1');\r\n const g2 = document.getElementById('s3-group-2');\r\n const finalBtn = document.getElementById('final-btn');\r\n\r\n if (tick <= 490) { \r\n const p1 = (tick - 420) \/ 70; \r\n let o1 = p1 <= 0.2 ? p1 \/ 0.2 : (p1 < 0.8 ? 1 : 1 - (p1 - 0.8) \/ 0.2);\r\n g1.style.opacity = Math.max(0, o1);\r\n g2.style.opacity = 0;\r\n g1.style.transform = `translateY(${(455 - tick) * CONFIG.parallaxStrength}px)`;\r\n \r\n if(o1 > 0.1 && !g1.classList.contains('active')) g1.classList.add('active');\r\n if(o1 === 0) g1.classList.remove('active');\r\n g2.classList.remove('active');\r\n\r\n \/\/ \u91cd\u7f6e\u5e95\u90e8\u6309\u94ae\r\n finalBtn.style.opacity = 0;\r\n finalBtn.style.transform = 'translateY(20px)';\r\n finalBtn.style.pointerEvents = 'none';\r\n\r\n } else { \r\n const p2 = (tick - 491) \/ 59;\r\n g1.style.opacity = 0;\r\n let o2 = p2 <= 0.3 ? p2 \/ 0.3 : 1;\r\n g2.style.opacity = o2;\r\n g2.style.transform = `translateY(${(520 - tick) * CONFIG.parallaxStrength}px)`;\r\n \r\n if(o2 > 0.1 && !g2.classList.contains('active')) g2.classList.add('active');\r\n g1.classList.remove('active');\r\n\r\n \/\/ \u3010\u6838\u5fc3\u6539\u52a8\uff1a\u6ed1\u52a8\u5230\u51e0\u4e4e\u6700\u5e95\u90e8\uff08tick >= 535\uff0c\u6ee1\u503c\u4e3a 550\uff09\u65f6\uff0c\u6309\u94ae\u6d6e\u73b0\u3011\r\n if (tick >= 535) {\r\n finalBtn.style.opacity = 1;\r\n finalBtn.style.transform = 'translateY(0)';\r\n finalBtn.style.pointerEvents = 'auto';\r\n } else {\r\n finalBtn.style.opacity = 0;\r\n finalBtn.style.transform = 'translateY(20px)';\r\n finalBtn.style.pointerEvents = 'none';\r\n }\r\n }\r\n }\r\n } else {\r\n el.style.opacity = 0;\r\n el.style.pointerEvents = 'none';\r\n if(scene.id !== 'scene-1') el.classList.remove('active');\r\n }\r\n });\r\n }\r\n\r\n window.addEventListener('wheel', (e) => { velocity += e.deltaY * CONFIG.scrollSensitivity; }, { passive: true });\r\n \r\n let touchStartY = 0;\r\n window.addEventListener('touchstart', (e) => { touchStartY = e.touches[0].clientY; }, { passive: true });\r\n window.addEventListener('touchmove', (e) => {\r\n const currentY = e.touches[0].clientY;\r\n velocity += (touchStartY - currentY) * CONFIG.touchSensitivity;\r\n touchStartY = currentY;\r\n }, { passive: true });\r\n\r\n window.addEventListener('resize', () => {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n renderFrame(Math.round(currentTick));\r\n });\r\n\r\n function initApplication() {\r\n if(isAppStarted) return;\r\n isAppStarted = true;\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n requestAnimationFrame(loop);\r\n }\r\n\r\n initSplitText();\r\n preloadImages();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Magic Animation Loading Magic… Downloading high-res assets… Bring Magic To Life From Paper to Precious Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime. Discover How Discover More Where Childhood Becomes Timeless Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Home - uniqartkids.com<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - uniqartkids.com\" \/>\n<meta property=\"og:description\" content=\"Magic Animation Loading Magic… Downloading high-res assets… Bring Magic To Life From Paper to Precious Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime. Discover How Discover More Where Childhood Becomes Timeless Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uniqartkids.com\/it\/\" \/>\n<meta property=\"og:site_name\" content=\"uniqartkids.com\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-16T12:48:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"name\":\"Home - uniqartkids.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#website\"},\"datePublished\":\"2026-06-28T08:00:39+00:00\",\"dateModified\":\"2026-07-16T12:48:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/uniqartkids.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/uniqartkids.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#website\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"name\":\"uniqartkids.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/uniqartkids.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#organization\",\"name\":\"uniqartkids.com\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/uniqartkids.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png\",\"contentUrl\":\"https:\\\/\\\/uniqartkids.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png\",\"width\":1655,\"height\":1092,\"caption\":\"uniqartkids.com\"},\"image\":{\"@id\":\"https:\\\/\\\/uniqartkids.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Home - uniqartkids.com","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"it_IT","og_type":"article","og_title":"Home - uniqartkids.com","og_description":"Magic Animation Loading Magic… Downloading high-res assets… Bring Magic To Life From Paper to Precious Turn your child\u2019s drawings into keepsakes you\u2019ll treasure for a lifetime. Discover How Discover More Where Childhood Becomes Timeless Children create with boundless imagination and pure hearts. Their drawings are filled with stories, dreams, and moments that can never be […]","og_url":"https:\/\/uniqartkids.com\/it\/","og_site_name":"uniqartkids.com","article_modified_time":"2026-07-16T12:48:04+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/uniqartkids.com\/","url":"https:\/\/uniqartkids.com\/","name":"Home - uniqartkids.com","isPartOf":{"@id":"https:\/\/uniqartkids.com\/#website"},"datePublished":"2026-06-28T08:00:39+00:00","dateModified":"2026-07-16T12:48:04+00:00","breadcrumb":{"@id":"https:\/\/uniqartkids.com\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uniqartkids.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uniqartkids.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uniqartkids.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/uniqartkids.com\/#website","url":"https:\/\/uniqartkids.com\/","name":"uniqartkids.com","description":"","publisher":{"@id":"https:\/\/uniqartkids.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uniqartkids.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/uniqartkids.com\/#organization","name":"uniqartkids.com","url":"https:\/\/uniqartkids.com\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/uniqartkids.com\/#\/schema\/logo\/image\/","url":"https:\/\/uniqartkids.com\/wp-content\/uploads\/2026\/06\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png","contentUrl":"https:\/\/uniqartkids.com\/wp-content\/uploads\/2026\/06\/Uniq-Art-Kids-logo\u8bbe\u8ba1-1-scaled-e1782908830843.png","width":1655,"height":1092,"caption":"uniqartkids.com"},"image":{"@id":"https:\/\/uniqartkids.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":208,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":1081,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions\/1081"}],"wp:attachment":[{"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}