{"product_id":"cfx-modern-textui-inspired","title":"Modern TextUI Inspired by GTA VI \u0026 RDR2","description":"\u003cstyle\u003e\n  \/* =========================================================\n     FIVEM-LAB — MZ_TEXTUI\n     FREE MODERN TEXTUI \/ HOLD TO INTERACT\n     ========================================================= *\/\n\n  .fml-mztextui {\n    --gold:#ffd700;\n    --white:#ffffff;\n    --black:#050505;\n    --text:rgba(255,255,255,.92);\n    --muted:rgba(255,255,255,.66);\n    --dim:rgba(255,255,255,.42);\n    --line:rgba(255,255,255,.10);\n    --line-soft:rgba(255,255,255,.055);\n    --gold-line:rgba(255,215,0,.34);\n    --panel:rgba(255,255,255,.022);\n    --green:#69e7a8;\n\n    width:100%;\n    max-width:1180px;\n    margin:0 auto;\n    padding:18px 0 88px;\n\n    color:var(--text);\n    background:transparent;\n    font-family:inherit;\n    font-size:16px;\n    line-height:1.7;\n  }\n\n  .fml-mztextui,\n  .fml-mztextui *,\n  .fml-mztextui *::before,\n  .fml-mztextui *::after {\n    box-sizing:border-box;\n  }\n\n  .fml-mztextui h2,\n  .fml-mztextui h3,\n  .fml-mztextui p,\n  .fml-mztextui dl,\n  .fml-mztextui dt,\n  .fml-mztextui dd,\n  .fml-mztextui pre {\n    margin:0;\n  }\n\n  .fml-mztextui a {\n    color:inherit;\n  }\n\n  .fml-mztextui ::selection {\n    color:#000;\n    background:var(--gold);\n  }\n\n  .fml-mztextui code {\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n  }\n\n\n  \/* =========================================================\n     HERO\n     ========================================================= *\/\n\n  .fml-mztextui__hero {\n    position:relative;\n    isolation:isolate;\n    overflow:hidden;\n\n    display:grid;\n    grid-template-columns:minmax(0,1.02fr) minmax(320px,.72fr);\n    gap:clamp(28px,5vw,64px);\n    align-items:center;\n\n    padding:clamp(34px,5vw,68px);\n\n    border:1px solid var(--line);\n    border-top-color:var(--gold-line);\n    border-radius:7px;\n\n    background:\n      radial-gradient(\n        circle at 87% 8%,\n        rgba(255,215,0,.14),\n        transparent 28%\n      ),\n      linear-gradient(\n        135deg,\n        rgba(255,215,0,.035),\n        transparent 48%\n      ),\n      rgba(0,0,0,.18);\n  }\n\n  .fml-mztextui__hero::before {\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:0;\n\n    width:min(430px,70%);\n    height:2px;\n\n    background:var(--gold);\n    box-shadow:0 0 24px rgba(255,215,0,.36);\n  }\n\n  .fml-mztextui__eyebrow {\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px 16px;\n\n    margin-bottom:24px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.15em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__eyebrow span + span {\n    color:var(--dim);\n  }\n\n  .fml-mztextui__eyebrow span + span::before {\n    content:\"\/\";\n    margin-right:16px;\n    color:var(--gold);\n  }\n\n  .fml-mztextui__title {\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(42px,5.8vw,72px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.052em;\n    line-height:.95 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-mztextui__lead {\n    max-width:760px;\n    margin-top:26px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(18px,1.8vw,22px);\n    font-weight:600;\n    line-height:1.58;\n  }\n\n  .fml-mztextui__lead strong {\n    color:var(--white);\n  }\n\n  .fml-mztextui__badges {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px;\n\n    margin-top:30px;\n  }\n\n  .fml-mztextui__badge {\n    display:inline-flex;\n    align-items:center;\n\n    min-height:36px;\n    padding:0 13px;\n\n    color:var(--white);\n    background:rgba(255,255,255,.025);\n\n    border:1px solid var(--line);\n    border-radius:3px;\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.09em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__badge--gold {\n    color:#050505;\n    background:var(--gold);\n    border-color:var(--gold);\n  }\n\n  .fml-mztextui__actions {\n    display:flex;\n    flex-wrap:wrap;\n    gap:12px;\n\n    margin-top:30px;\n  }\n\n  .fml-mztextui__button {\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    gap:10px;\n\n    min-height:46px;\n    padding:0 18px;\n\n    color:var(--white) !important;\n    background:rgba(255,255,255,.025);\n\n    border:1px solid var(--line);\n    border-radius:4px;\n\n    font-size:11px;\n    font-weight:900;\n    letter-spacing:.04em;\n    text-decoration:none !important;\n    text-transform:uppercase;\n\n    transition:\n      transform .18s ease,\n      border-color .18s ease,\n      color .18s ease;\n  }\n\n  .fml-mztextui__button:hover {\n    transform:translateY(-2px);\n    color:var(--gold) !important;\n    border-color:var(--gold-line);\n  }\n\n  .fml-mztextui__button--gold {\n    color:#050505 !important;\n    background:var(--gold);\n    border-color:var(--gold);\n  }\n\n  .fml-mztextui__button--gold:hover {\n    color:#050505 !important;\n    border-color:var(--gold);\n  }\n\n\n  \/* HERO MEDIA *\/\n\n  .fml-mztextui__hero-media {\n    position:relative;\n    overflow:hidden;\n\n    min-height:360px;\n\n    border:1px solid var(--line);\n    border-radius:5px;\n\n    background:#050505;\n  }\n\n  .fml-mztextui__hero-media img {\n    display:block;\n\n    width:100%;\n    height:100%;\n    min-height:360px;\n\n    object-fit:cover;\n  }\n\n  .fml-mztextui__hero-media::after {\n    content:\"\";\n    position:absolute;\n    inset:0;\n\n    pointer-events:none;\n\n    background:\n      linear-gradient(\n        180deg,\n        transparent 58%,\n        rgba(0,0,0,.68)\n      );\n  }\n\n  .fml-mztextui__media-label {\n    position:absolute;\n    z-index:2;\n    right:14px;\n    bottom:13px;\n    left:14px;\n\n    color:rgba(255,255,255,.72);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.10em;\n    text-transform:uppercase;\n  }\n\n\n  \/* =========================================================\n     SECTIONS\n     ========================================================= *\/\n\n  .fml-mztextui__section {\n    padding:clamp(54px,7vw,86px) 0;\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-mztextui__head {\n    display:grid;\n    grid-template-columns:minmax(125px,.24fr) minmax(0,1fr);\n    gap:clamp(26px,5vw,68px);\n    align-items:start;\n  }\n\n  .fml-mztextui__index {\n    padding-top:7px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__kicker {\n    margin-bottom:13px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:850;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__section-title {\n    max-width:950px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(29px,3.9vw,46px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.04em;\n    line-height:1.05 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-mztextui__intro {\n    max-width:890px;\n    margin-top:20px !important;\n\n    color:var(--muted) !important;\n\n    font-size:clamp(16px,1.45vw,19px);\n    line-height:1.74;\n  }\n\n  .fml-mztextui__statement {\n    display:grid;\n    grid-template-columns:minmax(0,1fr) auto;\n    gap:30px;\n    align-items:end;\n\n    margin-top:42px;\n    padding-top:27px;\n\n    border-top:1px solid var(--line);\n  }\n\n  .fml-mztextui__statement p {\n    max-width:850px;\n\n    color:var(--text) !important;\n\n    font-size:clamp(18px,2vw,23px);\n    font-weight:650;\n    line-height:1.5;\n  }\n\n  .fml-mztextui__code-label {\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:900;\n    letter-spacing:.12em;\n    white-space:nowrap;\n  }\n\n\n  \/* =========================================================\n     STATS\n     ========================================================= *\/\n\n  .fml-mztextui__stats {\n    display:grid;\n    grid-template-columns:repeat(4,minmax(0,1fr));\n    gap:12px;\n\n    margin-top:42px;\n  }\n\n  .fml-mztextui__stat {\n    min-width:0;\n    padding:23px;\n\n    border:1px solid var(--line);\n    border-top-color:var(--gold-line);\n    border-radius:4px;\n\n    background:var(--panel);\n  }\n\n  .fml-mztextui__stat small {\n    display:block;\n    margin-bottom:17px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__stat strong {\n    display:block;\n\n    color:var(--gold);\n\n    font-size:clamp(25px,3vw,37px);\n    font-weight:950;\n    letter-spacing:-.045em;\n    line-height:1;\n  }\n\n  .fml-mztextui__stat span {\n    display:block;\n    margin-top:10px;\n\n    color:var(--muted);\n\n    font-size:12px;\n    line-height:1.5;\n  }\n\n\n  \/* =========================================================\n     FEATURES\n     ========================================================= *\/\n\n  .fml-mztextui__grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:42px;\n  }\n\n  .fml-mztextui__card {\n    position:relative;\n    overflow:hidden;\n\n    min-width:0;\n    padding:clamp(24px,3vw,31px);\n\n    border:1px solid var(--line);\n    border-radius:4px;\n\n    background:var(--panel);\n\n    transition:\n      transform .18s ease,\n      border-color .18s ease,\n      background .18s ease;\n  }\n\n  .fml-mztextui__card::before {\n    content:\"\";\n    position:absolute;\n    top:0;\n    left:0;\n\n    width:0;\n    height:1px;\n\n    background:var(--gold);\n\n    transition:width .22s ease;\n  }\n\n  .fml-mztextui__card:hover {\n    transform:translateY(-2px);\n    border-color:var(--gold-line);\n    background:rgba(255,255,255,.038);\n  }\n\n  .fml-mztextui__card:hover::before {\n    width:100%;\n  }\n\n  .fml-mztextui__card-top {\n    display:flex;\n    justify-content:space-between;\n    gap:14px;\n\n    margin-bottom:27px;\n  }\n\n  .fml-mztextui__number {\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:10px;\n    font-weight:950;\n  }\n\n  .fml-mztextui__label {\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:800;\n    letter-spacing:.09em;\n    text-align:right;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__card h3 {\n    margin:0 0 11px !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(20px,2vw,25px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.03em;\n    line-height:1.15 !important;\n  }\n\n  .fml-mztextui__card p {\n    color:var(--muted) !important;\n\n    font-size:14px;\n    line-height:1.7;\n  }\n\n\n  \/* =========================================================\n     CODE\n     ========================================================= *\/\n\n  .fml-mztextui__code-grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:42px;\n  }\n\n  .fml-mztextui__code-box {\n    min-width:0;\n    overflow:hidden;\n\n    border:1px solid var(--line);\n    border-radius:4px;\n\n    background:#050708;\n  }\n\n  .fml-mztextui__code-head {\n    display:flex;\n    justify-content:space-between;\n    gap:14px;\n\n    padding:13px 16px;\n\n    border-bottom:1px solid var(--line);\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.1em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__code-head strong {\n    color:var(--gold);\n  }\n\n  .fml-mztextui__code-box pre {\n    padding:22px;\n    overflow:auto;\n\n    color:rgba(255,255,255,.75);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:12px;\n    line-height:1.75;\n    white-space:pre;\n  }\n\n  .fml-mztextui__code-box .gold {\n    color:var(--gold);\n  }\n\n  .fml-mztextui__code-box .green {\n    color:var(--green);\n  }\n\n  .fml-mztextui__code-box .dim {\n    color:rgba(255,255,255,.35);\n  }\n\n\n  \/* =========================================================\n     EXPORTS\n     ========================================================= *\/\n\n  .fml-mztextui__exports {\n    display:grid;\n    gap:9px;\n\n    margin-top:42px;\n  }\n\n  .fml-mztextui__export {\n    display:grid;\n    grid-template-columns:minmax(270px,.5fr) minmax(0,.5fr);\n    gap:20px;\n    align-items:center;\n\n    padding:17px 19px;\n\n    border:1px solid var(--line-soft);\n    border-radius:4px;\n\n    background:rgba(255,255,255,.015);\n  }\n\n  .fml-mztextui__export code {\n    color:var(--gold);\n\n    font-size:11px;\n    font-weight:850;\n  }\n\n  .fml-mztextui__export span {\n    color:var(--muted);\n\n    font-size:13px;\n  }\n\n\n  \/* =========================================================\n     GALLERY\n     ========================================================= *\/\n\n  .fml-mztextui__gallery {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    gap:14px;\n\n    margin-top:42px;\n  }\n\n  .fml-mztextui__image {\n    overflow:hidden;\n\n    border:1px solid var(--line);\n    border-radius:5px;\n\n    background:#050505;\n  }\n\n  .fml-mztextui__image img {\n    display:block;\n\n    width:100%;\n    height:auto;\n\n    transition:transform .3s ease;\n  }\n\n  .fml-mztextui__image:hover img {\n    transform:scale(1.015);\n  }\n\n\n  \/* =========================================================\n     TECH\n     ========================================================= *\/\n\n  .fml-mztextui__terminal {\n    margin-top:42px;\n    overflow:hidden;\n\n    border:1px solid var(--gold-line);\n    border-radius:4px;\n\n    background:\n      linear-gradient(\n        180deg,\n        rgba(255,215,0,.026),\n        transparent 30%\n      ),\n      rgba(0,0,0,.20);\n  }\n\n  .fml-mztextui__terminal-head {\n    display:flex;\n    flex-wrap:wrap;\n    justify-content:space-between;\n    gap:10px 24px;\n\n    padding:14px 18px;\n\n    border-bottom:1px solid var(--line);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.09em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__terminal-head strong {\n    color:var(--gold);\n  }\n\n  .fml-mztextui__terminal-head span {\n    color:var(--dim);\n  }\n\n  .fml-mztextui__spec-grid {\n    display:grid;\n    grid-template-columns:repeat(2,minmax(0,1fr));\n  }\n\n  .fml-mztextui__spec {\n    min-width:0;\n    padding:clamp(23px,3.5vw,32px);\n\n    border-right:1px solid var(--line);\n    border-bottom:1px solid var(--line);\n  }\n\n  .fml-mztextui__spec:nth-child(2n) {\n    border-right:0;\n  }\n\n  .fml-mztextui__spec:nth-last-child(-n + 2) {\n    border-bottom:0;\n  }\n\n  .fml-mztextui__spec dt {\n    margin-bottom:11px;\n\n    color:var(--dim);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:8px;\n    font-weight:900;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__spec-value {\n    display:block;\n\n    color:var(--white);\n\n    font-size:clamp(19px,2.3vw,28px);\n    font-weight:950;\n    letter-spacing:-.035em;\n    line-height:1.1;\n  }\n\n  .fml-mztextui__spec:first-child\n  .fml-mztextui__spec-value {\n    color:var(--gold);\n  }\n\n  .fml-mztextui__spec-copy {\n    display:block;\n    margin-top:9px;\n\n    color:var(--muted);\n\n    font-size:12px;\n    line-height:1.58;\n  }\n\n\n  \/* =========================================================\n     CLOSING\n     ========================================================= *\/\n\n  .fml-mztextui__closing {\n    position:relative;\n    overflow:hidden;\n\n    margin-top:clamp(62px,8vw,100px);\n    padding:clamp(38px,6vw,70px);\n\n    border-top:1px solid var(--gold-line);\n    border-bottom:1px solid var(--line);\n\n    background:\n      radial-gradient(\n        circle at 100% 0,\n        rgba(255,215,0,.12),\n        transparent 34%\n      ),\n      rgba(255,255,255,.012);\n  }\n\n  .fml-mztextui__closing-label {\n    margin-bottom:19px;\n\n    color:var(--gold);\n\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace;\n\n    font-size:9px;\n    font-weight:900;\n    letter-spacing:.13em;\n    text-transform:uppercase;\n  }\n\n  .fml-mztextui__closing h2 {\n    max-width:950px;\n    margin:0 !important;\n\n    color:var(--white) !important;\n\n    font-size:clamp(31px,4.4vw,52px) !important;\n    font-weight:950 !important;\n    letter-spacing:-.045em;\n    line-height:1.03 !important;\n\n    text-wrap:balance;\n  }\n\n  .fml-mztextui__closing p {\n    max-width:880px;\n    margin-top:20px !important;\n\n    color:var(--muted) !important;\n\n    font-size:16px;\n    line-height:1.74;\n  }\n\n  .fml-mztextui__closing-actions {\n    display:flex;\n    flex-wrap:wrap;\n    gap:12px;\n\n    margin-top:28px;\n  }\n\n  .fml-mztextui__final {\n    margin-top:clamp(44px,7vw,72px);\n\n    color:var(--white);\n\n    font-size:clamp(25px,3.7vw,44px);\n    font-weight:950;\n    letter-spacing:-.043em;\n    line-height:1.08;\n    text-align:center;\n\n    text-wrap:balance;\n  }\n\n  .fml-mztextui__final em {\n    color:var(--gold);\n    font-style:normal;\n  }\n\n\n  \/* =========================================================\n     RESPONSIVE\n     ========================================================= *\/\n\n  @media (max-width:1000px) {\n    .fml-mztextui__hero {\n      grid-template-columns:1fr;\n    }\n\n    .fml-mztextui__hero-media {\n      min-height:420px;\n    }\n\n    .fml-mztextui__hero-media img {\n      min-height:420px;\n    }\n\n    .fml-mztextui__stats {\n      grid-template-columns:repeat(2,minmax(0,1fr));\n    }\n  }\n\n  @media (max-width:900px) {\n    .fml-mztextui__head {\n      grid-template-columns:1fr;\n      gap:15px;\n    }\n  }\n\n  @media (max-width:680px) {\n    .fml-mztextui {\n      padding-top:8px;\n    }\n\n    .fml-mztextui__hero {\n      padding:29px 20px;\n    }\n\n    .fml-mztextui__eyebrow {\n      display:grid;\n      gap:5px;\n    }\n\n    .fml-mztextui__eyebrow span + span::before {\n      display:none;\n    }\n\n    .fml-mztextui__hero-media,\n    .fml-mztextui__hero-media img {\n      min-height:270px;\n    }\n\n    .fml-mztextui__actions,\n    .fml-mztextui__closing-actions {\n      flex-direction:column;\n    }\n\n    .fml-mztextui__button {\n      width:100%;\n    }\n\n    .fml-mztextui__statement,\n    .fml-mztextui__stats,\n    .fml-mztextui__grid,\n    .fml-mztextui__code-grid,\n    .fml-mztextui__gallery,\n    .fml-mztextui__spec-grid {\n      grid-template-columns:1fr;\n    }\n\n    .fml-mztextui__code-label {\n      white-space:normal;\n    }\n\n    .fml-mztextui__export {\n      grid-template-columns:1fr;\n      gap:6px;\n    }\n\n    .fml-mztextui__spec {\n      border-right:0;\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-mztextui__spec:nth-last-child(-n + 2) {\n      border-bottom:1px solid var(--line);\n    }\n\n    .fml-mztextui__spec:last-child {\n      border-bottom:0;\n    }\n\n    .fml-mztextui__closing {\n      padding:36px 21px;\n    }\n  }\n\n  @media (prefers-reduced-motion:reduce) {\n    .fml-mztextui *,\n    .fml-mztextui *::before,\n    .fml-mztextui *::after {\n      transition-duration:.01ms !important;\n      animation-duration:.01ms !important;\n    }\n  }\n\u003c\/style\u003e\n\n\n\u003carticle class=\"fml-mztextui\"\u003e\n\n  \u003c!-- =======================================================\n       HERO\n       ======================================================= --\u003e\n\n  \u003cheader class=\"fml-mztextui__hero\"\u003e\n\n    \u003cdiv\u003e\n\n      \u003cdiv class=\"fml-mztextui__eyebrow\"\u003e\n        \u003cspan\u003eFree FiveM Resource\u003c\/span\u003e\n        \u003cspan\u003eModern Interaction UI\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003ch2 class=\"fml-mztextui__title\"\u003e\n        mz_textui\n      \u003c\/h2\u003e\n\n      \u003cp class=\"fml-mztextui__lead\"\u003e\n        You know that moment when a server is technically good, but every\n        interaction still screams \u003cstrong\u003e“old FiveM”\u003c\/strong\u003e?\n        mz_textui fixes exactly that little detail.\n        Clean prompts, smooth hold-to-interact behavior and almost no overhead —\n        a tiny resource that can make the whole server feel noticeably more\n        polished.\n      \u003c\/p\u003e\n\n      \u003cdiv class=\"fml-mztextui__badges\"\u003e\n\n        \u003cspan class=\"fml-mztextui__badge fml-mztextui__badge--gold\"\u003e\n          Free \u0026amp; Open Source\n        \u003c\/span\u003e\n\n        \u003cspan class=\"fml-mztextui__badge\"\u003e\n          No Dependencies\n        \u003c\/span\u003e\n\n        \u003cspan class=\"fml-mztextui__badge\"\u003e\n          Hold to Interact\n        \u003c\/span\u003e\n\n        \u003cspan class=\"fml-mztextui__badge\"\u003e\n          Simple Exports\n        \u003c\/span\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"fml-mztextui__actions\"\u003e\n\n        \u003ca class=\"fml-mztextui__button fml-mztextui__button--gold\" href=\"https:\/\/github.com\/kmc233\/mz_textui\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n          Get it Free on GitHub\n          \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n        \u003c\/a\u003e\n\n        \u003ca class=\"fml-mztextui__button\" href=\"https:\/\/forum.cfx.re\/t\/free-modern-textui-inspired-by-gta-vi-rdr2\/5424217\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n          Cfx.re Release\n          \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n        \u003c\/a\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__hero-media\"\u003e\n\n      \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/a\/4\/f\/9\/a4f934042caf911cca8aed599572b41a17649ead.gif\" alt=\"mz_textui FiveM hold to interact TextUI preview\" loading=\"lazy\" width=\"400\" height=\"225\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__media-label\"\u003e\n        Hold · Complete · Trigger\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/header\u003e\n\n\n  \u003c!-- =======================================================\n       WHY IT MATTERS\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        00 \/ Feel\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          Small UI. Big difference.\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          Good interaction design is the stuff players notice without realizing they noticed it.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-mztextui__intro\"\u003e\n          Open a garage. Search a locker. Enter a property. Manage a business.\n          Talk to an NPC. None of these interactions need a giant menu slapped\n          onto the screen. Sometimes all you need is one clean prompt that feels\n          responsive and gets out of the way.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__statement\"\u003e\n\n      \u003cp\u003e\n        mz_textui gives ordinary FiveM interactions that satisfying\n        press-and-hold feel players already understand from modern games —\n        without turning a simple prompt into a whole UI framework.\n      \u003c\/p\u003e\n\n      \u003cspan class=\"fml-mztextui__code-label\"\u003e\n        \/\/ PRESS · HOLD · DONE\n      \u003c\/span\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__stats\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__stat\"\u003e\n        \u003csmall\u003eIdle Usage\u003c\/small\u003e\n        \u003cstrong\u003e0.00 ms\u003c\/strong\u003e\n        \u003cspan\u003eReported resource monitor usage while idle.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__stat\"\u003e\n        \u003csmall\u003eWhile Holding\u003c\/small\u003e\n        \u003cstrong\u003e~0.03 ms\u003c\/strong\u003e\n        \u003cspan\u003eReported usage during an active hold interaction.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__stat\"\u003e\n        \u003csmall\u003eDependencies\u003c\/small\u003e\n        \u003cstrong\u003e0\u003c\/strong\u003e\n        \u003cspan\u003eNo additional framework requirement listed.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__stat\"\u003e\n        \u003csmall\u003ePrice\u003c\/small\u003e\n        \u003cstrong\u003eFree\u003c\/strong\u003e\n        \u003cspan\u003eSource code is available publicly on GitHub.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       FEATURES\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        01 \/ Features\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          Everything a TextUI actually needs\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          No giant dependency chain. No overcomplicated setup. Just interactions that feel right.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__grid\"\u003e\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eHold · Progress · Complete\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eHold-to-Interact\u003c\/h3\u003e\n\n        \u003cp\u003e\n          A player does not just tap a button and magically complete an action.\n          Give interactions a configurable hold duration so opening, using or\n          confirming something feels deliberate instead of accidental.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eE · F · Multiple Inputs\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eMultiple Keys in One Prompt\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Need \u003cstrong\u003eE\u003c\/strong\u003e to open the garage and\n          \u003cstrong\u003eF\u003c\/strong\u003e to manage it? Show both actions in one clean prompt\n          instead of stacking several UI elements on top of each other.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eMapping · Controls\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eCustom Control Mapping\u003c\/h3\u003e\n\n        \u003cp\u003e\n          You are not locked into one hard-coded interaction key. Map controls\n          around the resource you are building and keep prompts consistent with\n          the rest of your server.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eEvents · Completion\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eTrigger on Hold Complete\u003c\/h3\u003e\n\n        \u003cp\u003e\n          When the player finishes holding the selected key, mz_textui can fire\n          the associated interaction event. Simple, readable and easy to reuse\n          across different scripts.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e05\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eOne Active Hold\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eClean Input Handling\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Multiple actions can be displayed at once, while only one key can be\n          actively held at a time. Less weird input overlap, less confusing\n          behavior for the player.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e06\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eExports · API · Reusable\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eDrop It Into Other Resources\u003c\/h3\u003e\n\n        \u003cp\u003e\n          The API is intentionally small. Show a prompt, hide it, check the hold\n          state or retrieve the current state without digging through a bloated\n          integration layer.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       EXAMPLES\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        02 \/ Usage\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          Readable enough to understand in seconds\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          The kind of API you can come back to three months later and still understand.\n        \u003c\/h2\u003e\n\n        \u003cp class=\"fml-mztextui__intro\"\u003e\n          You do not need twenty callbacks just to put\n          \u003ccode\u003e[E] Open Garage\u003c\/code\u003e on the player's screen.\n        \u003c\/p\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__code-grid\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__code-box\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__code-head\"\u003e\n          \u003cstrong\u003eSimple Interaction\u003c\/strong\u003e\n          \u003cspan\u003eLua\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003cpre\u003e\u003cspan class=\"gold\"\u003eexports.mz_textui:Show\u003c\/span\u003e({\n    text = \u003cspan class=\"green\"\u003e'[E] Open Garage'\u003c\/span\u003e,\n    hold = \u003cspan class=\"green\"\u003e1000\u003c\/span\u003e\n})\u003c\/pre\u003e\n\n      \u003c\/div\u003e\n\n\n      \u003cdiv class=\"fml-mztextui__code-box\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__code-head\"\u003e\n          \u003cstrong\u003eMultiple Keys\u003c\/strong\u003e\n          \u003cspan\u003eLua\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003cpre\u003e\u003cspan class=\"gold\"\u003eexports.mz_textui:Show\u003c\/span\u003e({\n    text = \u003cspan class=\"green\"\u003e'[E] Open Garage [F] Manage Garage'\u003c\/span\u003e,\n    hold = \u003cspan class=\"green\"\u003e1000\u003c\/span\u003e,\n\n    controls = {\n        {\n            key = \u003cspan class=\"green\"\u003e'E'\u003c\/span\u003e,\n            event = \u003cspan class=\"green\"\u003e'garage:open'\u003c\/span\u003e\n        },\n        {\n            key = \u003cspan class=\"green\"\u003e'F'\u003c\/span\u003e,\n            event = \u003cspan class=\"green\"\u003e'garage:manage'\u003c\/span\u003e\n        }\n    }\n})\u003c\/pre\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       EXPORTS\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        03 \/ API\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          Small API, useful everywhere\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          Five exports cover the stuff you will actually use.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__exports\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__export\"\u003e\n        \u003ccode\u003eexports.mz_textui:Show(options)\u003c\/code\u003e\n        \u003cspan\u003eDisplay a configured interaction prompt.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__export\"\u003e\n        \u003ccode\u003eexports.mz_textui:DrawText(text, hold, duration)\u003c\/code\u003e\n        \u003cspan\u003eDraw text using the supplied hold and duration values.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__export\"\u003e\n        \u003ccode\u003eexports.mz_textui:HideText()\u003c\/code\u003e\n        \u003cspan\u003eRemove the active TextUI from the screen.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__export\"\u003e\n        \u003ccode\u003eexports.mz_textui:IsHolding()\u003c\/code\u003e\n        \u003cspan\u003eCheck whether a hold interaction is currently active.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__export\"\u003e\n        \u003ccode\u003eexports.mz_textui:GetState()\u003c\/code\u003e\n        \u003cspan\u003eRead the current TextUI state when another resource needs it.\u003c\/span\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       EVENT\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        04 \/ Event\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          Hold completed\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          The player finishes the interaction. Your resource takes it from there.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__code-box\" style=\"margin-top:42px;\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__code-head\"\u003e\n        \u003cstrong\u003eHold Complete Event\u003c\/strong\u003e\n        \u003cspan\u003eLua\u003c\/span\u003e\n      \u003c\/div\u003e\n\n      \u003cpre\u003e\u003cspan class=\"gold\"\u003eAddEventHandler\u003c\/span\u003e(\u003cspan class=\"green\"\u003e'mz_textui:holdComplete'\u003c\/span\u003e, function(data)\n    print(data.key)\nend)\u003c\/pre\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       USE CASES\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        05 \/ Use It\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          One resource, a ridiculous number of places to use it\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          Garages are just the obvious example.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__grid\"\u003e\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e01\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eGarage · Vehicles\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eGarages\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Open the garage, store a vehicle or expose a second management action\n          without turning the interaction point into a wall of text.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e02\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eDoors · Properties\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eDoors \u0026amp; Properties\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Hold to unlock, enter or manage a property. It feels a lot nicer than\n          accidentally triggering the action because somebody brushed the key.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e03\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eJobs · Business\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eJob Interactions\u003c\/h3\u003e\n\n        \u003cp\u003e\n          Clock in, access storage or interact with workplace systems using a\n          consistent visual language across different jobs.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n\n      \u003carticle class=\"fml-mztextui__card\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__card-top\"\u003e\n          \u003cspan class=\"fml-mztextui__number\"\u003e04\u003c\/span\u003e\n          \u003cspan class=\"fml-mztextui__label\"\u003eNPC · World Interaction\u003c\/span\u003e\n        \u003c\/div\u003e\n\n        \u003ch3\u003eWorld Interaction\u003c\/h3\u003e\n\n        \u003cp\u003e\n          NPCs, elevators, storage, terminals, checkpoints — if something needs\n          a clean contextual prompt, mz_textui has a place there.\n        \u003c\/p\u003e\n\n      \u003c\/article\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       SCREENSHOTS\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        06 \/ Preview\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          See it in actual gameplay\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          Clean enough to stay visible. Quiet enough not to steal the whole screen.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__gallery\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__image\"\u003e\n        \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/4\/f\/4\/4\/4f4464cdfe1de45b7461f04eed2aa54e3299085a.jpeg\" alt=\"mz_textui FiveM gameplay TextUI screenshot\" loading=\"lazy\"\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__image\"\u003e\n        \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/f\/a\/3\/b\/fa3bc7e856a30f2656c7a820a1496ec304cbd124.jpeg\" alt=\"mz_textui hold interaction preview\" loading=\"lazy\"\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__image\"\u003e\n        \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/8\/6\/2\/1\/86216a72d9ec89b22b53db50f53097189fb45c17.jpeg\" alt=\"mz_textui multiple action prompt screenshot\" loading=\"lazy\"\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"fml-mztextui__image\"\u003e\n        \u003cimg src=\"https:\/\/forum-cfx-re.akamaized.net\/original\/5X\/9\/f\/c\/8\/9fc825635c84f12a9a37c82091f47f15f1f887fb.jpeg\" alt=\"mz_textui FiveM modern interaction UI\" loading=\"lazy\"\u003e\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       TECHNICAL\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__section\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__head\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__index\"\u003e\n        07 \/ Technical\n      \u003c\/div\u003e\n\n      \u003cdiv\u003e\n\n        \u003cdiv class=\"fml-mztextui__kicker\"\u003e\n          Tiny resource. Useful everywhere.\n        \u003c\/div\u003e\n\n        \u003ch2 class=\"fml-mztextui__section-title\"\u003e\n          No framework requirement and no subscription hiding behind the download button.\n        \u003c\/h2\u003e\n\n      \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__terminal\"\u003e\n\n      \u003cdiv class=\"fml-mztextui__terminal-head\"\u003e\n        \u003cstrong\u003e\/\/ MZ_TEXTUI\u003c\/strong\u003e\n        \u003cspan\u003eFiveM \/ UI \/ Open Source\u003c\/span\u003e\n      \u003c\/div\u003e\n\n\n      \u003cdl class=\"fml-mztextui__spec-grid\"\u003e\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003ePrice\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              Free\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              Publicly available through the developer's GitHub repository.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003eRequirements\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              None\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              No framework or external dependency is listed.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003eIdle Performance\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              0.00 ms\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              Reported resource-monitor usage while idle.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003eActive Hold\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              ~0.03 ms\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              Reported performance while an interaction key is being held.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003eCode Access\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              Yes\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              Source code is available from the GitHub repository.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003eApprox. Lines\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              ~400\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              Approximate line count supplied with the release information.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003eSubscription\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              No\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              No recurring subscription is required.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n\n        \u003cdiv class=\"fml-mztextui__spec\"\u003e\n          \u003cdt\u003eSupport\u003c\/dt\u003e\n\n          \u003cdd\u003e\n            \u003cspan class=\"fml-mztextui__spec-value\"\u003e\n              Available\n            \u003c\/span\u003e\n\n            \u003cspan class=\"fml-mztextui__spec-copy\"\u003e\n              Developer support is listed as available through MZ Studio.\n            \u003c\/span\u003e\n          \u003c\/dd\u003e\n        \u003c\/div\u003e\n\n      \u003c\/dl\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003c!-- =======================================================\n       CLOSING\n       ======================================================= --\u003e\n\n  \u003csection class=\"fml-mztextui__closing\"\u003e\n\n    \u003cdiv class=\"fml-mztextui__closing-label\"\u003e\n      mz_textui \/ MZ Studio \/ FiveM\n    \u003c\/div\u003e\n\n    \u003ch2\u003e\n      It is literally a TextUI. And somehow it can make your server feel way more expensive.\n    \u003c\/h2\u003e\n\n    \u003cp\u003e\n      That is the point. Players interact with doors, garages, jobs, NPCs and\n      world objects hundreds of times. When those tiny interactions feel clean,\n      responsive and consistent, the whole server feels better.\n      mz_textui gives you hold-to-interact, multiple keys, configurable timing,\n      custom mappings, completion events and a small reusable API — for free.\n    \u003c\/p\u003e\n\n\n    \u003cdiv class=\"fml-mztextui__closing-actions\"\u003e\n\n      \u003ca class=\"fml-mztextui__button fml-mztextui__button--gold\" href=\"https:\/\/github.com\/kmc233\/mz_textui\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        Download Source\n        \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n      \u003c\/a\u003e\n\n      \u003ca class=\"fml-mztextui__button\" href=\"https:\/\/muziscripts.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        MZ Studio\n        \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n      \u003c\/a\u003e\n\n      \u003ca class=\"fml-mztextui__button\" href=\"https:\/\/discord.com\/invite\/Yp8ukQvsJv\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        Discord Support\n        \u003cspan aria-hidden=\"true\"\u003e↗\u003c\/span\u003e\n      \u003c\/a\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/section\u003e\n\n\n  \u003cdiv class=\"fml-mztextui__final\"\u003e\n    Less UI noise.\n    \u003cem\u003eMore satisfying interactions.\u003c\/em\u003e\n  \u003c\/div\u003e\n\n\u003c\/article\u003e","brand":"Muziscripts","offers":[{"title":"Default Title","offer_id":45771217666157,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2072\/3053\/files\/4f4464cdfe1de45b7461f04eed2aa54e3299085a.jpg?v=1788461448","url":"https:\/\/fivem-lab.com\/products\/cfx-modern-textui-inspired","provider":"Fivem-Lab","version":"1.0","type":"link"}