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\">FROM PAPER TO PRECIOUS<\/h1>\r\n <p class=\"split-text\">Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you.<\/p>\r\n <button class=\"btn\" onclick=\"window.location.href='\/how-it-works\/'\" style=\"opacity: 0; transform: translateY(20px); transition: opacity 0.8s 0.6s, transform 0.8s 0.6s;\">Create Yours<\/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\">SCROLL TO REVEAL<\/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\">YOUR STORY, MADE PRECIOUS<\/h1>\r\n <p class=\"split-text\">Some drawings are more than drawings.<br\/>\r\nSome photos are more than photos.<br\/>\r\nThey hold a moment, a memory, someone we love.<br\/>\r\nAt UniqArt Kids, we transform the images that mean the most to you into unique jewelry \u2014 something personal to wear, treasure and keep close, every day.<\/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\">A LITTLE DRAWING. A MEMORY FOREVER.<\/h1>\r\n <p class=\"split-text\">Children draw with imagination, spontaneity and love. Their little creations capture a moment of childhood that passes all too quickly.<br\/>\r\nWe transform those precious lines into jewelry you can keep close long after the paper has faded.<\/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\">ALWAYS CLOSE TO YOU<\/h1>\r\n <p class=\"split-text\" style=\"margin-left: auto; margin-right: 0;\">A look, a little face, a memory that instantly makes you smile.<br\/>\r\nTurn a favorite photo of your pet into a piece of jewelry that celebrates the bond you share \u2014 something meaningful to carry with you every 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\">YOUR IDEA. YOUR JEWELRY.<\/h1>\r\n <p class=\"split-text\">A drawing.<br\/>\r\nA photograph.<br\/>\r\nA beloved pet.<br\/>\r\nA symbol.<br\/>\r\nA memory.<br\/>\r\nAn idea that belongs only to you.<br\/>\r\nIf it means something to you, it can become something truly personal.<\/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 \/\/ 1. \u68c0\u6d4b\u5f53\u524d\u662f\u5426\u5904\u4e8e TranslatePress \u7684\u53ef\u89c6\u5316\u7f16\u8f91\u6a21\u5f0f\r\n const isTranslatePressEditor = window.location.search.includes('trp-edit');\r\n\r\n if (isTranslatePressEditor) {\r\n \/\/ ==========================================\r\n \/\/ \u7ffb\u8bd1\u6a21\u5f0f\uff1a\u7981\u7528\u52a8\u753b\uff0c\u5f3a\u5236\u5c55\u793a\u6240\u6709\u6587\u672c\u5185\u5bb9\r\n \/\/ ==========================================\r\n \r\n \/\/ \u9690\u85cf\u906e\u7f69\u5c42\u548c Canvas\uff0c\u9632\u6b62\u963b\u6321\u89c6\u7ebf\r\n document.getElementById('loader').style.display = 'none';\r\n document.getElementById('bg-canvas').style.display = 'none';\r\n document.getElementById('bg-loading-indicator').style.display = 'none';\r\n\r\n \/\/ \u5c06\u6240\u6709\u573a\u666f\u4ece\u7edd\u5bf9\u5b9a\u4f4d\u6539\u4e3a\u76f8\u5bf9\u5b9a\u4f4d\uff0c\u8ba9\u5b83\u4eec\u4ece\u4e0a\u5230\u4e0b\u6392\u5e03\uff0c\u5e76\u5f3a\u5236\u663e\u793a\r\n document.querySelectorAll('.scene, .scene-3-group').forEach(el => {\r\n el.style.opacity = '1';\r\n el.style.position = 'relative'; \/\/ \u53d6\u6d88\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u907f\u514d\u5c42\u53e0\r\n el.style.pointerEvents = 'auto';\r\n el.style.height = 'auto'; \/\/ \u53d6\u6d88\u56fa\u5b9a\u9ad8\u5ea6\r\n el.style.padding = '10vh 0'; \/\/ \u589e\u52a0\u95f4\u8ddd\uff0c\u65b9\u4fbf\u70b9\u9009\u7ffb\u8bd1\u56fe\u6807\r\n el.classList.add('active');\r\n });\r\n\r\n \/\/ \u5f3a\u5236\u663e\u793a\u6240\u6709\u6309\u94ae\r\n document.querySelectorAll('.btn').forEach(btn => {\r\n btn.style.opacity = '1';\r\n btn.style.transform = 'translateY(0)';\r\n btn.style.pointerEvents = 'auto';\r\n });\r\n\r\n \/\/ \u6ce8\u610f\uff1a\u7ffb\u8bd1\u6a21\u5f0f\u4e0b\u3010\u7edd\u5bf9\u4e0d\u80fd\u3011\u8fd0\u884c initSplitText() \u548c preloadImages()\r\n \/\/ \u8fd9\u6837 TranslatePress \u624d\u80fd\u6293\u53d6\u5230\u5b8c\u6574\u7684\u53e5\u5b50\uff08\u800c\u4e0d\u662f\u4e00\u5806 span\uff09\uff0c\u5e76\u751f\u6210\u7f16\u8f91\u56fe\u6807\r\n\r\n } else {\r\n \/\/ ==========================================\r\n \/\/ \u6b63\u5e38\u7528\u6237\u8bbf\u95ee\u6a21\u5f0f\uff1a\u6267\u884c\u4f60\u539f\u6709\u7684\u6240\u6709\u9177\u70ab\u52a8\u753b\u903b\u8f91\r\n \/\/ ==========================================\r\n initSplitText();\r\n preloadImages();\r\n }\r\n\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… FROM PAPER TO PRECIOUS Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you. Create Yours SCROLL TO REVEAL YOUR STORY, MADE PRECIOUS Some drawings are more than drawings. Some photos are more than photos. They hold a […]<\/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=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uniqartkids.com\/it\/\" \/>\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… FROM PAPER TO PRECIOUS Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you. Create Yours SCROLL TO REVEAL YOUR STORY, MADE PRECIOUS Some drawings are more than drawings. Some photos are more than photos. They hold a […]\" \/>\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-08-21T03:00:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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-08-21T03:00:37+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":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uniqartkids.com\/it\/","og_locale":"it_IT","og_type":"article","og_title":"Home - uniqartkids.com","og_description":"Magic Animation Loading Magic… Downloading high-res assets… FROM PAPER TO PRECIOUS Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you. Create Yours SCROLL TO REVEAL YOUR STORY, MADE PRECIOUS Some drawings are more than drawings. Some photos are more than photos. They hold a […]","og_url":"https:\/\/uniqartkids.com\/it\/","og_site_name":"uniqartkids.com","article_modified_time":"2026-08-21T03:00:37+00:00","twitter_card":"summary_large_image","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-08-21T03:00:37+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":220,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":1198,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions\/1198"}],"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\">FROM PAPER TO PRECIOUS<\/h1>\r\n <p class=\"split-text\">Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you.<\/p>\r\n <button class=\"btn\" onclick=\"window.location.href='\/how-it-works\/'\" style=\"opacity: 0; transform: translateY(20px); transition: opacity 0.8s 0.6s, transform 0.8s 0.6s;\">Create Yours<\/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\">SCROLL TO REVEAL<\/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\">YOUR STORY, MADE PRECIOUS<\/h1>\r\n <p class=\"split-text\">Some drawings are more than drawings.<br\/>\r\nSome photos are more than photos.<br\/>\r\nThey hold a moment, a memory, someone we love.<br\/>\r\nAt UniqArt Kids, we transform the images that mean the most to you into unique jewelry \u2014 something personal to wear, treasure and keep close, every day.<\/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\">A LITTLE DRAWING. A MEMORY FOREVER.<\/h1>\r\n <p class=\"split-text\">Children draw with imagination, spontaneity and love. Their little creations capture a moment of childhood that passes all too quickly.<br\/>\r\nWe transform those precious lines into jewelry you can keep close long after the paper has faded.<\/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\">ALWAYS CLOSE TO YOU<\/h1>\r\n <p class=\"split-text\" style=\"margin-left: auto; margin-right: 0;\">A look, a little face, a memory that instantly makes you smile.<br\/>\r\nTurn a favorite photo of your pet into a piece of jewelry that celebrates the bond you share \u2014 something meaningful to carry with you every 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\">YOUR IDEA. YOUR JEWELRY.<\/h1>\r\n <p class=\"split-text\">A drawing.<br\/>\r\nA photograph.<br\/>\r\nA beloved pet.<br\/>\r\nA symbol.<br\/>\r\nA memory.<br\/>\r\nAn idea that belongs only to you.<br\/>\r\nIf it means something to you, it can become something truly personal.<\/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 \/\/ 1. \u68c0\u6d4b\u5f53\u524d\u662f\u5426\u5904\u4e8e TranslatePress \u7684\u53ef\u89c6\u5316\u7f16\u8f91\u6a21\u5f0f\r\n const isTranslatePressEditor = window.location.search.includes('trp-edit');\r\n\r\n if (isTranslatePressEditor) {\r\n \/\/ ==========================================\r\n \/\/ \u7ffb\u8bd1\u6a21\u5f0f\uff1a\u7981\u7528\u52a8\u753b\uff0c\u5f3a\u5236\u5c55\u793a\u6240\u6709\u6587\u672c\u5185\u5bb9\r\n \/\/ ==========================================\r\n \r\n \/\/ \u9690\u85cf\u906e\u7f69\u5c42\u548c Canvas\uff0c\u9632\u6b62\u963b\u6321\u89c6\u7ebf\r\n document.getElementById('loader').style.display = 'none';\r\n document.getElementById('bg-canvas').style.display = 'none';\r\n document.getElementById('bg-loading-indicator').style.display = 'none';\r\n\r\n \/\/ \u5c06\u6240\u6709\u573a\u666f\u4ece\u7edd\u5bf9\u5b9a\u4f4d\u6539\u4e3a\u76f8\u5bf9\u5b9a\u4f4d\uff0c\u8ba9\u5b83\u4eec\u4ece\u4e0a\u5230\u4e0b\u6392\u5e03\uff0c\u5e76\u5f3a\u5236\u663e\u793a\r\n document.querySelectorAll('.scene, .scene-3-group').forEach(el => {\r\n el.style.opacity = '1';\r\n el.style.position = 'relative'; \/\/ \u53d6\u6d88\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u907f\u514d\u5c42\u53e0\r\n el.style.pointerEvents = 'auto';\r\n el.style.height = 'auto'; \/\/ \u53d6\u6d88\u56fa\u5b9a\u9ad8\u5ea6\r\n el.style.padding = '10vh 0'; \/\/ \u589e\u52a0\u95f4\u8ddd\uff0c\u65b9\u4fbf\u70b9\u9009\u7ffb\u8bd1\u56fe\u6807\r\n el.classList.add('active');\r\n });\r\n\r\n \/\/ \u5f3a\u5236\u663e\u793a\u6240\u6709\u6309\u94ae\r\n document.querySelectorAll('.btn').forEach(btn => {\r\n btn.style.opacity = '1';\r\n btn.style.transform = 'translateY(0)';\r\n btn.style.pointerEvents = 'auto';\r\n });\r\n\r\n \/\/ \u6ce8\u610f\uff1a\u7ffb\u8bd1\u6a21\u5f0f\u4e0b\u3010\u7edd\u5bf9\u4e0d\u80fd\u3011\u8fd0\u884c initSplitText() \u548c preloadImages()\r\n \/\/ \u8fd9\u6837 TranslatePress \u624d\u80fd\u6293\u53d6\u5230\u5b8c\u6574\u7684\u53e5\u5b50\uff08\u800c\u4e0d\u662f\u4e00\u5806 span\uff09\uff0c\u5e76\u751f\u6210\u7f16\u8f91\u56fe\u6807\r\n\r\n } else {\r\n \/\/ ==========================================\r\n \/\/ \u6b63\u5e38\u7528\u6237\u8bbf\u95ee\u6a21\u5f0f\uff1a\u6267\u884c\u4f60\u539f\u6709\u7684\u6240\u6709\u9177\u70ab\u52a8\u753b\u903b\u8f91\r\n \/\/ ==========================================\r\n initSplitText();\r\n preloadImages();\r\n }\r\n\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… FROM PAPER TO PRECIOUS Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you. Create Yours SCROLL TO REVEAL YOUR STORY, MADE PRECIOUS Some drawings are more than drawings. Some photos are more than photos. They hold a […]<\/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=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uniqartkids.com\/it\/\" \/>\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… FROM PAPER TO PRECIOUS Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you. Create Yours SCROLL TO REVEAL YOUR STORY, MADE PRECIOUS Some drawings are more than drawings. Some photos are more than photos. They hold a […]\" \/>\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-08-21T03:00:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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-08-21T03:00:37+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":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uniqartkids.com\/it\/","og_locale":"it_IT","og_type":"article","og_title":"Home - uniqartkids.com","og_description":"Magic Animation Loading Magic… Downloading high-res assets… FROM PAPER TO PRECIOUS Turn a drawing, a photo or a special memory into a one-of-a-kind piece of jewelry \u2014 created just for you. Create Yours SCROLL TO REVEAL YOUR STORY, MADE PRECIOUS Some drawings are more than drawings. Some photos are more than photos. They hold a […]","og_url":"https:\/\/uniqartkids.com\/it\/","og_site_name":"uniqartkids.com","article_modified_time":"2026-08-21T03:00:37+00:00","twitter_card":"summary_large_image","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-08-21T03:00:37+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":220,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":1198,"href":"https:\/\/uniqartkids.com\/it\/wp-json\/wp\/v2\/pages\/33\/revisions\/1198"}],"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}]}}