{"id":5440,"date":"2025-08-04T06:43:43","date_gmt":"2025-08-04T06:43:43","guid":{"rendered":"https:\/\/www.reai.com.my\/?page_id=5440"},"modified":"2025-08-26T08:59:35","modified_gmt":"2025-08-26T08:59:35","slug":"reai-website-2-0-how-to-order-3-0","status":"publish","type":"page","link":"https:\/\/www.reai.com.my\/?page_id=5440","title":{"rendered":"ReAI Website 2.0 \u2013 How To Order 3.0"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; background_image=&#8221;https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/07\/Artboard-1-1.png&#8221; background_position=&#8221;top_center&#8221; width=&#8221;1920px&#8221; width_tablet=&#8221;100vw&#8221; width_phone=&#8221;100vw&#8221; width_last_edited=&#8221;on|desktop&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;|0px||0px|false|true&#8221; custom_padding=&#8221;|0px||0px|false|true&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/HOW-TO-ORDER.png&#8221; title_text=&#8221;HOW TO ORDER&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code admin_label=&#8221;Code&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<style><!-- [et_pb_line_break_holder] -->  \/* Kill Divi\u2019s global smooth scroll to avoid double-easing with our JS *\/<!-- [et_pb_line_break_holder] -->  html { scroll-behavior: auto !important; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Full-bleed; height will be set by JS to exact-needed px *\/<!-- [et_pb_line_break_holder] -->  .scene-wrapper {<!-- [et_pb_line_break_holder] -->    position: relative;<!-- [et_pb_line_break_holder] -->    height: 100vh;              \/* initial; JS will override *\/<!-- [et_pb_line_break_holder] -->    width: 100vw;<!-- [et_pb_line_break_holder] -->    margin-left: calc(50% - 50vw);<!-- [et_pb_line_break_holder] -->    background: transparent;<!-- [et_pb_line_break_holder] -->    z-index: 1;<!-- [et_pb_line_break_holder] -->    padding: 0 !important;<!-- [et_pb_line_break_holder] -->    max-width: none;<!-- [et_pb_line_break_holder] -->    touch-action: pan-y;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Divi\/Theme safety: remove trailing gaps at page end *\/<!-- [et_pb_line_break_holder] -->  .et_pb_section:last-of-type,<!-- [et_pb_line_break_holder] -->  #main-content > section:last-of-type,<!-- [et_pb_line_break_holder] -->  footer, #main-footer {<!-- [et_pb_line_break_holder] -->    margin-bottom: 0 !important;<!-- [et_pb_line_break_holder] -->    padding-bottom: 0 !important;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  html, body { height: 100%; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  :root {<!-- [et_pb_line_break_holder] -->    --item-size: 400px;<!-- [et_pb_line_break_holder] -->    --scene-width: 300px;<!-- [et_pb_line_break_holder] -->    --radius: 400px;<!-- [et_pb_line_break_holder] -->    --vstep: 350px;<!-- [et_pb_line_break_holder] -->    --font: 25px;<!-- [et_pb_line_break_holder] -->    --caption-maxw: 200px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .scene {<!-- [et_pb_line_break_holder] -->    width: var(--scene-width);<!-- [et_pb_line_break_holder] -->    height: 100vh;<!-- [et_pb_line_break_holder] -->    transform-style: preserve-3d;<!-- [et_pb_line_break_holder] -->    position: sticky;<!-- [et_pb_line_break_holder] -->    top: 0;<!-- [et_pb_line_break_holder] -->    margin: 0 auto;<!-- [et_pb_line_break_holder] -->    pointer-events: none;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .cylinder {<!-- [et_pb_line_break_holder] -->    position: absolute;<!-- [et_pb_line_break_holder] -->    inset: 0;<!-- [et_pb_line_break_holder] -->    transform-style: preserve-3d;<!-- [et_pb_line_break_holder] -->    will-change: transform;<!-- [et_pb_line_break_holder] -->    backface-visibility: hidden;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .spiral-item {<!-- [et_pb_line_break_holder] -->    position: absolute;<!-- [et_pb_line_break_holder] -->    width: var(--item-size);<!-- [et_pb_line_break_holder] -->    height: var(--item-size);<!-- [et_pb_line_break_holder] -->    left: 50%;<!-- [et_pb_line_break_holder] -->    top: 50%;<!-- [et_pb_line_break_holder] -->    transform-style: preserve-3d;<!-- [et_pb_line_break_holder] -->    transform-origin: center center;<!-- [et_pb_line_break_holder] -->    transition: opacity 0.25s ease, background 0.25s ease, box-shadow 0.35s ease, transform 0.25s ease;<!-- [et_pb_line_break_holder] -->    will-change: transform, opacity;<!-- [et_pb_line_break_holder] -->    backface-visibility: hidden;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .spiral-item img {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    height: 100%;<!-- [et_pb_line_break_holder] -->    object-fit: cover;<!-- [et_pb_line_break_holder] -->    border-radius: 16px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* perf-friendly focus instead of heavy blur *\/<!-- [et_pb_line_break_holder] -->  .spiral-item.faded  { opacity: 0.35; }<!-- [et_pb_line_break_holder] -->  .spiral-item.focused{<!-- [et_pb_line_break_holder] -->    opacity: 1;<!-- [et_pb_line_break_holder] -->    background: rgba(255,255,255,0.08);<!-- [et_pb_line_break_holder] -->    border-radius: 16px;<!-- [et_pb_line_break_holder] -->    box-shadow: 0 0 20px rgba(255,255,255,0.30);<!-- [et_pb_line_break_holder] -->    z-index: 2;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .captioned { display: flex; align-items: center; gap: 0; }<!-- [et_pb_line_break_holder] -->  .caption-text {<!-- [et_pb_line_break_holder] -->    color: white;<!-- [et_pb_line_break_holder] -->    font-family: nunito, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;<!-- [et_pb_line_break_holder] -->    font-size: var(--font);<!-- [et_pb_line_break_holder] -->    font-weight: bold;<!-- [et_pb_line_break_holder] -->    max-width: var(--caption-maxw);<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    line-height: 1.3;<!-- [et_pb_line_break_holder] -->    text-shadow: 0 2px 8px rgba(0,0,0,.5);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Desktop positions *\/<!-- [et_pb_line_break_holder] -->  .caption-step-1 { margin-left: -145px; margin-top: 80px; }<!-- [et_pb_line_break_holder] -->  .caption-step-2 { margin-left: -190px; margin-top: 80px; }<!-- [et_pb_line_break_holder] -->  .caption-step-3 { margin-left: -150px; margin-top: 80px; }<!-- [et_pb_line_break_holder] -->  .caption-step-4 { margin-left: -150px; margin-top: 80px; }<!-- [et_pb_line_break_holder] -->  .caption-step-5 { margin-left: -380px; margin-top: -250px; }<!-- [et_pb_line_break_holder] -->  .step5 { width: 450px; height: 400px; }<!-- [et_pb_line_break_holder] -->  .spiral-item.step5 img { width: 90%; height: 90%; margin-left: 35px; }<!-- [et_pb_line_break_holder] -->  .caption-step-6 { margin-left: -120px; margin-top: 120px; }<!-- [et_pb_line_break_holder] -->  .caption-step-7 { margin-left: -120px; margin-top: 100px; }<!-- [et_pb_line_break_holder] -->  .caption-step-8 { margin-left: -110px; margin-top: 150px; max-width: 300px; }<!-- [et_pb_line_break_holder] -->  .step8 { width: 600px; height: 400px; }<!-- [et_pb_line_break_holder] -->  .spiral-item.step8 img { width: 70%; height: 70%; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Tablet *\/<!-- [et_pb_line_break_holder] -->  @media (max-width: 900px) {<!-- [et_pb_line_break_holder] -->    :root {<!-- [et_pb_line_break_holder] -->      --item-size: 320px; --scene-width: 260px; --radius: 340px; --vstep: 280px;<!-- [et_pb_line_break_holder] -->      --font: 20px; --caption-maxw: 180px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    .caption-step-1 { margin-left: -115px;  margin-top: 60px; }<!-- [et_pb_line_break_holder] -->    .caption-step-2 { margin-left: -150px;  margin-top: 60px; }<!-- [et_pb_line_break_holder] -->    .caption-step-3 { margin-left: -110px;  margin-top: 60px; }<!-- [et_pb_line_break_holder] -->    .caption-step-4 { margin-left: -130px;  margin-top: 75px; }<!-- [et_pb_line_break_holder] -->    .caption-step-5 { margin-left: -300px;  margin-top: -190px; }<!-- [et_pb_line_break_holder] -->    .step5 { width: calc(var(--item-size) * 1.0); height: calc(var(--item-size) * 0.9); }<!-- [et_pb_line_break_holder] -->    .spiral-item.step5 img { margin-left: 20px; }<!-- [et_pb_line_break_holder] -->    .caption-step-6 { margin-left: -95px;   margin-top: 90px; }<!-- [et_pb_line_break_holder] -->    .caption-step-7 { margin-left: -100px;  margin-top: 80px; }<!-- [et_pb_line_break_holder] -->    .caption-step-8 { margin-left: -85px;   margin-top: 100px; max-width: 240px; }<!-- [et_pb_line_break_holder] -->    .step8 { width: calc(var(--item-size) * 1.1); height: calc(var(--item-size) * 0.85); }<!-- [et_pb_line_break_holder] -->    .spiral-item.step8 img { margin-left: 20px; margin-top:-90px; }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Mobile *\/<!-- [et_pb_line_break_holder] -->  @media (max-width: 600px) {<!-- [et_pb_line_break_holder] -->    :root {<!-- [et_pb_line_break_holder] -->      --item-size: 250px; --scene-width: 220px; --radius: 260px; --vstep: 210px;<!-- [et_pb_line_break_holder] -->      --font: 16px; --caption-maxw: 160px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    .caption-step-1 { margin-left: -95px;  margin-top: 70px; }<!-- [et_pb_line_break_holder] -->    .caption-step-2 { margin-left: -115px; margin-top: 70px; }<!-- [et_pb_line_break_holder] -->    .caption-step-3 { margin-left: -95px;  margin-top: 70px; }<!-- [et_pb_line_break_holder] -->    .caption-step-4 { margin-left: -100px; margin-top: 80px; }<!-- [et_pb_line_break_holder] -->    .caption-step-5 { margin-left: -230px; margin-top: -130px; }<!-- [et_pb_line_break_holder] -->    .step5 { width: calc(var(--item-size) * 1.0); height: calc(var(--item-size) * 1.0); }<!-- [et_pb_line_break_holder] -->    .spiral-item.step5 img { margin-left: 12px; margin-top: 20px; }<!-- [et_pb_line_break_holder] -->    .caption-step-6 { margin-left: -75px;  margin-top: 70px; }<!-- [et_pb_line_break_holder] -->    .caption-step-7 { margin-left: -85px;  margin-top: 60px; }<!-- [et_pb_line_break_holder] -->    .caption-step-8 { margin-left: -65px;  margin-top: 60px; }<!-- [et_pb_line_break_holder] -->    .spiral-item.step8 img { margin-left: 12px; margin-top: -120px; }<!-- [et_pb_line_break_holder] -->    .step8 { width: calc(var(--item-size) * 1.05); height: calc(var(--item-size) * 0.8); }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- Spiral Section --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"scene-wrapper\" id=\"spiral-trigger\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"scene\" id=\"spiral-scene\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"cylinder\" id=\"cylinder\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step1\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-2-3.png\" alt=\"Step 1\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-1\">Take your kids potrait photo<\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step2\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-4-3.png\" alt=\"Step 2\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-2\">Whatsapp us your purchase ID<\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step3\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-5-2.png\" alt=\"Step 3\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-3\">Fill in the Google Form<\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step4\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-6.png\" alt=\"Step 4\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-4\">Make payment to account and share us the bank slip<\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step5\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-7.png\" alt=\"Step 5\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-5\">3 sample pages <!\u2013- [et_pb_br_holder] -\u2013>will be shared <!\u2013- [et_pb_br_holder] -\u2013>for approval<\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step6\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-8.png\" alt=\"Step 6\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-6\">Design In Progress (\u00b17 working days)<\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step7\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-9.png\" alt=\"Step 7\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-7\">Printing Progress (5 to 7 working days)<\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"spiral-item step8\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"captioned\"><!-- [et_pb_line_break_holder] -->          <img decoding=\"async\" src=\"https:\/\/www.reai.com.my\/wp-content\/uploads\/2025\/06\/Artboard-10.png\" alt=\"Step 8\" \/><!-- [et_pb_line_break_holder] -->          <span class=\"caption-text caption-step-8\"><!-- [et_pb_line_break_holder] -->            <span>Delivery (2 to 3 working days).<\/span><!-- [et_pb_line_break_holder] -->            <\/p>\n<ul><!-- [et_pb_line_break_holder] -->              <\/p>\n<li>Tracking number will be shared<\/li>\n<p><!-- [et_pb_line_break_holder] -->              <\/p>\n<li>Available in Semenanjung Malaysia only<\/li>\n<p><!-- [et_pb_line_break_holder] -->            <\/ul>\n<p><!-- [et_pb_line_break_holder] -->          <\/span><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->  \/* Divi-friendly scroll snapping with custom RAF smooth scrolling *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  const cylinder = document.getElementById(\"cylinder\");<!-- [et_pb_line_break_holder] -->  const sceneWrapper = document.getElementById(\"spiral-trigger\");<!-- [et_pb_line_break_holder] -->  const spiralScene  = document.getElementById(\"spiral-scene\");<!-- [et_pb_line_break_holder] -->  const items = cylinder.getElementsByClassName(\"spiral-item\");<!-- [et_pb_line_break_holder] -->  const imageCount = items.length;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Spiral params<!-- [et_pb_line_break_holder] -->  let angleStep = 100;<!-- [et_pb_line_break_holder] -->  let radius = 400;<!-- [et_pb_line_break_holder] -->  let verticalStep = 350;<!-- [et_pb_line_break_holder] -->  let firstLift = 180;<!-- [et_pb_line_break_holder] -->  let lastDrop = 110;<!-- [et_pb_line_break_holder] -->  const spiralBaseY = -150;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Animation state<!-- [et_pb_line_break_holder] -->  let targetOffsetY = 0;<!-- [et_pb_line_break_holder] -->  let targetRotation = 0;<!-- [et_pb_line_break_holder] -->  let currentOffsetY = 0;<!-- [et_pb_line_break_holder] -->  let currentRotation = 0;<!-- [et_pb_line_break_holder] -->  const EASE = 0.16;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Step snap state<!-- [et_pb_line_break_holder] -->  let currentStep = 0;<!-- [et_pb_line_break_holder] -->  let isSnapping = false;<!-- [et_pb_line_break_holder] -->  let lastSnapT = 0;<!-- [et_pb_line_break_holder] -->  const SNAP_COOLDOWN = 420; \/\/ keep in sync with duration below<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  const clamp = (v,a,b)=>Math.max(a,Math.min(b,v));<!-- [et_pb_line_break_holder] -->  const maxOffset = ()=> verticalStep * (imageCount - 1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Section height = viewport + needed spiral distance (exact)<!-- [et_pb_line_break_holder] -->  function setSectionHeight() {<!-- [et_pb_line_break_holder] -->    const H = Math.ceil(window.innerHeight + maxOffset());<!-- [et_pb_line_break_holder] -->    sceneWrapper.style.height = H + \"px\";<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  const sectionTop  = () => sceneWrapper.getBoundingClientRect().top + window.scrollY;<!-- [et_pb_line_break_holder] -->  const sectionH    = () => sceneWrapper.offsetHeight;<!-- [et_pb_line_break_holder] -->  const scrollRangeInSection = () => Math.max(1, sectionH() - window.innerHeight);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function IN_SECTION() {<!-- [et_pb_line_break_holder] -->    const y = window.scrollY;<!-- [et_pb_line_break_holder] -->    const top = sectionTop();<!-- [et_pb_line_break_holder] -->    const bottom = top + scrollRangeInSection();<!-- [et_pb_line_break_holder] -->    return y >= top - 1 && y <= bottom + 1;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Map page scroll \u2192 spiral target<!-- [et_pb_line_break_holder] -->  function updateTargetFromScroll() {<!-- [et_pb_line_break_holder] -->    const top = sectionTop();<!-- [et_pb_line_break_holder] -->    const range = scrollRangeInSection();<!-- [et_pb_line_break_holder] -->    const y = clamp(window.scrollY - top, 0, range);<!-- [et_pb_line_break_holder] -->    const p = y \/ range;<!-- [et_pb_line_break_holder] -->    targetOffsetY = p * maxOffset();<!-- [et_pb_line_break_holder] -->    targetRotation = -(targetOffsetY \/ verticalStep) * angleStep;<!-- [et_pb_line_break_holder] -->    currentStep = Math.round(targetOffsetY \/ verticalStep);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Step \u2192 page scroll position<!-- [et_pb_line_break_holder] -->  function stepToScrollY(step) {<!-- [et_pb_line_break_holder] -->    const p = (imageCount <= 1) ? 0 : step \/ (imageCount - 1);<!-- [et_pb_line_break_holder] -->    return sectionTop() + p * scrollRangeInSection();<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function atFirstStep(){ return currentStep <= 0 &#038;&#038; targetOffsetY <= 1; }<!-- [et_pb_line_break_holder] -->  function atLastStep(){  return currentStep >= imageCount - 1 && targetOffsetY >= maxOffset() - 1; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Custom smooth scroll (RAF), avoids conflicts with Divi's smooth scroll *\/<!-- [et_pb_line_break_holder] -->  function smoothScrollTo(destY, duration = 420) {<!-- [et_pb_line_break_holder] -->    const start = window.scrollY;<!-- [et_pb_line_break_holder] -->    const delta = destY - start;<!-- [et_pb_line_break_holder] -->    if (Math.abs(delta) < 1) { window.scrollTo(0, destY); return; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const t0 = performance.now();<!-- [et_pb_line_break_holder] -->    isSnapping = true;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ reduced motion users get an instant jump<!-- [et_pb_line_break_holder] -->    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;<!-- [et_pb_line_break_holder] -->    if (prefersReduced) { window.scrollTo(0, destY); isSnapping = false; return; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function easeOutCubic(t){ return 1 - Math.pow(1 - t, 3); }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function frame(now){<!-- [et_pb_line_break_holder] -->      const t = clamp((now - t0) \/ duration, 0, 1);<!-- [et_pb_line_break_holder] -->      const y = start + delta * easeOutCubic(t);<!-- [et_pb_line_break_holder] -->      window.scrollTo(0, y);<!-- [et_pb_line_break_holder] -->      if (t < 1) requestAnimationFrame(frame);<!-- [et_pb_line_break_holder] -->      else       isSnapping = false;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    requestAnimationFrame(frame);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function snapToStep(step) {<!-- [et_pb_line_break_holder] -->    const now = performance.now();<!-- [et_pb_line_break_holder] -->    if (isSnapping || (now - lastSnapT) < SNAP_COOLDOWN) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    currentStep = clamp(step, 0, imageCount - 1);<!-- [et_pb_line_break_holder] -->    targetOffsetY = currentStep * verticalStep;<!-- [et_pb_line_break_holder] -->    targetRotation = -currentStep * angleStep;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const y = stepToScrollY(currentStep);<!-- [et_pb_line_break_holder] -->    lastSnapT = now;<!-- [et_pb_line_break_holder] -->    smoothScrollTo(y, SNAP_COOLDOWN);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Responsive sizes, then recompute height from steps<!-- [et_pb_line_break_holder] -->  function applyItemSize(px) {<!-- [et_pb_line_break_holder] -->    spiralScene.style.width = (px - 80) + \"px\";<!-- [et_pb_line_break_holder] -->    for (const el of items) { el.style.width = px + \"px\"; el.style.height = px + \"px\"; }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  function setResponsive() {<!-- [et_pb_line_break_holder] -->    const w = window.innerWidth;<!-- [et_pb_line_break_holder] -->    if (w <= 600) {<!-- [et_pb_line_break_holder] -->      radius = 260; verticalStep = 210; firstLift = 140; lastDrop = 80;  applyItemSize(250);<!-- [et_pb_line_break_holder] -->    } else if (w <= 900) {<!-- [et_pb_line_break_holder] -->      radius = 340; verticalStep = 280; firstLift = 160; lastDrop = 95;  applyItemSize(320);<!-- [et_pb_line_break_holder] -->    } else {<!-- [et_pb_line_break_holder] -->      radius = 400; verticalStep = 350; firstLift = 180; lastDrop = 110; applyItemSize(400);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    setSectionHeight();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Recompute current step from current page position<!-- [et_pb_line_break_holder] -->    const top = sectionTop();<!-- [et_pb_line_break_holder] -->    const range = scrollRangeInSection();<!-- [et_pb_line_break_holder] -->    const y = clamp(window.scrollY - top, 0, range);<!-- [et_pb_line_break_holder] -->    const p = range ? (y \/ range) : 0;<!-- [et_pb_line_break_holder] -->    currentStep = Math.round(p * (imageCount - 1));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    targetOffsetY = currentStep * verticalStep;<!-- [et_pb_line_break_holder] -->    targetRotation = -currentStep * angleStep;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function updateLayout() {<!-- [et_pb_line_break_holder] -->    const stepFloat = currentOffsetY \/ verticalStep;<!-- [et_pb_line_break_holder] -->    const stepIndex = Math.round(stepFloat);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    for (let i = 0; i < imageCount; i++) {<!-- [et_pb_line_break_holder] -->      const baseAngle = i * angleStep;<!-- [et_pb_line_break_holder] -->      const totalAngle = baseAngle + currentRotation;<!-- [et_pb_line_break_holder] -->      let y = i * verticalStep - currentOffsetY;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      if (i === 0) y -= firstLift;<!-- [et_pb_line_break_holder] -->      if (i === imageCount - 1) y += lastDrop;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      const winding = Math.sin(totalAngle * Math.PI \/ 180) * 15;<!-- [et_pb_line_break_holder] -->      const scale = (i === stepIndex) ? 1.06 : 1;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      items[i].style.transform = `<!-- [et_pb_line_break_holder] -->        translate(-50%, -50%)<!-- [et_pb_line_break_holder] -->        rotateY(${baseAngle}deg)<!-- [et_pb_line_break_holder] -->        translateZ(${radius}px)<!-- [et_pb_line_break_holder] -->        translateY(${y}px)<!-- [et_pb_line_break_holder] -->        rotateX(${winding}deg)<!-- [et_pb_line_break_holder] -->        scale(${scale})<!-- [et_pb_line_break_holder] -->      `;<!-- [et_pb_line_break_holder] -->      items[i].classList.toggle('focused', i === stepIndex);<!-- [et_pb_line_break_holder] -->      items[i].classList.toggle('faded',   i !== stepIndex);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    cylinder.style.transform = `translateY(${spiralBaseY}px) rotateY(${currentRotation}deg)`;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function animate() {<!-- [et_pb_line_break_holder] -->    currentOffsetY += (targetOffsetY - currentOffsetY) * EASE;<!-- [et_pb_line_break_holder] -->    currentRotation += (targetRotation - currentRotation) * EASE;<!-- [et_pb_line_break_holder] -->    updateLayout();<!-- [et_pb_line_break_holder] -->    requestAnimationFrame(animate);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* --------- INPUT: Snap one step per wheel\/swipe with EDGE PASS-THROUGH ---------- *\/<!-- [et_pb_line_break_holder] -->  let lastWheelT = 0;<!-- [et_pb_line_break_holder] -->  const WHEEL_DEBOUNCE = 120; \/\/ ms to avoid multiple triggers on one gesture<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  sceneWrapper.addEventListener('wheel', (e) => {<!-- [et_pb_line_break_holder] -->    if (!IN_SECTION()) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const now = performance.now();<!-- [et_pb_line_break_holder] -->    const goingDown = e.deltaY > 0;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Edge pass-through: allow header\/footer<!-- [et_pb_line_break_holder] -->    if ((goingDown && atLastStep()) || (!goingDown && atFirstStep())) {<!-- [et_pb_line_break_holder] -->      return; \/\/ let the page scroll naturally<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Inside the section \u2192 step snap<!-- [et_pb_line_break_holder] -->    if (now - lastWheelT < WHEEL_DEBOUNCE) { e.preventDefault(); return; }<!-- [et_pb_line_break_holder] -->    lastWheelT = now;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    e.preventDefault();<!-- [et_pb_line_break_holder] -->    if (goingDown) snapToStep(currentStep + 1);<!-- [et_pb_line_break_holder] -->    else           snapToStep(currentStep - 1);<!-- [et_pb_line_break_holder] -->  }, { passive: false });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Touch (mobile\/tablet)<!-- [et_pb_line_break_holder] -->  let touchStartY = 0;<!-- [et_pb_line_break_holder] -->  sceneWrapper.addEventListener('touchstart', (e) => {<!-- [et_pb_line_break_holder] -->    if (!IN_SECTION()) return;<!-- [et_pb_line_break_holder] -->    touchStartY = e.touches[0].clientY;<!-- [et_pb_line_break_holder] -->  }, { passive: true });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  sceneWrapper.addEventListener('touchmove', (e) => {<!-- [et_pb_line_break_holder] -->    if (!IN_SECTION()) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const dy = e.touches[0].clientY - touchStartY;<!-- [et_pb_line_break_holder] -->    const swipingDown = dy > 0;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Edge pass-through for header\/footer<!-- [et_pb_line_break_holder] -->    if ((swipingDown && atFirstStep()) || (!swipingDown && atLastStep())) {<!-- [et_pb_line_break_holder] -->      return; \/\/ allow native scroll<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Inside \u2192 we\u2019ll snap on touchend<!-- [et_pb_line_break_holder] -->    e.preventDefault();<!-- [et_pb_line_break_holder] -->  }, { passive: false });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  sceneWrapper.addEventListener('touchend', (e) => {<!-- [et_pb_line_break_holder] -->    if (!IN_SECTION()) return;<!-- [et_pb_line_break_holder] -->    const dy = e.changedTouches[0].clientY - touchStartY;<!-- [et_pb_line_break_holder] -->    const THRESHOLD = 25; \/\/ px<!-- [et_pb_line_break_holder] -->    if (Math.abs(dy) < THRESHOLD) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (dy < 0) { \/\/ swipe up \u2192 next<!-- [et_pb_line_break_holder] -->      if (!atLastStep()) snapToStep(currentStep + 1);<!-- [et_pb_line_break_holder] -->    } else {      \/\/ swipe down \u2192 prev<!-- [et_pb_line_break_holder] -->      if (!atFirstStep()) snapToStep(currentStep - 1);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }, { passive: true });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* ---------- Entry capture: as you enter from header\/footer, align to nearest step ---------- *\/<!-- [et_pb_line_break_holder] -->  let wasInSection = false;<!-- [et_pb_line_break_holder] -->  let lastScrollY = window.scrollY;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  window.addEventListener('scroll', () => {<!-- [et_pb_line_break_holder] -->    const inside = IN_SECTION();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (!wasInSection && inside) {<!-- [et_pb_line_break_holder] -->      \/\/ entering from header<!-- [et_pb_line_break_holder] -->      if (lastScrollY < sectionTop()) snapToStep(0);<!-- [et_pb_line_break_holder] -->      \/\/ entering from footer<!-- [et_pb_line_break_holder] -->      else if (lastScrollY > sectionTop() + scrollRangeInSection()) snapToStep(imageCount - 1);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (!isSnapping && inside) updateTargetFromScroll();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    wasInSection = inside;<!-- [et_pb_line_break_holder] -->    lastScrollY = window.scrollY;<!-- [et_pb_line_break_holder] -->  }, { passive: true });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Resize: recompute sizes AND exact-needed section height<!-- [et_pb_line_break_holder] -->  window.addEventListener('resize', () => {<!-- [et_pb_line_break_holder] -->    setResponsive();<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Init<!-- [et_pb_line_break_holder] -->  setResponsive();<!-- [et_pb_line_break_holder] -->  updateTargetFromScroll();<!-- [et_pb_line_break_holder] -->  animate();<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-5440","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.reai.com.my\/index.php?rest_route=\/wp\/v2\/pages\/5440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.reai.com.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.reai.com.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.reai.com.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.reai.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5440"}],"version-history":[{"count":260,"href":"https:\/\/www.reai.com.my\/index.php?rest_route=\/wp\/v2\/pages\/5440\/revisions"}],"predecessor-version":[{"id":6506,"href":"https:\/\/www.reai.com.my\/index.php?rest_route=\/wp\/v2\/pages\/5440\/revisions\/6506"}],"wp:attachment":[{"href":"https:\/\/www.reai.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}