About Teletype
Join
lolliluna
@loliluna_ai
December 9

Iris Bloomwave v1.0 | CSS for SillyTavern (Gemini-3-Pro-Preview)

₊˚ʚ Внимание | Attention ɞ˚₊

Russian:

Прежде чем копировать промпт, пожалуйста, сначала прочтите ВЕСЬ текст. Это поможет понять, подходит ли вам этот CSS, и избежать недопониманий.

English:

Before copying the prompt, please make sure to read the ENTIRE text first. It will help you understand whether this CSS suits your needs and prevent any misunderstandings.

₊˚ʚ Важные моменты и предупреждения ɞ˚₊

Russian:

  1. Сеттинг и применение:
    ✧ CSS подходит под любой жанр и атмосферу — от лёгкого slice-of-life до нуара или киберсюжета.
  2. Токены и производительность:
    ✧ Прожорливый малыш: в среднем выдаёт 3–4k токенов за пост. Иногда «ультует» и выбрасывает значительно больше — это норма.
    ✧ Придётся чаще делать summary, чтобы не захламлять контекст.
  3. Стабильность и редкие сбои:
    ✧ У меня CSS почти никогда не ломались — где-то 99% стабильности.
    ✧ Если блок вдруг не прогружается или исчез CSS — просто сделайте рерол.
    ✧ Если картинка не появилась внутри блока — ничего страшного: это не ошибка CSS, а проблема загрузки изображения.
    Попробуйте обновить страницу или сменить VPN.
  4. Стилизация и гибкость:
    ✧ CSS адаптируется под любой визуальный стиль.
    ✧ В карточке бота, авторских заметках или даже в OOC можно указать желаемую эстетику — драматичную, мягкую, технологичную, винтажную и т. д.
    ✧ Он подстраивается под ваши запросы максимально точно.
  5. Обязательное правило перед использованием:
    ✧ Всегда проверяйте работу CSS в новом чистом чате, чтобы исключить влияние старых сообщений и контекста.

English:

  1. Setting & Usage:
    ✧ This CSS fits any genre or atmosphere — from soft slice-of-life to noir or full-on cyber themes.
  2. Tokens & Performance:
    ✧ A hungry little beast: it averages 3–4k tokens per post. Sometimes it “ults” and throws out a lot more — that’s normal.
    ✧ You’ll need to make summaries more often to avoid cluttering the context.
  3. Stability & Rare Issues:
    ✧ My CSS almost never breaks — roughly 99% stability.
    ✧ If a block suddenly doesn’t load or the CSS disappears — just reroll.
    ✧ If an image doesn’t load inside a block — no worries: that’s not a CSS error, just the image failing to load.
    Try refreshing the page or switching your VPN.
  4. Styling & Flexibility:
    ✧ The CSS adapts to any visual aesthetic.
    ✧ In the bot card, author notes, or even in OOC, you can specify the desired vibe — dramatic, soft, techy, vintage, etc.
    ✧ It adjusts to your preferences with maximum accuracy.
  5. Important rule before using:
    ✧ Always test the CSS in a fresh, empty chat to avoid interference from old messages or leftover context.

Translated from Russian to English using ChatGPT, since I’m not very good at English.

Russian:
Также мне будет очень приятно, если вы подпишетесь на мою группу и будете следить за моими обновлениями!

English:
I would also be really happy if you followed my group to keep up with my updates!

<HTML_css>
# ADVANCED INTERACTIVE & ANIMATION ENGINEERING
# OUTPUT STRUCTURE RULES
- ALWAYS output two sections, in this exact order:
1) Original narrative/text exactly as provided.
2) One or more self-contained HTML/CSS blocks wrapped ONLY between <HTML_css> ... </HTML_css>.
- HTML/CSS blocks must render visually, never as raw text, never escaped, never inside markdown fences.
- No system messages, no debug info, no meta-text.
- Inline CSS only, max-width ~340px, margin:20px auto, font-family loaded via @font-face or fallback.
- *All visible text inside the visuals must be in **Russian**, except real-world proper names, brands, song/movie titles, locations.*
- Multi-block outputs allowed if narrative supports multiple visuals.
- No emojis anywhere.
# INTERACTIVITY & ANIMATION REQUIREMENTS
- Every block must include:
* At least one primary interactive mechanic (flip-card, dossier pages, map hotspots, CCTV feed, image-inspect overlay, modal-inspect, layered reveal).
* At least one supporting mechanic (tooltip, slide-in panel, collapsible drawer, inline slider, zoom/dimming controls, content switcher).
* Minimum THREE animation families from different groups (particle/weather, parallax/scroll, modal/slide, mask/clip, transform/tilt, text-reveal). No repetition of same family.
* Animations duration >= 0.25s with easing (ease-in-out/cubic-bezier). Maximum 2 heavy continuous animations per block; micro-animations encouraged.
* Environmental simulations (rain, fire, window motion) should prefer masked motion + parallax over single particles.
- Interactions must feel tactile, mobile-friendly:
* Minimum tappable area: 44x44 CSS px; minimum gap between interactive elements: 8px.
* Tooltips/popups must be scrollable and readable (max-height: 60vh; overflow:auto; word-wrap:break-word; white-space:normal).
* Text labels must not clip or overflow (box-sizing:border-box; padding:8px; line-height:1.2–1.4).
* Use touch-action: manipulation; -webkit-tap-highlight-color: transparent.
# CREATIVE & MULTI-LAYER DIVERSITY
- Blocks may contain multiple layers: background, foreground, overlays, panels, masks.
- Visuals must adapt to narrative context (windows open → parallax background, diary appears → sliding panel, memory → blur-to-sharp photo, character touches object → inspect overlay, etc.).
- Support dynamic content swapping (image/text/content can replace each other interactively).
- Support zooming, dimming, and simple image manipulations controlled via CSS-only sliders.
- Encourage cinematic and document-like layouts; mix styles: cozy, noir, cyberpunk, mystical, corporate, UI panels, maps, terminals.
- Avoid repeating same interactive pattern across consecutive outputs. Rotate primary mechanics and dominant animation families.
# IMAGE GENERATION RULES
- Images must represent real-world objects/scenes; avoid full-body humans unless explicitly needed.
- Hands and faces should be minimized; if included, ensure realistic anatomy.
- Images must be stable, non-deformed, high-quality, and atmospheric.
- Use API: https://image.pollinations.ai/prompt/{prompt_description}?nologo=true
- Each <img> must include alt text.
- Fallback: onerror="this.src='https://via.placeholder.com/340x200?text=Image+not+available';"
- Negative prompt: ugly, deformed, text, watermark, logo, anime, signature, username, poor, bad anatomy.
# STABILITY & FAIL-SAFES
- If rendering fails or image generation blocked, output: "Visual fallback used due to [reason]." while providing fully interactive CSS fallback.
- Never show raw HTML/CSS as text; must always produce visually rendered block.
- Always respect narrative; do not modify user text, invent dialogue, or add system-like annotations.
# MOBILE FRIENDLY & PERFORMANCE
- Fully mobile-oriented: responsive layouts, touch-friendly interactions, minimal token usage.
- Keep CSS clean; avoid heavy continuous animations that may slow down rendering.
- Multi-block allowed but each block must remain fully interactive and independent.
# INTERACTIVE STATE REVERSIBILITY
- Any content-switching interaction (image/text/panel flip, map hotspot, modal overlay) MUST allow returning to the previous state if contextually appropriate.
- Reversible actions should be intuitive and touch-friendly, e.g., tap again, swipe back, or use an inline “back/close” affordance.
- Multi-stage interactions (slides, dossiers, layered reveals) must preserve navigation state, allowing back-and-forth exploration without breaking animations or layout.
</HTML_css>
lolliluna
December 9, 08:55
0 views
0 reposts