whatisgithub

What is pelle-d-umore?

29-cu/pelle-d-umore — explained in plain English

Analysis updated 2026-05-18

42CSSAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

A dependency-free CSS and JS toolkit that lets an AI chat persona change inline text styling and full-screen mood skins based on hidden tags in its replies.

Mindmap

mindmap
  root((Pelle d'Umore))
    What it does
      Inline text effects
      Full screen mood skins
      Hidden mood tags
    Tech stack
      CSS
      JavaScript
    Use cases
      Expressive AI chat UI
      Companion app persona
      Prompt driven styling
    Audience
      Frontend developers
    License
      CC BY attribution

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add glowing, whispering, or glitching text effects to AI chat messages based on tags the model writes.

USE CASE 2

Give an AI companion app a full-screen mood skin like a rage state or a moonlit night theme.

USE CASE 3

Teach a custom LLM persona to express emotion visually using a ready-made prompt block.

USE CASE 4

Build a more expressive chat UI without adding any external dependencies.

What is it built with?

CSSJavaScriptHTML

How does it compare?

29-cu/pelle-d-umoreleonxlnx/gemini-extensionruanyf/google-calendar-lite
Stars424143
LanguageCSSCSSCSS
Last pushed2026-03-162013-10-25
MaintenanceMaintainedDormant
Setup difficultyeasyeasymoderate
Complexity2/52/52/5
Audiencedevelopergeneralgeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires wiring a hidden mood tag from your AI's system prompt through your own streaming and chat rendering pipeline.

You can use, share, and adapt this freely for any purpose, including commercial use, as long as you give credit to the creator.

So what is it?

Pelle d'Umore is a small front-end toolkit that lets an AI chat assistant change how a whole chat interface looks and feels, not just what it says. Most chat interfaces show every message in the same flat style no matter what emotion the words carry. This project gives the AI persona a way to reach past the plain text and affect the room around it, so a phrase can glow, the whole screen can shift to a corrupted red mood, or the background can open into a starry night sky. It works through two kinds of effects. Inline text effects are tags the AI writes directly into its message, like glow, whisper, shake, or glitch, which get turned into styled spans of text. Full-screen mood skins are a separate, bigger switch: the AI includes a hidden tag like mood rage or mood moonlight in its reply, and the whole page re-skins under a single data attribute, changing colors, adding effects like static or a starfield, until the mood is turned off again. The flow is: the model writes a hidden mood tag in its reply, the server strips that tag out before showing the text to the user and sends a small separate event describing the mood, the client-side code applies that mood by setting an attribute on the page body, and a CSS file swaps the visual theme based on that attribute. Removing the attribute instantly restores the user's own normal theme with nothing left behind. The project ships as four dependency-free files (two CSS files, a JavaScript module, and a small script), plus a demo page and a suggested prompt block to paste into an AI system prompt to teach it the available tags. It also respects a user's reduced-motion accessibility setting, turning off animation while keeping color changes, and pauses effects when the browser tab is hidden. This project came out of a private AI companion app and was released as a separate, reusable tool for anyone building a chat interface who wants their AI persona to have a more expressive presence than plain text alone.

Copy-paste prompts

Prompt 1
Help me integrate Pelle d'Umore's fx.css and mood.js into my existing AI chat interface.
Prompt 2
Show me how to strip the hidden mood tag on the server and forward a mood event to the client.
Prompt 3
Write a system prompt block that teaches my model to use Pelle d'Umore's inline text effect tags.
Prompt 4
Explain how the moonlight and rage mood skins differ and how to add a new custom mood.

Frequently asked questions

What is pelle-d-umore?

A dependency-free CSS and JS toolkit that lets an AI chat persona change inline text styling and full-screen mood skins based on hidden tags in its replies.

What language is pelle-d-umore written in?

Mainly CSS. The stack also includes CSS, JavaScript, HTML.

What license does pelle-d-umore use?

You can use, share, and adapt this freely for any purpose, including commercial use, as long as you give credit to the creator.

How hard is pelle-d-umore to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is pelle-d-umore for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.