[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/templates.$id_.preview",{"_7":8,"_9":10,"_11":12,"_13":14},"entry",{"_15":67,"_11":12,"_16":17,"_18":114,"_115":116,"_117":118,"_34":21,"_24":25,"_119":120,"_121":122,"_22":123,"_124":97,"_125":27,"_126":65,"_127":-5,"_128":-5},"revision",{"_15":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":69,"_77":-5,"_28":78,"_79":80,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94},"slug","hero-feature-dots","template",{"_15":12,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35},"id","name","Feature Dots Hero","description","Full-bleed hero with animated dots orbiting a concentric stadium-shaped SVG path. Feature tags (pills) appear adjacent to dots on scroll entry. Center-aligned heading + CTA over background image.","category","hero","tags",[59,60,61,62,63,64],"mood","modern","thumbnail","https://pcx-assets.trylexsis.com/template-catalog/media/ceb6ac4ec2f3dd558cea6b84e3d12295c004ef63ef1b1fabf3bc95516ce90691.webp","islands_used",[],"props_used",{},"theme",{"_42":43,"_44":45},"section",{"_15":12,"_36":37,"_38":39,"_40":41},"html","

PremiumStylishFunctional

$\"Product$

The waterbottle you'll want to use again and again (and again).

shop now

","css",".hfd-section{position:relative;overflow:hidden;height:640px;border-radius:0;margin:0}.hfd-bg{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);z-index:0}.hfd-bg img,.hfd-bg video{display:block;width:100%;height:100%;object-fit:cover}.hfd-motion-wrap{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;display:flex;align-items:center;justify-content:center;overflow:visible}.hfd-motion-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);height:auto;width:40%;max-width:90%;overflow:visible}@media(max-width:1024px){.hfd-motion-svg{transform:translate(-50%,-50%);height:80%;width:auto}}.hfd-dot{offset-path:path('M 122.5 0.669 L 122.5 0.669 C 190.747 0.669 244.331 54.253 244.331 122.5 L 244.331 249.331 C 244.331 317.578 190.747 371.162 122.5 371.162 C 54.253 371.162 0.669 317.578 0.669 249.331 L 0.669 122.5 C 0.669 54.253 54.253 0.669 122.5 0.669');offset-anchor:center;transform-box:border-box;transition:offset-distance 1.5s ease-out}.hfd-dot-1{offset-distance:80%}.hfd-dot-2{offset-distance:20%}.hfd-dot-3{offset-distance:69%}.hfd-section.hfd-animated .hfd-dot-1{offset-distance:60%;animation:hfdDotMove1 40s linear infinite;animation-delay:calc(40s * 60 / -100)}.hfd-section.hfd-animated .hfd-dot-2{offset-distance:0%;animation:hfdDotMove2 40s linear infinite;animation-delay:calc(40s * 0 / -100)}.hfd-section.hfd-animated .hfd-dot-3{offset-distance:49%;animation:hfdDotMove3 40s linear infinite;animation-delay:calc(40s * 49 / -100)}@keyframes hfdDotMove1{from{offset-distance:0%}to{offset-distance:100%}}@keyframes hfdDotMove2{from{offset-distance:0%}to{offset-distance:100%}}@keyframes hfdDotMove3{from{offset-distance:0%}to{offset-distance:100%}}.hfd-tag{position:absolute;padding:8px 12px;border:1px solid #ffffff;border-radius:100px;background:rgba(0,0,0,0);backdrop-filter:blur(4px);font-family:'Inter',sans-serif;font-size:16px;color:#ffffff;line-height:1;white-space:nowrap;opacity:0;transition:opacity .6s ease .2s;pointer-events:none}@media(min-width:1024px){.hfd-tag{font-size:18px}}.hfd-section.hfd-animated .hfd-tag{opacity:1}@media(max-width:1024px){.hfd-tag{display:none}}.hfd-body{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:100%;padding:36px 4rem}@media(max-width:1024px){.hfd-body{padding:27px 1.5rem}}.hfd-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:55%}@media(max-width:1024px){.hfd-content{max-width:90%}}.hfd-heading{font-family:'DM Serif Display',serif;font-size:clamp(2rem,4.5vw,3.5rem);font-weight:700;color:#ffffff;line-height:1.15;margin:0 0 24px}.hfd-cta{display:inline-block;padding:14px 28px;background:#c0392b;color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;border-radius:6px;text-decoration:none;letter-spacing:0.02em;transition:opacity .2s}.hfd-cta:hover{opacity:0.85}","js","(function(){var sec=document.querySelector('.hfd-section');if(!sec)return;var tags=sec.querySelectorAll('.hfd-tag');var svg=sec.querySelector('.hfd-motion-svg');function positionTags(){if(window.innerWidth<1024||!svg)return;var wrap=sec.querySelector('.hfd-motion-wrap');var wrapR=wrap.getBoundingClientRect();var svgR=svg.getBoundingClientRect();var cx=svgR.left+svgR.width/2;var cy=svgR.top+svgR.height/2;var dots=svg.querySelectorAll('.hfd-dot');dots.forEach(function(dot,i){var tag=tags[i];if(!tag)return;var dr=dot.getBoundingClientRect();var dcx=dr.left+dr.width/2;var dcy=dr.top+dr.height/2;var dx=dcx-cx;var dy=dcy-cy;var top,left,margin=10;if(Math.abs(dx)>Math.abs(dy)){top=dcy-wrapR.top-tag.offsetHeight/2;left=dx<0?dr.left-wrapR.left-tag.offsetWidth-margin:dr.right-wrapR.left+margin}else{left=dcx-wrapR.left-tag.offsetWidth/2;top=dy<0?dr.top-wrapR.top-tag.offsetHeight-margin:dr.bottom-wrapR.top+margin}tag.style.top=top+'px';tag.style.left=left+'px'})}var obs=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){sec.classList.add('hfd-animated');if(window.innerWidth>=1024){setTimeout(positionTags,1500)}obs.unobserve(sec)}})},{rootMargin:'0px 0px -10% 0px'});obs.observe(sec);if(sec.classList.contains('hfd-animated')&&window.innerWidth>=1024){setTimeout(positionTags,100)}window.addEventListener('resize',function(){if(sec.classList.contains('hfd-animated'))positionTags()})})();","palette",{"_50":51,"_52":53,"_54":51,"_55":56,"_57":58},"fonts",{"_46":47,"_48":49},"display","DM Serif Display","body","Inter","bg","#ffffff","accent","#c0392b","text","surface","#000000","border","rgba(255,255,255,0.5)","feature-dots","orbit","animated","svgpath","product","premium","3eb367d9-5be6-4c6b-a23b-0400709d6f03","template_id","39d1f7fb-4ed1-4161-b3c8-7e24b3d3a5a7","version",1,"artifact_key","template-catalog/templates/39d1f7fb-4ed1-4161-b3c8-7e24b3d3a5a7/revisions/1/template.json","manifest_key","template-catalog/templates/39d1f7fb-4ed1-4161-b3c8-7e24b3d3a5a7/revisions/1/manifest.json","artifact_sha256","8a56c1b2d17ce30f7688d4cb66e70a0551c33e230bc5a7124ab406c0c57a6f6d","schema_version","renderer_version",[],"themable",false,"has_js",true,"size_kb",6.78,"validation_status","valid","validation_report",{"_86":82,"_4":110,"_111":112,"_28":113},"media_manifest",[95],"created_at","2026-08-23T07:32:09.130326+00:00","published_at","2026-08-23T07:32:09.630478+00:00",{"_96":97,"_98":27,"_99":100,"_101":102,"_103":-5,"_104":105,"_106":107,"_108":109},"key","template-catalog/media/ceb6ac4ec2f3dd558cea6b84e3d12295c004ef63ef1b1fabf3bc95516ce90691.webp","url","sha256","ceb6ac4ec2f3dd558cea6b84e3d12295c004ef63ef1b1fabf3bc95516ce90691","source","/templates/thumbs/hero-feature-dots.webp","alt_text","provenance","repository migration","size_bytes",101006,"content_type","image/webp",[],"warnings",[],[],"Full-bleed hero with animated dots orbiting a concentric stadium-shaped SVG path. Feature tags appear adjacent to dots on scroll entry.","visibility","global","status","published","industries",[132,133,134,135],"page_types",[129,130,131],[59,60,61,62,63,64],"thumbnail_key","thumbnail_url","current_revision_id","workspace_id","created_by_user_id","pdp","landing","homepage","tech","home","fashion","beauty"]