{"id":2876,"date":"2026-05-26T00:49:23","date_gmt":"2026-05-26T00:49:23","guid":{"rendered":"https:\/\/uisb.com\/?page_id=2876"},"modified":"2026-09-11T02:43:52","modified_gmt":"2026-09-11T02:43:52","slug":"elementor-page-2876","status":"publish","type":"page","link":"https:\/\/uisb.com\/zh\/elementor-page-2876\/","title":{"rendered":"Project History aff"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2876\" class=\"elementor elementor-2876\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4cdc32d e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"4cdc32d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2317e14 jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"2317e14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Milestone Projects \u2014 UI Group \/ UISB<\/title>\n\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@200;300;400;500;600;700;800;900&family=Source+Sans+3:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n\n  <style>\n  html {\n    overflow-x: hidden;\n}\n  \n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --white:   #ffffff;\n    --ice:     #f8fbff;\n    --soft:    #eff6ff;\n    --lblue:   #dbeafe;\n    --sky:     #93c5fd;\n    --blue:    #3b82f6;\n    --deep:    #1e40af;\n    --navy:    #071a3d;\n    --navy2:   #0f172a;\n    --text:    #172033;\n    --muted:   #64748b;\n    --glass:   rgba(255,255,255,.82);\n    --glass-s: rgba(255,255,255,.98);\n    --border:  rgba(147,197,253,.5);\n    --sh:      0 4px 6px rgba(30,64,175,.05), 0 12px 40px rgba(30,64,175,.13);\n    --sh-s:    0 8px 16px rgba(30,64,175,.08), 0 28px 70px rgba(30,64,175,.22);\n    --fd:      'Lexend', sans-serif;\n    --fb:      'Source Sans 3', sans-serif;\n  }\n\n  html { scroll-behavior: smooth; }\n\n  body {\n    font-family: var(--fb);\n    color: var(--text);\n    background: var(--ice);\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n  }\n\n  \/* \u2500\u2500 Scroll progress bar \u2500\u2500 *\/\n  #msp-prog {\n    position: fixed; top: 0; left: 0; z-index: 9990;\n    height: 3px; width: 0%;\n    background: linear-gradient(90deg, var(--deep), var(--blue), var(--sky));\n    transition: width .05s linear;\n    pointer-events: none;\n  }\n\n  \/* \u2500\u2500 Custom cursor \u2500\u2500 *\/\n  #msp-cur, #msp-ring {\n    position: fixed; border-radius: 50%;\n    pointer-events: none; transform: translate(-50%,-50%);\n  }\n  #msp-cur {\n    width: 8px; height: 8px; background: var(--deep);\n    z-index: 9999; transition: width .18s, height .18s;\n  }\n  #msp-ring {\n    width: 32px; height: 32px; z-index: 9998;\n    border: 1.5px solid rgba(30,64,175,.28);\n    transition: width .28s, height .28s, border-color .28s;\n  }\n\n  \/* \u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .msp-hero {\n    position: relative; overflow: hidden;\n    min-height: 100vh;\n    display: flex; align-items: center; justify-content: center;\n    padding: 80px 40px;\n    background: var(--ice);\n    background-image: radial-gradient(rgba(147,197,253,.38) 1.2px, transparent 1.2px);\n    background-size: 28px 28px;\n  }\n  #msp-canvas {\n    position: absolute; inset: 0;\n    width: 100%; height: 100%;\n    z-index: 0; pointer-events: none;\n  }\n  .msp-hero::before {\n    content: ''; position: absolute; inset: 0; z-index: 1;\n    background: radial-gradient(ellipse 85% 70% at 50% 52%,\n      rgba(255,255,255,.94) 0%, rgba(248,251,255,.78) 55%, transparent 80%);\n  }\n  .msp-hero-in {\n    position: relative; z-index: 2;\n    max-width: 900px; width: 100%; text-align: center;\n  }\n\n  .msp-eye {\n    display: inline-flex; align-items: center; gap: 12px;\n    font-size: 10px; font-weight: 700; letter-spacing: .28em;\n    text-transform: uppercase; color: var(--blue);\n    margin-bottom: 28px; opacity: 0;\n  }\n  .msp-eye::before, .msp-eye::after {\n    content: ''; width: 24px; height: 1px; background: currentColor; opacity: .5;\n  }\n\n  .msp-title {\n    font-family: var(--fd);\n    font-size: clamp(3.8rem, 11vw, 10rem);\n    font-weight: 900; line-height: .87; letter-spacing: -.05em;\n    color: var(--navy); margin-bottom: 32px;\n  }\n  .msp-title .ln  { display: block; overflow: hidden; }\n  .msp-title .lni { display: block; transform: translateY(115%); }\n  .msp-title .ln:last-child .lni {\n    background: linear-gradient(128deg, var(--deep) 0%, var(--blue) 60%, var(--sky) 100%);\n    background-size: 200%;\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n    animation: msp-sh 6s linear infinite;\n  }\n  @keyframes msp-sh { 0%{background-position:0%} 100%{background-position:200%} }\n\n  .msp-rule {\n    width: 48px; height: 2px; margin: 0 auto 24px; opacity: 0;\n    background: linear-gradient(90deg, transparent, var(--blue), transparent);\n    border-radius: 2px;\n  }\n\n  .msp-sub {\n    font-size: clamp(.95rem, 2vw, 1.2rem); font-weight: 400;\n    color: var(--muted); line-height: 1.65;\n    max-width: 540px; margin: 0 auto 52px; opacity: 0;\n  }\n\n  .msp-stats {\n    display: flex; justify-content: center; align-items: center;\n    gap: 0; margin-bottom: 60px; opacity: 0;\n  }\n  .msp-stat { text-align: center; padding: 0 36px; }\n  .msp-stat-n {\n    font-family: var(--fd); font-size: clamp(2rem, 5vw, 3.6rem);\n    font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -.04em;\n  }\n  .msp-stat-l {\n    font-size: 9px; font-weight: 700; letter-spacing: .24em;\n    text-transform: uppercase; color: var(--muted); margin-top: 6px;\n  }\n  .msp-stat-sep { width: 1px; height: 44px; background: var(--border); }\n\n  .msp-scroll-cue {\n    display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0;\n  }\n  .msp-scroll-cue-t {\n    font-size: 9px; font-weight: 700; letter-spacing: .28em;\n    text-transform: uppercase; color: var(--muted);\n  }\n  .msp-scroll-cue-l {\n    width: 1px; height: 32px;\n    background: linear-gradient(var(--blue), transparent);\n    animation: msp-scl 2s ease-in-out infinite;\n  }\n  @keyframes msp-scl { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.18)} }\n\n  \/* \u2550\u2550\u2550 TIMELINE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .msp-tl {\n    position: relative;\n    background: var(--white);\n    padding: 0;\n  }\n  .msp-tl::before {\n    content: ''; position: absolute; inset: 0; pointer-events: none;\n    background-image: radial-gradient(rgba(147,197,253,.22) 1px, transparent 1px);\n    background-size: 28px 28px; z-index: 0;\n  }\n\n  \/* \u2500\u2500 Era header \u2500\u2500 *\/\n  .msp-era-hdr {\n    position: relative; z-index: 2;\n    display: flex; align-items: center;\n    padding: 56px 60px 32px;\n    max-width: 1100px; margin: 0 auto;\n    gap: 20px;\n  }\n  .msp-era-hdr::after {\n    content: ''; flex: 1; height: 1px;\n    background: linear-gradient(90deg, var(--ec, var(--border)) 0%, transparent 100%);\n    opacity: .35;\n  }\n  .msp-era-num {\n    font-family: var(--fd); font-size: 11px; font-weight: 700;\n    letter-spacing: .22em; text-transform: uppercase;\n    color: var(--ec, var(--blue)); flex-shrink: 0;\n    padding: 4px 12px; border-radius: 100px;\n    border: 1px solid; border-color: var(--ec, var(--border));\n    opacity: .6;\n  }\n  .msp-era-name {\n    font-family: var(--fd); font-size: clamp(1rem, 2.2vw, 1.4rem);\n    font-weight: 700; letter-spacing: -.02em;\n    color: var(--navy); flex-shrink: 0;\n  }\n  .msp-era-yrs {\n    font-family: var(--fd); font-size: clamp(.85rem, 1.5vw, 1rem);\n    font-weight: 300; color: var(--ec, var(--blue)); flex-shrink: 0;\n    letter-spacing: .02em;\n  }\n\n  \/* \u2500\u2500 Milestone rows \u2500\u2500 *\/\n  .msp-rows {\n    position: relative; z-index: 2;\n    max-width: 1100px; margin: 0 auto;\n    padding: 0 60px 16px;\n  }\n  .msp-rows::before {\n    content: ''; position: absolute;\n    left: calc(60px + 168px);\n    top: 0; bottom: 0; width: 2px;\n    background: linear-gradient(to bottom, transparent, var(--border) 5%, var(--border) 95%, transparent);\n  }\n\n  .msp-row {\n    display: grid;\n    grid-template-columns: 168px 1fr;\n    gap: 0;\n    padding: 20px 0;\n    position: relative;\n  }\n  .msp-row-dot {\n    position: absolute;\n    left: 168px; top: 50%;\n    transform: translate(-50%, -50%);\n    width: 16px; height: 16px; border-radius: 50%;\n    background: var(--white); border: 3px solid var(--ec, var(--blue));\n    box-shadow: 0 0 0 5px rgba(59,130,246,.16), 0 2px 8px rgba(30,64,175,.22);\n    z-index: 3;\n  }\n\n  .msp-row-year {\n    display: flex; align-items: center;\n    padding-right: 32px; padding-top: 4px;\n  }\n  .msp-row-year-n {\n    font-family: var(--fd);\n    font-size: clamp(2.2rem, 3.8vw, 3.4rem);\n    font-weight: 900; line-height: 1; letter-spacing: -.045em;\n    background: linear-gradient(135deg, var(--ec, var(--deep)) 0%, var(--blue) 100%);\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n    filter: drop-shadow(0 1px 6px rgba(30,64,175,.14));\n    white-space: nowrap;\n  }\n\n  .msp-row-card {\n    margin-left: 32px;\n    background: var(--glass-s);\n    border: 1px solid rgba(147,197,253,.6);\n    border-left: 3.5px solid var(--ec, var(--blue));\n    border-radius: 16px;\n    padding: 24px 28px;\n    box-shadow: var(--sh);\n    position: relative; overflow: hidden;\n    transition: box-shadow .25s, transform .25s;\n  }\n  .msp-row-card:hover {\n    box-shadow: var(--sh-s); transform: translateY(-3px);\n  }\n  .msp-row-card::before {\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;\n    background: linear-gradient(90deg, var(--ec, var(--blue)) 0%, var(--sky) 60%, transparent 100%);\n    opacity: .7;\n  }\n  .msp-row-note {\n    font-family: var(--fd);\n    font-size: clamp(1.05rem, 2.1vw, 1.32rem);\n    font-weight: 700; letter-spacing: -.025em;\n    color: var(--navy); line-height: 1.3; margin-bottom: 16px;\n  }\n  .msp-row-badges { display: flex; flex-wrap: wrap; gap: 7px; }\n  .msp-badge {\n    display: inline-flex; align-items: center; gap: 6px;\n    padding: 5px 14px; border-radius: 100px;\n    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;\n    color: var(--deep);\n    background: linear-gradient(135deg, var(--soft) 0%, var(--lblue) 100%);\n    border: 1px solid rgba(147,197,253,.7);\n    white-space: nowrap;\n    transition: background .18s, transform .15s, box-shadow .18s;\n    box-shadow: 0 1px 3px rgba(30,64,175,.08);\n  }\n  .msp-badge:hover {\n    background: linear-gradient(135deg, var(--lblue) 0%, var(--sky) 60%, var(--lblue) 100%);\n    transform: translateY(-1px); box-shadow: 0 3px 10px rgba(30,64,175,.15);\n  }\n  .msp-badge::before {\n    content: ''; width: 5px; height: 5px; border-radius: 50%;\n    background: var(--ec, var(--blue)); flex-shrink: 0;\n    box-shadow: 0 0 5px rgba(59,130,246,.5);\n  }\n\n  \/* \u2550\u2550\u2550 CUSTOMERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .msp-customers {\n    background: linear-gradient(to bottom, var(--white), var(--soft) 30%, var(--lblue) 70%, var(--soft));\n    padding: 100px 40px;\n    position: relative;\n  }\n  .msp-customers::before {\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\n    background: linear-gradient(90deg, transparent 5%, var(--border) 50%, transparent 95%);\n  }\n  .msp-cl-inner {\n    max-width: 900px; margin: 0 auto; text-align: center;\n  }\n  .msp-cl-tag {\n    display: inline-flex; align-items: center; gap: 12px;\n    font-size: 10px; font-weight: 700; letter-spacing: .3em;\n    text-transform: uppercase; color: var(--blue); margin-bottom: 18px;\n  }\n  .msp-cl-tag::before, .msp-cl-tag::after {\n    content: ''; width: 24px; height: 1px; background: currentColor; opacity: .5;\n  }\n  .msp-cl-title {\n    font-family: var(--fd);\n    font-size: clamp(2.2rem, 6vw, 4.8rem);\n    font-weight: 800; line-height: .92; letter-spacing: -.04em;\n    color: var(--navy); margin-bottom: 18px;\n  }\n  .msp-cl-title em {\n    font-style: normal;\n    background: linear-gradient(128deg, var(--deep), var(--blue), var(--sky));\n    background-size: 200%;\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n    animation: msp-sh 6s linear infinite;\n  }\n  .msp-cl-sub {\n    font-size: clamp(.95rem, 1.7vw, 1.15rem); font-weight: 400;\n    color: var(--muted); line-height: 1.68;\n    max-width: 580px; margin: 0 auto 56px;\n  }\n  .msp-brands {\n    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;\n  }\n  .msp-brand {\n    font-family: var(--fd); font-size: 12px; font-weight: 700;\n    letter-spacing: .12em; text-transform: uppercase;\n    color: var(--deep); padding: 11px 26px; border-radius: 100px;\n    background: var(--glass-s); border: 1px solid rgba(147,197,253,.65);\n    box-shadow: var(--sh);\n    transition: background .22s, box-shadow .22s, transform .22s;\n    cursor: default;\n  }\n  .msp-brand:hover {\n    background: linear-gradient(135deg, var(--lblue), var(--soft));\n    box-shadow: var(--sh-s); transform: translateY(-3px);\n  }\n\n  \/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  @media (max-width: 860px) {\n    .msp-era-hdr { padding: 44px 24px 24px; }\n    .msp-rows { padding: 0 24px 12px; }\n    .msp-rows::before { display: none; }\n    .msp-row { grid-template-columns: 1fr; padding: 16px 0; gap: 12px; }\n    .msp-row-dot { display: none; }\n    .msp-row-year { padding-right: 0; padding-bottom: 2px; }\n    .msp-row-year-n { font-size: clamp(2rem, 7vw, 2.8rem); }\n    .msp-row-card { margin-left: 0; }\n    .msp-era-hdr::after { display: none; }\n  }\n  @media (max-width: 600px) {\n    .msp-stat { padding: 0 16px; }\n    .msp-stat-sep { display: none; }\n    .msp-stats { gap: 24px; flex-wrap: wrap; }\n    .msp-hero { padding: 60px 24px; }\n    .msp-row-card { padding: 18px 20px; }\n    .msp-customers { padding: 72px 24px; }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after { animation: none !important; transition: none !important; }\n  }\n  <\/style>\n<\/head>\n<body>\n\n<!-- Scroll progress bar -->\n<div id=\"msp-prog\"><\/div>\n\n<!-- Custom cursor -->\n<div id=\"msp-cur\"><\/div>\n<div id=\"msp-ring\"><\/div>\n\n<!-- \u2550\u2550 HERO \u2550\u2550 -->\n<section class=\"msp-hero\">\n  <canvas id=\"msp-canvas\"><\/canvas>\n  <div class=\"msp-hero-in\">\n    <div class=\"msp-eye\" id=\"msp-eye\">Since 1984 &nbsp;\u00b7&nbsp; Powering Malaysia's Automotive Industry<\/div>\n    <h1 class=\"msp-title\" id=\"msp-title\">\n      <span class=\"ln\"><span class=\"lni\">Milestone<\/span><\/span>\n      <span class=\"ln\"><span class=\"lni\">Projects<\/span><\/span>\n    <\/h1>\n    <div class=\"msp-rule\" id=\"msp-rule\"><\/div>\n    <p class=\"msp-sub\" id=\"msp-sub\">Four decades of shaping Malaysia's automotive landscape \u2014 from the first Proton Saga to today's electrified future.<\/p>\n    <div class=\"msp-stats\" id=\"msp-stats\">\n      <div class=\"msp-stat\"><div class=\"msp-stat-n\" id=\"msp-s1\">0<\/div><div class=\"msp-stat-l\">Years<\/div><\/div>\n      <div class=\"msp-stat-sep\"><\/div>\n      <div class=\"msp-stat\"><div class=\"msp-stat-n\" id=\"msp-s2\">0<\/div><div class=\"msp-stat-l\">Milestones<\/div><\/div>\n      <div class=\"msp-stat-sep\"><\/div>\n      <div class=\"msp-stat\"><div class=\"msp-stat-n\" id=\"msp-s3\">0<\/div><div class=\"msp-stat-l\">Brand Partners<\/div><\/div>\n    <\/div>\n    <div class=\"msp-scroll-cue\" id=\"msp-cue\">\n      <span class=\"msp-scroll-cue-t\">Scroll to explore<\/span>\n      <div class=\"msp-scroll-cue-l\"><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550 TIMELINE \u2550\u2550 -->\n<div class=\"msp-tl\" id=\"msp-tl\"><\/div>\n\n<!-- \u2550\u2550 CUSTOMERS \u2550\u2550 -->\n<section class=\"msp-customers\">\n  <div class=\"msp-cl-inner\">\n    <div class=\"msp-cl-tag\">Our Customers<\/div>\n    <h2 class=\"msp-cl-title\">Trusted by Malaysia's<br><em>Automotive Leaders<\/em><\/h2>\n    <p class=\"msp-cl-sub\">From the first Proton Saga to the latest EV platforms, UI Group has supplied precision-engineered components for every major vehicle brand in Malaysia.<\/p>\n    <div class=\"msp-brands\" id=\"msp-brands\"><\/div>\n  <\/div>\n<\/section>\n\n<script>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   DATA\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst ERAS = [\n  {\n    num:'', label:'The Pioneer Years', years:'1984 \u2013 1993',\n    color:'#1e40af',\n    ms:[\n      { year:1984, note:\"Malaysia's First National Car\",    cars:['Proton Saga'] },\n      { year:1986, note:'First Japanese Partnership',       cars:['Toyota Corolla'] },\n      { year:1987, note:'Nissan Collaboration Begins',      cars:['Nissan Sunny'] },\n      { year:1992, note:'Second Generation Nationals',      cars:['Proton Iswara'] },\n      { year:1993, note:\"Malaysia's Second National Brand\", cars:['Perodua Kancil','Proton Wira'] },\n    ]\n  },\n  {\n    num:'', label:'The Expansion Era', years:'2000 \u2013 2009',\n    color:'#2563eb',\n    ms:[\n      { year:2000, note:'New Millennium Expansion',        cars:['Perodua Kenari','Proton Juara','Proton Arena','Proton Waja'] },\n      { year:2001, note:'Commercial & Passenger Growth',   cars:['Honda City','Hino Truck','Hino Bus'] },\n      { year:2002, note:'Honda Compact Lineup',            cars:['Honda CR-V','Honda Civic'] },\n      { year:2003, note:'Toyota Multi-Segment Entry',      cars:['Toyota Avanza','Toyota Vios'] },\n      { year:2004, note:'New Generation Models',           cars:['Proton Gen-2','Toyota Innova'] },\n      { year:2005, note:\"Malaysia's Best-Selling Car\",     cars:['Perodua Myvi'] },\n      { year:2007, note:'Multi-Brand Expansion',           cars:['Perodua Viva','Proton Persona','Nissan X-Trail','Nissan Latio','Nissan Grand Livina'] },\n      { year:2009, note:'MPV Category Growth',             cars:['Proton Exora','Perodua Alza'] },\n    ]\n  },\n  {\n    num:'', label:'The Innovation Era', years:'2010 \u2013 2019',\n    color:'#3b82f6',\n    ms:[\n      { year:2010, note:'Japanese Partnerships Deepen',    cars:['Proton Inspira','Nissan Sylphy','Nissan Teana','Suzuki Swift YN3'] },\n      { year:2011, note:'New Trust Gained',            cars:['Subaru XV'] },\n      { year:2012, note:'Premium Segment Growth',          cars:['Proton Preve','Toyota Camry','Nissan Almera'] },\n      { year:2013, note:'Most Affordable National Car',    cars:['Perodua Axia'] },\n      { year:2014, note:'New Generation Models',           cars:['Mazda 3','Proton Suprima S','Proton Iriz','Honda Jazz','Nissan Serena','Mazda CX-5','Honda City GN'] },\n      { year:2015, note:'Commercial Vehicle Segment',      cars:['Toyota Hilux','Nissan Navara'] },\n      { year:2016, note:'Expanding Vehicle Categories',    cars:['Honda BR-V','Isuzu D-Max','Toyota Innova','Toyota Fortuner','Toyota Hiace','Honda Civic','Honda HR-V','Subaru Forester'] },\n      { year:2017, note:'Korean Brand Partnership',        cars:['Toyota Rush','KIA Optima','Honda Jazz','Honda CR-V'] },\n      { year:2018, note:'Next-Generation Nationals',       cars:['Perodua Myvi (3rd Gen)','Mitsubishi ASX','Honda HR-V','Perodua Aruz'] },\n      { year:2019, note:'Crossover Segment Growth',        cars:['Toyota Corolla Cross','Honda Accord','Mazda CX-5','Mazda CX-8','Honda HR-V'] },\n    ]\n  },\n  {\n    num:'', label:'The Future Forward', years:'2020 \u2013 2025',\n    color:'#071a3d',\n    ms:[\n      { year:2020, note:'Resilience Through Challenge',     cars:['Toyota IMV','Perodua Ativa','Proton X70','Isuzu VL01','Mitsubishi X-Pander'] },\n      { year:2021, note:\"Proton's SUV Renaissance\",         cars:['Proton X50','Proton X70','Proton Iriz','Proton Persona','Proton Saga','Proton Exora','Honda Civic','Isuzu RG01'] },\n      { year:2022, note:'Versatile Hatchback Era',          cars:['Toyota Veloz','Toyota Corolla Cross','Honda City Hatchback','Mazda CX-30','Perodua Alza','Honda HR-V'] },\n      { year:2023, note:'Electric Vehicle Era Begins',      cars:['Perodua Axia (3rd Gen)','KIA EV6','Honda HR-V','Honda WR-V','KIA Carnival','KIA Sorento','Toyota D92A','Toyota D54B'] },\n      { year:2024, note:'Next Generation Mobility',         cars:['Perodua P01A','Mitsubishi X-Force','GAC A79-G'] },\n      { year:2025, note:\"Powering Malaysia's Future\",       cars:['Perodua D01D'] },\n    ]\n  },\n];\n\nconst BRANDS = ['Proton','Perodua','Toyota','Honda','Nissan','Mazda','Subaru','Isuzu','KIA','Mitsubishi','Hino','GAC','Suzuki'];\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   THREE.JS PARTICLES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function initThree() {\n  if (typeof THREE === 'undefined') return;\n  const heroEl = document.querySelector('.msp-hero');\n  const canvas = document.getElementById('msp-canvas');\n  if (!canvas || !heroEl) return;\n\n  let W = heroEl.offsetWidth, H = heroEl.offsetHeight;\n\n  const scene  = new THREE.Scene();\n  const camera = new THREE.PerspectiveCamera(55, W \/ H, 1, 3000);\n  camera.position.z = 700;\n\n  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false });\n  renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));\n  renderer.setSize(W, H);\n\n  const N = W < 600 ? 600 : 1200;\n  const positions = new Float32Array(N * 3);\n  const colors    = new Float32Array(N * 3);\n  const pal = [\n    [0.04, 0.10, 0.24],\n    [0.09, 0.19, 0.56],\n    [0.12, 0.25, 0.69],\n    [0.23, 0.51, 0.96],\n  ];\n  for (let i = 0; i < N; i++) {\n    const i3 = i * 3;\n    positions[i3]   = (Math.random() - .5) * 2400;\n    positions[i3+1] = (Math.random() - .5) * 2400;\n    positions[i3+2] = (Math.random() - .5) * 2400;\n    const p = pal[Math.floor(Math.random() * pal.length)];\n    colors[i3] = p[0]; colors[i3+1] = p[1]; colors[i3+2] = p[2];\n  }\n\n  const geo = new THREE.BufferGeometry();\n  geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n  geo.setAttribute('color',    new THREE.BufferAttribute(colors, 3));\n\n  const mat = new THREE.PointsMaterial({\n    size: 4.5, vertexColors: true, transparent: true, opacity: 0.62, sizeAttenuation: true,\n  });\n  const dots = new THREE.Points(geo, mat);\n  scene.add(dots);\n\n  let mx = 0, my = 0;\n  document.addEventListener('mousemove', e => {\n    mx = (e.clientX \/ window.innerWidth  - .5) * 2;\n    my = (e.clientY \/ window.innerHeight - .5) * 2;\n  });\n\n  new ResizeObserver(() => {\n    W = heroEl.offsetWidth; H = heroEl.offsetHeight;\n    camera.aspect = W \/ H; camera.updateProjectionMatrix();\n    renderer.setSize(W, H);\n  }).observe(heroEl);\n\n  const clk = new THREE.Clock();\n  (function tick() {\n    requestAnimationFrame(tick);\n    const t = clk.getElapsedTime();\n    dots.rotation.y = t * .00007 + mx * .028;\n    dots.rotation.x = t * .00004 + my * .018;\n    renderer.render(scene, camera);\n  })();\n})();\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BUILD TIMELINE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst tlEl = document.getElementById('msp-tl');\n\nERAS.forEach(era => {\n  const hdr = document.createElement('div');\n  hdr.className = 'msp-era-hdr';\n  hdr.style.setProperty('--ec', era.color);\n  hdr.innerHTML = `\n    <span class=\"msp-era-num\">${era.num}<\/span>\n    <span class=\"msp-era-name\">${era.label}<\/span>\n    <span class=\"msp-era-yrs\">${era.years}<\/span>`;\n  tlEl.appendChild(hdr);\n\n  const rows = document.createElement('div');\n  rows.className = 'msp-rows';\n  rows.style.setProperty('--ec', era.color);\n\n  era.ms.forEach(m => {\n    const row = document.createElement('div');\n    row.className = 'msp-row';\n    row.style.setProperty('--ec', era.color);\n    row.innerHTML = `\n      <div class=\"msp-row-dot\" style=\"border-color:${era.color}\"><\/div>\n      <div class=\"msp-row-year\"><span class=\"msp-row-year-n\">${m.year}<\/span><\/div>\n      <div class=\"msp-row-card\">\n        <div class=\"msp-row-note\">${m.note}<\/div>\n        <div class=\"msp-row-badges\">${m.cars.map(c => `<span class=\"msp-badge\">${c}<\/span>`).join('')}<\/div>\n      <\/div>`;\n    rows.appendChild(row);\n  });\n\n  tlEl.appendChild(rows);\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BUILD BRAND PILLS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst brandsEl = document.getElementById('msp-brands');\nBRANDS.forEach(b => {\n  const el = document.createElement('div');\n  el.className = 'msp-brand';\n  el.textContent = b;\n  brandsEl.appendChild(el);\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SCROLL PROGRESS BAR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst progBar = document.getElementById('msp-prog');\nwindow.addEventListener('scroll', function () {\n  const p = window.scrollY \/ Math.max(1, document.body.scrollHeight - window.innerHeight);\n  progBar.style.width = (p * 100) + '%';\n}, { passive: true });\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   GSAP ANIMATIONS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nif (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n  gsap.registerPlugin(ScrollTrigger);\n\n  gsap.set(['#msp-eye','#msp-rule','#msp-sub','#msp-stats','#msp-cue'], { opacity:0 });\n  gsap.timeline({ delay: .1 })\n    .to('.lni',       { y:0, duration:1.05, stagger:.13, ease:'power4.out' })\n    .to('#msp-eye',   { opacity:1, duration:.7, ease:'power3.out' }, '-=.65')\n    .to('#msp-rule',  { opacity:1, scaleX:1, duration:.7, ease:'power3.out' }, '-=.5')\n    .to('#msp-sub',   { opacity:1, duration:.65, ease:'power3.out' }, '-=.45')\n    .to('#msp-stats', { opacity:1, duration:.65, ease:'power3.out' }, '-=.4')\n    .to('#msp-cue',   { opacity:1, duration:.5, ease:'power2.out' }, '-=.25');\n\n  function cnt(id, to, sfx, d) {\n    const el = document.getElementById(id); if (!el) return;\n    gsap.to({ v:0 }, {\n      v: to, duration: 2.0, delay: d, ease: 'power2.out',\n      onUpdate: function () { el.textContent = Math.round(this.targets()[0].v) + sfx; }\n    });\n  }\n  cnt('msp-s1', 40, '+', .8);\n  cnt('msp-s2', 29, '',  1.0);\n  cnt('msp-s3', 13, '+', 1.2);\n\n  document.querySelectorAll('.msp-era-hdr').forEach(hdr => {\n    gsap.set(hdr, { opacity:0, x:-20 });\n    ScrollTrigger.create({\n      trigger: hdr, start: 'top 82%',\n      onEnter: () => gsap.to(hdr, { opacity:1, x:0, duration:.7, ease:'power3.out' })\n    });\n  });\n\n  document.querySelectorAll('.msp-row').forEach(row => {\n    const dot  = row.querySelector('.msp-row-dot');\n    const yr   = row.querySelector('.msp-row-year');\n    const card = row.querySelector('.msp-row-card');\n    const bdgs = row.querySelectorAll('.msp-badge');\n    gsap.set(yr,   { opacity:0, x:-16 });\n    gsap.set(card, { opacity:0, x:20 });\n    gsap.set(dot,  { opacity:0, scale:0 });\n    gsap.set(bdgs, { opacity:0, y:10 });\n    ScrollTrigger.create({\n      trigger: row, start: 'top 80%',\n      onEnter: () => {\n        gsap.to(dot,  { opacity:1, scale:1, duration:.38, ease:'back.out(2)' });\n        gsap.to(yr,   { opacity:1, x:0, duration:.6, ease:'power3.out' });\n        gsap.to(card, { opacity:1, x:0, duration:.65, ease:'power3.out', delay:.06 });\n        gsap.to(bdgs, { opacity:1, y:0, duration:.4, stagger:.045, ease:'back.out(1.5)', delay:.24 });\n      }\n    });\n  });\n\n  gsap.set('.msp-cl-inner > *', { opacity:0, y:22 });\n  ScrollTrigger.create({\n    trigger: '.msp-customers', start: 'top 72%',\n    onEnter: () => gsap.to('.msp-cl-inner > *', { opacity:1, y:0, duration:.75, stagger:.09, ease:'power3.out' })\n  });\n\n  gsap.set('.msp-brand', { opacity:0, y:12, scale:.94 });\n  ScrollTrigger.create({\n    trigger: '#msp-brands', start: 'top 84%',\n    onEnter: () => gsap.to('.msp-brand', { opacity:1, y:0, scale:1, duration:.45, stagger:.04, ease:'back.out(1.6)' })\n  });\n\n  ScrollTrigger.create({\n    start: 60, end: 99999,\n    onUpdate: s => gsap.to('#msp-cue', { opacity: s.isActive ? 0 : 1, duration:.35 })\n  });\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CUSTOM CURSOR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function () {\n  const cur  = document.getElementById('msp-cur');\n  const ring = document.getElementById('msp-ring');\n  if (!cur || !ring) return;\n  let cx=0, cy=0, rx=0, ry=0;\n\n  document.addEventListener('mousemove', e => {\n    cx = e.clientX; cy = e.clientY;\n    cur.style.left = cx + 'px'; cur.style.top = cy + 'px';\n  });\n  (function lr() {\n    rx += (cx - rx) * .12; ry += (cy - ry) * .12;\n    ring.style.left = rx + 'px'; ring.style.top = ry + 'px';\n    requestAnimationFrame(lr);\n  })();\n\n  document.querySelectorAll('.msp-row-card, .msp-brand, .msp-era-hdr').forEach(el => {\n    el.addEventListener('mouseenter', () => {\n      cur.style.width = cur.style.height = '12px';\n      ring.style.width = ring.style.height = '48px';\n      ring.style.borderColor = 'rgba(30,64,175,.42)';\n    });\n    el.addEventListener('mouseleave', () => {\n      cur.style.width = cur.style.height = '8px';\n      ring.style.width = ring.style.height = '32px';\n      ring.style.borderColor = 'rgba(30,64,175,.28)';\n    });\n  });\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\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>Milestone Projects \u2014 UI Group \/ UISB Since 1984 &nbsp;\u00b7&nbsp; Powering Malaysia&#8217;s Automotive Industry Milestone Projects Four decades of shaping [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2876","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/comments?post=2876"}],"version-history":[{"count":33,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2876\/revisions"}],"predecessor-version":[{"id":4034,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2876\/revisions\/4034"}],"wp:attachment":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/media?parent=2876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}