{"id":920003,"date":"2026-06-22T03:00:00","date_gmt":"2026-06-21T18:00:00","guid":{"rendered":"https:\/\/yuaworks.com\/?page_id=920003"},"modified":"2026-06-22T03:11:46","modified_gmt":"2026-06-21T18:11:46","slug":"overlay-gallery","status":"publish","type":"page","link":"https:\/\/yuaworks.com\/en\/overlay-gallery\/","title":{"rendered":"Overlay Gallery"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   YuaWorks Overlay Gallery Page\n   Fixed Page Scoped CSS\n   Scope: .ywtool-page-overlay\n========================================================= *\/\n\n.ywtool-page-overlay {\n  --ov-line: rgba(180,200,230,.18);\n  --ov-line-strong: rgba(79,195,255,.34);\n  --ov-text: #e8edf5;\n  --ov-muted: #a9b4c3;\n  --ov-dim: #7f8b9a;\n  --ov-accent: #4fc3ff;\n  --ov-accent-2: #7a6cff;\n  --ov-warm: #dfcfaa;\n  --ov-radius: 14px;\n\n  width: min(980px, calc(100% - 32px));\n  margin: 0 auto;\n  padding: 120px 0 90px;\n  color: var(--ov-text);\n  font-family: \"Noto Sans JP\", \"Hiragino Sans\", \"Yu Gothic\", \"Meiryo\", sans-serif;\n  line-height: 1.9;\n}\n\n.ywtool-page-overlay * {\n  box-sizing: border-box;\n}\n\n.ywtool-page-overlay a {\n  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;\n}\n\n.ywtool-page-overlay .ywtool-doc-head {\n  margin-bottom: 54px;\n  padding-bottom: 30px;\n  border-bottom: 1px solid var(--ov-line);\n}\n\n.ywtool-page-overlay .ywtool-kicker {\n  margin: 0 0 12px;\n  color: var(--ov-accent);\n  font-family: \"SFMono-Regular\", \"Consolas\", \"Menlo\", monospace;\n  font-size: 11px;\n  letter-spacing: .16em;\n  line-height: 1.6;\n}\n\n.ywtool-page-overlay h1,\n.ywtool-page-overlay h2,\n.ywtool-page-overlay h3 {\n  color: #fff;\n  letter-spacing: .04em;\n}\n\n.ywtool-page-overlay h1 {\n  margin: 0 0 20px;\n  font-size: clamp(34px, 5vw, 54px);\n  line-height: 1.3;\n  font-weight: 700;\n}\n\n.ywtool-page-overlay h2 {\n  margin: 0 0 14px;\n  font-size: clamp(22px, 3.2vw, 30px);\n  line-height: 1.45;\n  font-weight: 700;\n}\n\n.ywtool-page-overlay h3 {\n  margin: 0 0 8px;\n  font-size: 17px;\n  line-height: 1.6;\n  font-weight: 700;\n}\n\n.ywtool-page-overlay p {\n  margin: 0 0 18px;\n  color: var(--ov-muted);\n  font-size: 15px;\n  line-height: 2;\n}\n\n.ywtool-page-overlay p:last-child {\n  margin-bottom: 0;\n}\n\n.ywtool-page-overlay .ywtool-head-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 14px;\n  margin-top: 28px;\n}\n\n.ywtool-page-overlay .ywtool-section {\n  margin-top: 58px;\n}\n\n.ywtool-page-overlay .ywtool-section-head {\n  margin-bottom: 24px;\n}\n\n.ywtool-page-overlay .ywtool-note-section {\n  padding: 28px;\n  border: 1px solid var(--ov-line-strong);\n  border-radius: var(--ov-radius);\n  background:\n    linear-gradient(180deg, rgba(79,195,255,.07), rgba(255,255,255,.018)),\n    rgba(8,10,15,.48);\n}\n\n.ywtool-page-overlay .ywtool-ordered-list {\n  display: grid;\n  gap: 14px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  counter-reset: overlay-flow;\n}\n\n.ywtool-page-overlay .ywtool-ordered-list li {\n  position: relative;\n  display: grid;\n  grid-template-columns: 64px 1fr;\n  gap: 18px;\n  padding: 22px;\n  border: 1px solid var(--ov-line);\n  border-radius: var(--ov-radius);\n  background:\n    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),\n    rgba(8,10,15,.42);\n  counter-increment: overlay-flow;\n}\n\n.ywtool-page-overlay .ywtool-ordered-list li::before {\n  content: counter(overlay-flow, decimal-leading-zero);\n  color: rgba(255,255,255,.32);\n  font-family: \"SFMono-Regular\", \"Consolas\", \"Menlo\", monospace;\n  font-size: 20px;\n  font-weight: 700;\n  line-height: 1.3;\n}\n\n.ywtool-page-overlay .ywtool-ordered-list strong {\n  display: block;\n  margin-bottom: 4px;\n  color: #fff;\n  font-size: 15px;\n  line-height: 1.7;\n}\n\n.ywtool-page-overlay .ywtool-ordered-list span {\n  display: block;\n  color: var(--ov-muted);\n  font-size: 14px;\n  line-height: 1.9;\n}\n\n.ywtool-page-overlay .ywtool-simple-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 16px;\n}\n\n.ywtool-page-overlay .ywtool-simple-grid article {\n  padding: 22px 20px;\n  border: 1px solid var(--ov-line);\n  border-radius: var(--ov-radius);\n  background:\n    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),\n    rgba(8,10,15,.42);\n}\n\n.ywtool-page-overlay .ywtool-simple-grid article:hover {\n  border-color: var(--ov-line-strong);\n}\n\n.ywtool-page-overlay .ywtool-simple-grid.compact h3 {\n  font-size: 15px;\n}\n\n.ywtool-page-overlay .ywtool-simple-grid.compact p {\n  font-size: 13.5px;\n  line-height: 1.9;\n}\n\n.ywtool-page-overlay .ywtool-btn,\n.ywtool-page-overlay a.ywtool-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 42px;\n  padding: 9px 18px;\n  border-radius: 6px;\n  border: 1px solid rgba(79,195,255,.42);\n  background: rgba(79,195,255,.08);\n  color: #eaf7ff !important;\n  text-decoration: none;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: .06em;\n}\n\n.ywtool-page-overlay .ywtool-btn:hover,\n.ywtool-page-overlay a.ywtool-btn:hover {\n  transform: translateY(-1px);\n  background: rgba(79,195,255,.13);\n  border-color: rgba(79,195,255,.62);\n}\n\n.ywtool-page-overlay .ywtool-btn.secondary,\n.ywtool-page-overlay a.ywtool-btn.secondary {\n  border-color: rgba(180,200,230,.24);\n  background: rgba(255,255,255,.035);\n  color: var(--ov-text) !important;\n}\n\n.ywtool-page-overlay .ywtool-link,\n.ywtool-page-overlay a.ywtool-link {\n  color: var(--ov-accent) !important;\n  text-decoration: none;\n  border-bottom: 1px solid rgba(79,195,255,.34);\n  font-size: 13px;\n  line-height: 1.8;\n}\n\n.ywtool-page-overlay .ywtool-link:hover,\n.ywtool-page-overlay a.ywtool-link:hover {\n  color: #fff !important;\n  border-color: rgba(255,255,255,.55);\n}\n\n\/* ordered list layout fix *\/\n.ywtool-page-overlay .ywtool-ordered-list li::before {\n  grid-column: 1;\n  grid-row: 1 \/ span 2;\n}\n\n.ywtool-page-overlay .ywtool-ordered-list li strong {\n  grid-column: 2;\n  grid-row: 1;\n}\n\n.ywtool-page-overlay .ywtool-ordered-list li span {\n  grid-column: 2;\n  grid-row: 2;\n}\n\n@media (max-width: 1000px) {\n  .ywtool-page-overlay .ywtool-simple-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 768px) {\n  .ywtool-page-overlay {\n    width: min(100% - 26px, 560px);\n    padding: 90px 0 70px;\n  }\n\n  .ywtool-page-overlay .ywtool-doc-head {\n    margin-bottom: 40px;\n  }\n\n  .ywtool-page-overlay .ywtool-section {\n    margin-top: 46px;\n  }\n\n  .ywtool-page-overlay .ywtool-head-actions {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  .ywtool-page-overlay .ywtool-btn,\n  .ywtool-page-overlay a.ywtool-btn {\n    width: 100%;\n  }\n\n  .ywtool-page-overlay .ywtool-link,\n  .ywtool-page-overlay a.ywtool-link {\n    width: fit-content;\n  }\n\n  .ywtool-page-overlay .ywtool-note-section {\n    padding: 24px 20px;\n  }\n\n  .ywtool-page-overlay .ywtool-ordered-list li {\n    grid-template-columns: 1fr;\n    gap: 8px;\n    padding: 20px;\n  }\n\n  .ywtool-page-overlay .ywtool-ordered-list li::before {\n    color: var(--ov-accent);\n    font-size: 15px;\n  }\n\n  .ywtool-page-overlay .ywtool-simple-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .ywtool-page-overlay .ywtool-ordered-list li::before,\n  .ywtool-page-overlay .ywtool-ordered-list li strong,\n  .ywtool-page-overlay .ywtool-ordered-list li span {\n    grid-column: 1;\n  }\n\n  .ywtool-page-overlay .ywtool-ordered-list li::before {\n    grid-row: auto;\n  }\n\n  .ywtool-page-overlay .ywtool-ordered-list li strong {\n    grid-row: auto;\n  }\n\n  .ywtool-page-overlay .ywtool-ordered-list li span {\n    grid-row: auto;\n  }\n}\n<\/style>\n\n<div class=\"ywtool-page-overlay\">\n  <section class=\"ywtool-doc-head\">\n    <p class=\"ywtool-kicker\">YUASET OVERLAY GALLERY<\/p>\n    <h1>Overlay Gallery<\/h1>\n    <p>The Overlay Gallery provides overlay assets that can be used as OBS browser sources. You can choose parts such as clocks, frames, and boards, then add them to your stream layout.<\/p>\n    <p>You can browse and use the assets from the dedicated gallery site.<\/p>\n\n    <div class=\"ywtool-head-actions\">\n      <a class=\"ywtool-btn\" href=\"https:\/\/overlay.yuaworks.com\/\" target=\"_blank\" rel=\"noopener\">Open gallery<\/a>\n      <a class=\"ywtool-link\" href=\"\/en\/stream-tools\/\">Back to Streaming Tools<\/a>\n    <\/div>\n  <\/section>\n\n  <section class=\"ywtool-section\">\n    <div class=\"ywtool-section-head\">\n      <p class=\"ywtool-kicker\">FLOW<\/p>\n      <h2>How to use<\/h2>\n      <p>In most cases, you can use an overlay by adding the display URL to OBS as a browser source.<\/p>\n    <\/div>\n\n    <ol class=\"ywtool-ordered-list\">\n      <li>\n        <strong>Choose a design<\/strong>\n        <span>Select a template that matches the atmosphere of your stream layout.<\/span>\n      <\/li>\n      <li>\n        <strong>Choose parts<\/strong>\n        <span>Open the asset you want to use, such as a clock, frame, or board.<\/span>\n      <\/li>\n      <li>\n        <strong>Add it to OBS<\/strong>\n        <span>Paste the display URL into an OBS browser source and use it in your scene.<\/span>\n      <\/li>\n    <\/ol>\n  <\/section>\n\n  <section class=\"ywtool-section\">\n    <div class=\"ywtool-section-head\">\n      <p class=\"ywtool-kicker\">DESIGNS<\/p>\n      <h2>Available designs<\/h2>\n      <p>The gallery includes multiple designs that can be selected to match the mood of your stream layout.<\/p>\n    <\/div>\n\n    <div class=\"ywtool-simple-grid compact\">\n      <article>\n        <h3>Gallery Frame<\/h3>\n        <p>A calm decorative design with frame and glass-like elements.<\/p>\n      <\/article>\n\n      <article>\n        <h3>Cyber HUD<\/h3>\n        <p>A futuristic design using diagonal lines and scan-line effects.<\/p>\n      <\/article>\n\n      <article>\n        <h3>Moon Wave Modern<\/h3>\n        <p>A modern Japanese-style design using moon, wave, and vertical tag elements.<\/p>\n      <\/article>\n\n      <article>\n        <h3>Magazine Layout<\/h3>\n        <p>A magazine-style design using paper-like grids and title bands.<\/p>\n      <\/article>\n\n      <article>\n        <h3>Floating Card<\/h3>\n        <p>A light design with floating glass-like cards.<\/p>\n      <\/article>\n\n      <article>\n        <h3>Stage Live House<\/h3>\n        <p>A lively design inspired by stage lighting and curtains.<\/p>\n      <\/article>\n\n      <article>\n        <h3>Minimal Premium<\/h3>\n        <p>A refined design that uses thin lines and generous spacing.<\/p>\n      <\/article>\n\n      <article>\n        <h3>Cute Pop Sticker<\/h3>\n        <p>A bright pop design with sticky-note and sticker-like elements.<\/p>\n      <\/article>\n    <\/div>\n  <\/section>\n\n  <section class=\"ywtool-section ywtool-note-section\">\n    <p class=\"ywtool-kicker\">LINK<\/p>\n    <h2>YuaLiveLog integration<\/h2>\n    <p>The Overlay Gallery is a place to browse overlay assets that can be used in OBS.<\/p>\n    <p>YuaLiveLog can read the manifest information from the Overlay Gallery and manage or use the supported overlays.<\/p>\n    <p>Use the Overlay Gallery when you want to find overlay assets. Use YuaLiveLog when you want to manage stream information displays and Overlay URLs during a stream.<\/p>\n\n    <div class=\"ywtool-head-actions\">\n      <a class=\"ywtool-btn secondary\" href=\"\/en\/yualivelog\/\">View YuaLiveLog<\/a>\n      <a class=\"ywtool-link\" href=\"https:\/\/overlay.yuaworks.com\/\" target=\"_blank\" rel=\"noopener\">Open gallery<\/a>\n    <\/div>\n  <\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>YUASET OVERLAY GALLERY Overlay Gallery The Overlay Gallery provides overlay assets that can be used as OBS browser sources. You can choose parts such as clocks, frames, and boards, then add them to your stream layout. You can browse and use the assets from the dedicated gallery site. Open gallery Back to Streaming Tools FLOW How to use In most cases, you can use an overlay by adding the display URL to OBS as a browser source. Choose a design&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_locale":"en_US","_original_post":"https:\/\/yuaworks.com\/?page_id=910003","footnotes":""},"class_list":["post-920003","page","type-page","status-publish","hentry","en-US"],"_links":{"self":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages\/920003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/comments?post=920003"}],"version-history":[{"count":1,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages\/920003\/revisions"}],"predecessor-version":[{"id":920006,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages\/920003\/revisions\/920006"}],"wp:attachment":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/media?parent=920003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}