risum 모듈 — RISU modules[] — 기능 확장
👍 46 · 조회 1947 · 2026-04-13
귀하의 브라우저는 html5 video를 지원하지 않습니다. 윤슬이 전용 상태창이었던 그 상태창 예쁘게 나왔던 거라 범용으로 공유해도 좋을 것 같았어 호버시 말풍선이 나오고 날짜 시간, 장소, 속마음으로 구성되어있음 배포는 검정 말풍선 디자인인데 흰색 말풍선처럼 간단하게라도 디자인 개조하면 다양하게 연출할 수 있으니 예쁘게 개조해보는 것도 좋아 모듈로 임포트하면 버전은 세가지인데 고정 -> 양쪽 이미지 고정 시간 -> 좌측 이미지가 시간에 따라 바뀜, 우측 이미지는 랜덤 랜덤 -> 좌측 우측 모두 랜덤 랜덤 이미지는 기본 4개로 설정해두었는데 Lua 코드 수정하면 늘릴 수 있어 추가 에셋에 넣어둘 이미지 이름 리스트 참고로 좌측 이미지는 가로, 우측 이미지는 세로 기준으로 제작했어 좌측 이미지 우측 이미지 고정 bg char 시간 dawn, morning, afternoon, evening, night, midnight char1, char2, char3, char4 랜덤 bg1, bg2, bg3, bg4 char1, char2, char3, char4 다운로드 고맙습니다! 이모지 알림 상태창: 3종 재공유 | 11/06 업데이트 시간별 배경이미지 변경 모듈 - 개조판 내가 쓰는 GOAT 에셋 디스플레이 정규식 공유 CC BY-NC-SA 4.0 국제 라이선스 적용 이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다. 이 저작물은 아카라이브 커뮤니티 - AI 채팅 채널을 위해 공개되었으며, AI 채팅 채널 외 타 채널 혹은 커뮤니티에 공유, 배포 등으로 이용할 때에는 반드시 원 저작자의 이름과 출처를 명시해야 합니다. 상업적 용도의 경우 어떠한 이유로도 이용할 수 없습니다. 리믹스, 변형, 2차적 저작물을 작성하고 그 결과물을 공유할 경우에는 원 저작물과 동일한 조건의 CCL을 적용하여야 합니다.
{
"name": "📖 만화 스타일 상태창",
"description": "",
"id": "ae9d7450-ebdc-4c1f-b6c4-59dc2c4561d3",
"assets": [],
"hideIcon": false,
"lorebook": [
{
"key": "",
"comment": "상태창 지시문",
"content": "@@depth 0\n### Status Interface\n- Always place this format at the very end of the output.\n [ Date: YYYY/MM/DD (day of the week) | Time: Current time | | Location: Current location | {{char}}'s Internal monologue ]\n Example:\n [ Date: 2026/01/01 (Sun) | Time: 11:00 PM | Location: Bedroom | I should sleep now... ]\n\n- Location: Briefly in words, not sentences.\n- Internal monologue: {{char}}'s private thought—single line only. Deadpan observation with subtle emotional weight underneath.",
"mode": "normal",
"insertorder": 100,
"alwaysActive": false,
"secondkey": "",
"selective": false,
"useRegex": false,
"bookVersion": 2
}
],
"regex": [
{
"comment": "📖 고정 / 만화 스타일 상태창",
"in": "\\[ Date: (.*?) \\| Time: (.*?) \\| Location: (.*?) \\| (.*?) \\]",
"out": "<head>\n<style>\n.cartoon-bg {\n position: relative;\n width: 36em;\n height: 18em;\n margin: auto;\n overflow: hidden;\n border: 1.2px solid #575759;\n z-index: 0;\n}\n\n/* 배경 이미지 + 그라데이션 오버레이 */\n.cartoon-bg::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background:\nlinear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.0) 0%,\n rgba(0, 0, 0, 0.0) 55%,\n rgba(0, 0, 0, 0.35) 75%,\n rgba(0, 0, 0, 0.7) 100%\n),\n\n url('https://i.postimg.cc/HnC0VKn6/IMG-5083.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n opacity: 0.7;\n z-index: 1;\n pointer-events: none;\n}\n\n/* 공통 이미지 */\n.cartoon-bg .img {\n position: absolute;\n inset: 0;\n background-repeat: no-repeat;\n pointer-events: none;\n z-index: 0;\n}\n\n.left {\n clip-path: polygon(0 0, 69% 0, 60% 100%, 0 100%);\n background-size: 100%;\n background-position: center 35%;\n}\n\n.right {\n clip-path: polygon(69% 0, 100% 0, 100% 100%, 60% 100%);\n background-size: 50%;\n background-position: 115% 40%;\n background-repeat: no-repeat;\n}\n\n/* 가운데 사선 */\n.cartoon-bg::after {\n content: \"\";\n position: absolute;\n top: -8%;\n left: 64%;\n width: 1.5px;\n height: 120%;\n background: #575759;\n transform: rotate(10.7deg);\n pointer-events: none;\n z-index: 2;\n}\n\n/* 텍스트 박스 공통 */\n.text-box {\n position: absolute;\n background: #000;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 0.8em;\n line-height: 1.3;\n\n padding: 1em 1em;\n border-radius: 2px;\n box-shadow: 0 0 0 1px #575759;\n z-index: 3;\n}\n\n/* 첫 번째 텍스트 */\n.t1 {\n width: 9em;\n height: 10em;\n top: 2em;\n left: 1.5em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.t1 * {\n font-size: inherit;\n}\n\n/* 두 번째 텍스트 */\n.t2 {\n width: 6.5em;\n min-height: 7em;\n height: auto;\n top: 10em;\n left: 7em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.t3 {\n width: 9em;\n min-height: 10em;\n height: auto;\n\n bottom: 1.25em;\n right: 135px;\n\n padding: 1em;\n\n background: #000;\n color: #fff;\n\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.4s ease, transform 0.5s ease;\n\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n\n/* hover 애니메이션 */\n.cartoon-bg:hover .t1 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n}\n\n.cartoon-bg:hover .t2 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n transition-delay: 0.2s;\n}\n\n.cartoon-bg:hover .t3 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n transition-delay: 0.6s;\n}\n\n/* 디지털 텍스트 */\n.digital-text {\n position: absolute;\n top: 0.375em;\n left: 1.25em;\n z-index: 3;\n font-family: 'Courier New', monospace;\n font-size: 1em;\n color: #ffffff;\n text-shadow:\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000,\n 0 0 4px rgba(255,255,255,0.4);\n opacity: 1;\n transition: opacity 0.2s ease;\n pointer-events: none;\n}\n\n.cartoon-bg:hover .digital-text {\n opacity: 0;\n}\n\n/* 반응형 */\n@media (max-width: 768px) {\n .cartoon-bg {\n width: 23em;\n height: 12em;\n }\n\n/* 첫 번째 텍스트 */\n.t1 {\n font-size: 0.6em;\n width: 7.5em;\n height: 8em;\n top: 1.2em;\n left: 1.2em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.t1 * {\n font-size: inherit;\n}\n\n.t2 * {\n font-size: inherit;\n}\n\n.t3 * {\n font-size: inherit;\n}\n\n/* 두 번째 텍스트 */\n.t2 {\n font-size: 0.5em;\n width: 6em;\n min-height: 6.5em;\n height: auto;\n top: 9em;\n left: 7em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n word-break: break-word;\n overflow-wrap: break-word;\n\n}\n\n .t3 {\n font-size: 0.6em;\n width: 8.5em;\n min-height: 9em;\n height: auto;\n\n bottom: 1.5em;\n right: 78px;\n\n padding: 1em;\n}\n.digital-text {\n font-size: 0.8em;\n}\n\n}\n</style>\n</head>\n<body>\n<div class=\"cartoon-bg diagonal\" tabindex=\"0\"> \n <div class=\"img left\"\n style=\"background-image: url({{raw::bg}});\"></div>\n\n<div class=\"img right\" style=\"background-image: url({{raw::char}});\"></div> \n\n<!-- 좌측 상단 디지털 텍스트 (hover 전용) -->\n<div class=\"digital-text\">$1 $2\n</div>\n\n<!-- 좌측 상단 텍스트 박스 (hover 시 등장) -->\n<div class=\"text-box t1\">\n <div>$1 $2</div>\n</div>\n\n\n <!-- 좌측 하단 텍스트 -->\n <div class=\"text-box t2\">\n $3\n </div>\n\n <!-- 우측 텍스트 -->\n <div class=\"text-box t3\">\n $4\n </div>\n</div>\n</body>",
"type": "disabled",
"ableFlag": false
},
{
"comment": "📖 시간 / 만화 스타일 상태창",
"in": "\\[ Date: (.*?) \\| Time: (.*?) \\| Location: (.*?) \\| (.*?) \\]",
"out": "<head>\n<style>\n.cartoon-bg {\n position: relative;\n width: 36em;\n height: 18em;\n margin: auto;\n overflow: hidden;\n border: 1.2px solid #575759;\n z-index: 0;\n}\n\n/* 배경 이미지 + 그라데이션 오버레이 */\n.cartoon-bg::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background:\nlinear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.0) 0%,\n rgba(0, 0, 0, 0.0) 55%,\n rgba(0, 0, 0, 0.35) 75%,\n rgba(0, 0, 0, 0.7) 100%\n),\n\n url('https://i.postimg.cc/HnC0VKn6/IMG-5083.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n opacity: 0.7;\n z-index: 1;\n pointer-events: none;\n}\n\n/* 공통 이미지 */\n.cartoon-bg .img {\n position: absolute;\n inset: 0;\n background-repeat: no-repeat;\n pointer-events: none;\n z-index: 0;\n}\n\n.left {\n clip-path: polygon(0 0, 69% 0, 60% 100%, 0 100%);\n background-size: 100%;\n background-position: center 35%;\n}\n\n.right {\n clip-path: polygon(69% 0, 100% 0, 100% 100%, 60% 100%);\n background-size: 50%;\n background-position: 115% 40%;\n background-repeat: no-repeat;\n}\n\n/* 가운데 사선 */\n.cartoon-bg::after {\n content: \"\";\n position: absolute;\n top: -8%;\n left: 64%;\n width: 1.5px;\n height: 120%;\n background: #575759;\n transform: rotate(10.7deg);\n pointer-events: none;\n z-index: 2;\n}\n\n/* 텍스트 박스 공통 */\n.text-box {\n position: absolute;\n background: #000;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 0.8em;\n line-height: 1.3;\n\n padding: 1em 1em;\n border-radius: 2px;\n box-shadow: 0 0 0 1px #575759;\n z-index: 3;\n}\n\n/* 첫 번째 텍스트 */\n.t1 {\n width: 9em;\n height: 10em;\n top: 2em;\n left: 1.5em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.t1 * {\n font-size: inherit;\n}\n\n/* 두 번째 텍스트 */\n.t2 {\n width: 6.5em;\n min-height: 7em;\n height: auto;\n top: 10em;\n left: 7em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.t3 {\n width: 9em;\n min-height: 10em;\n height: auto;\n\n bottom: 1.25em;\n right: 135px;\n\n padding: 1em;\n\n background: #000;\n color: #fff;\n\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.4s ease, transform 0.5s ease;\n\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n\n/* hover 애니메이션 */\n.cartoon-bg:hover .t1 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n}\n\n.cartoon-bg:hover .t2 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n transition-delay: 0.2s;\n}\n\n.cartoon-bg:hover .t3 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n transition-delay: 0.6s;\n}\n\n/* 디지털 텍스트 */\n.digital-text {\n position: absolute;\n top: 0.375em;\n left: 1.25em;\n z-index: 3;\n font-family: 'Courier New', monospace;\n font-size: 1em;\n color: #ffffff;\n text-shadow:\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000,\n 0 0 4px rgba(255,255,255,0.4);\n opacity: 1;\n transition: opacity 0.2s ease;\n pointer-events: none;\n}\n\n.cartoon-bg:hover .digital-text {\n opacity: 0;\n}\n\n/* 반응형 */\n@media (max-width: 768px) {\n .cartoon-bg {\n width: 23em;\n height: 12em;\n }\n\n/* 첫 번째 텍스트 */\n.t1 {\n font-size: 0.6em;\n width: 7.5em;\n height: 8em;\n top: 1.2em;\n left: 1.2em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.t1 * {\n font-size: inherit;\n}\n\n.t2 * {\n font-size: inherit;\n}\n\n.t3 * {\n font-size: inherit;\n}\n\n/* 두 번째 텍스트 */\n.t2 {\n font-size: 0.5em;\n width: 6em;\n min-height: 6.5em;\n height: auto;\n top: 9em;\n left: 7em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n word-break: break-word;\n overflow-wrap: break-word;\n\n}\n\n .t3 {\n font-size: 0.6em;\n width: 8.5em;\n min-height: 9em;\n height: auto;\n\n bottom: 1.5em;\n right: 78px;\n\n padding: 1em;\n}\n.digital-text {\n font-size: 0.8em;\n}\n\n}\n</style>\n</head>\n<body>\n<div class=\"cartoon-bg diagonal\" tabindex=\"0\"> \n <div class=\"img left\"\n style=\"background-image: url({{raw::{{getvar::cv_statusbg}}}});\"></div>\n\n<div class=\"img right\" style=\"background-image: url({{raw::{{getvar::cv_char}}}});\"></div> \n\n<!-- 좌측 상단 디지털 텍스트 (hover 전용) -->\n<div class=\"digital-text\">$1 $2\n</div>\n\n<!-- 좌측 상단 텍스트 박스 (hover 시 등장) -->\n<div class=\"text-box t1\">\n <div>$1 $2</div>\n</div>\n\n\n <!-- 좌측 하단 텍스트 -->\n <div class=\"text-box t2\">\n $3\n </div>\n\n <!-- 우측 텍스트 -->\n <div class=\"text-box t3\">\n $4\n </div>\n</div>\n</body>",
"type": "disabled",
"ableFlag": true,
"flag": "g<move_top>"
},
{
"comment": "📖 시간 / Lua ",
"in": "",
"out": "-- ======================\n-- 랜덤 시드 (1회)\n-- ======================\nmath.randomseed(os.time())\n-- ======================\n-- 시간대 판별\n-- ======================\nfunction getTimeSlot(hour)\n if hour >= 4 and hour < 6 then\n return \"dawn\"\n elseif hour >= 6 and hour < 12 then\n return \"morning\"\n elseif hour >= 12 and hour < 17 then\n return \"afternoon\"\n elseif hour >= 17 and hour < 19 then\n return \"evening\"\n elseif hour >= 19 and hour < 22 then\n return \"night\"\n else\n return \"midnight\"\n end\nend\n-- ======================\n-- 채팅 텍스트에서 시간 추출\n-- ======================\nfunction extractTimeFromText(text)\n if not text then return nil end\n local timeSection = string.match(text, \"Time%s*:%s*([^\\n\\r]+)\")\n if timeSection then\n local hourStr = string.match(timeSection, \"(%d+):%d+\")\n if hourStr then\n local hour = tonumber(hourStr)\n if hour then\n if string.find(timeSection, \"PM\") or string.find(timeSection, \"오후\") then\n if hour ~= 12 then hour = hour + 12 end\n elseif (string.find(timeSection, \"AM\") or string.find(timeSection, \"오전\")) and hour == 12 then\n hour = 0\n end\n return getTimeSlot(hour)\n end\n end\n end\n return nil\nend\n-- ======================\n-- 캐릭터 랜덤 풀 (char1 ~ char4)\n-- ======================\nlocal charImages = {}\nfor i = 1, 4 do\n table.insert(charImages, \"char\" .. i)\nend\nfunction getRandomChar()\n return charImages[math.random(#charImages)]\nend\n-- ======================\n-- 메인 훅\n-- ======================\nfunction onOutput(triggerId)\n local chatLength = getChatLength(triggerId)\n if chatLength == 0 then return end\n local chat = getFullChat(triggerId)\n local lastMessage = chat[chatLength]\n if not lastMessage then return end\n local outputText = lastMessage.data\n if type(outputText) == \"table\" and outputText.content then\n outputText = outputText.content\n end\n \n -- 이미지 1: 시간대 배경\n local timeSlot = extractTimeFromText(outputText)\n if timeSlot then\n setChatVar(triggerId, \"cv_statusbg\", timeSlot)\n end\n \n -- 이미지 2: 랜덤 캐릭터\n setChatVar(triggerId, \"cv_char\", getRandomChar())\nend",
"type": "disabled",
"ableFlag": false
},
{
"comment": "📖 랜덤 / 만화 스타일 상태창",
"in": "\\[ Date: (.*?) \\| Time: (.*?) \\| Location: (.*?) \\| (.*?) \\]",
"out": "<head>\n<style>\n.cartoon-bg {\n position: relative;\n width: 36em;\n height: 18em;\n margin: auto;\n overflow: hidden;\n border: 1.2px solid #575759;\n z-index: 0;\n}\n\n/* 배경 이미지 + 그라데이션 오버레이 */\n.cartoon-bg::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background:\nlinear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.0) 0%,\n rgba(0, 0, 0, 0.0) 55%,\n rgba(0, 0, 0, 0.35) 75%,\n rgba(0, 0, 0, 0.7) 100%\n),\n\n url('https://i.postimg.cc/HnC0VKn6/IMG-5083.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n opacity: 0.7;\n z-index: 1;\n pointer-events: none;\n}\n\n/* 공통 이미지 */\n.cartoon-bg .img {\n position: absolute;\n inset: 0;\n background-repeat: no-repeat;\n pointer-events: none;\n z-index: 0;\n}\n\n.left {\n clip-path: polygon(0 0, 69% 0, 60% 100%, 0 100%);\n background-size: 100%;\n background-position: center 35%;\n}\n\n.right {\n clip-path: polygon(69% 0, 100% 0, 100% 100%, 60% 100%);\n background-size: 50%;\n background-position: 115% 40%;\n background-repeat: no-repeat;\n}\n\n/* 가운데 사선 */\n.cartoon-bg::after {\n content: \"\";\n position: absolute;\n top: -8%;\n left: 64%;\n width: 1.5px;\n height: 120%;\n background: #575759;\n transform: rotate(10.7deg);\n pointer-events: none;\n z-index: 2;\n}\n\n/* 텍스트 박스 공통 */\n.text-box {\n position: absolute;\n background: #000;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 0.8em;\n line-height: 1.3;\n\n padding: 1em 1em;\n border-radius: 2px;\n box-shadow: 0 0 0 1px #575759;\n z-index: 3;\n}\n\n/* 첫 번째 텍스트 */\n.t1 {\n width: 9em;\n height: 10em;\n top: 2em;\n left: 1.5em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.t1 * {\n font-size: inherit;\n}\n\n/* 두 번째 텍스트 */\n.t2 {\n width: 6.5em;\n min-height: 7em;\n height: auto;\n top: 10em;\n left: 7em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.t3 {\n width: 9em;\n min-height: 10em;\n height: auto;\n\n bottom: 1.25em;\n right: 135px;\n\n padding: 1em;\n\n background: #000;\n color: #fff;\n\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.4s ease, transform 0.5s ease;\n\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n\n/* hover 애니메이션 */\n.cartoon-bg:hover .t1 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n}\n\n.cartoon-bg:hover .t2 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n transition-delay: 0.2s;\n}\n\n.cartoon-bg:hover .t3 {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n transition-delay: 0.6s;\n}\n\n/* 디지털 텍스트 */\n.digital-text {\n position: absolute;\n top: 0.375em;\n left: 1.25em;\n z-index: 3;\n font-family: 'Courier New', monospace;\n font-size: 1em;\n color: #ffffff;\n text-shadow:\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000,\n 0 0 4px rgba(255,255,255,0.4);\n opacity: 1;\n transition: opacity 0.2s ease;\n pointer-events: none;\n}\n\n.cartoon-bg:hover .digital-text {\n opacity: 0;\n}\n\n/* 반응형 */\n@media (max-width: 768px) {\n .cartoon-bg {\n width: 23em;\n height: 12em;\n }\n\n/* 첫 번째 텍스트 */\n.t1 {\n font-size: 0.6em;\n width: 7.5em;\n height: 8em;\n top: 1.2em;\n left: 1.2em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.t1 * {\n font-size: inherit;\n}\n\n.t2 * {\n font-size: inherit;\n}\n\n.t3 * {\n font-size: inherit;\n}\n\n/* 두 번째 텍스트 */\n.t2 {\n font-size: 0.5em;\n width: 6em;\n min-height: 6.5em;\n height: auto;\n top: 9em;\n left: 7em;\n opacity: 0;\n pointer-events: none;\n transform: translateY(6px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n word-break: break-word;\n overflow-wrap: break-word;\n\n}\n\n .t3 {\n font-size: 0.6em;\n width: 8.5em;\n min-height: 9em;\n height: auto;\n\n bottom: 1.5em;\n right: 78px;\n\n padding: 1em;\n}\n.digital-text {\n font-size: 0.8em;\n}\n\n}\n</style>\n</head>\n<body>\n<div class=\"cartoon-bg diagonal\" tabindex=\"0\"> \n <div class=\"img left\"\n style=\"background-image: url({{raw::{{getvar::cv_bg}}}});\"></div>\n\n<div class=\"img right\" style=\"background-image: url({{raw::{{getvar::cv_char}}}});\"></div> \n\n<!-- 좌측 상단 디지털 텍스트 (hover 전용) -->\n<div class=\"digital-text\">$1 $2\n</div>\n\n<!-- 좌측 상단 텍스트 박스 (hover 시 등장) -->\n<div class=\"text-box t1\">\n <div>$1 $2</div>\n</div>\n\n\n <!-- 좌측 하단 텍스트 -->\n <div class=\"text-box t2\">\n $3\n </div>\n\n <!-- 우측 텍스트 -->\n <div class=\"text-box t3\">\n $4\n </div>\n</div>\n</body>",
"type": "disabled",
"ableFlag": false
},
{
"comment": "📖 랜덤 / Lua",
"in": "",
"out": "-- ======================\n-- 랜덤 시드 (1회)\n-- ======================\nmath.randomseed(os.time())\n-- ======================\n-- 캐릭터 랜덤 풀 (char1 ~ char4)\n-- ======================\nlocal charImages = {}\nfor i = 1, 4 do\n table.insert(charImages, \"char\" .. i)\nend\nfunction getRandomChar()\n return charImages[math.random(#charImages)]\nend\n-- ======================\n-- 배경 랜덤 풀 (bg1 ~ bg4)\n-- ======================\nlocal bgImages = {}\nfor i = 1, 4 do\n table.insert(bgImages, \"bg\" .. i)\nend\nfunction getRandomBg()\n return bgImages[math.random(#bgImages)]\nend\n-- ======================\n-- 메인 훅\n-- ======================\nfunction onOutput(triggerId)\n local chatLength = getChatLength(triggerId)\n if chatLength == 0 then return end\n local chat = getFullChat(triggerId)\n local lastMessage = chat[chatLength]\n if not lastMessage then return end\n local outputText = lastMessage.data\n if type(outputText) == \"table\" and outputText.content then\n outputText = outputText.content\n end\n \n -- 이미지 1: 랜덤 배경\n setChatVar(triggerId, \"cv_bg\", getRandomBg())\n \n -- 이미지 2: 랜덤 캐릭터\n setChatVar(triggerId, \"cv_char\", getRandomChar())\nend",
"type": "disabled",
"ableFlag": false
}
]
}