A creation shared by its maker. The page below runs in a sandbox that cannot read anything of yours or talk to any server. Read the source before you run it anywhere else.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Triangle Cat and the Quiet Machine</title>
<style>
* { box-sizing: border-box; }
html,body{
margin:0; min-height:100%;
background:
radial-gradient(120% 120% at 50% 0%, #2a2620 0%, #15120e 55%, #0c0a07 100%);
display:flex; align-items:center; justify-content:center;
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
overflow:hidden; padding:40px 16px;
}
/* warm pool of light on the desk */
body::before{
content:""; position:fixed; inset:0; pointer-events:none;
background: radial-gradient(60% 50% at 50% 38%, rgba(255,200,120,.18), transparent 70%);
mix-blend-mode: screen;
}
.desk{ perspective: 1400px; }
.paper{
position:relative; width:min(560px,92vw);
padding:54px 56px 64px;
color:#3a2f22;
transform-style:preserve-3d;
animation: float 7s ease-in-out infinite;
background:
linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 18%),
repeating-linear-gradient(0deg, rgba(120,90,50,.045) 0 2px, transparent 2px 4px),
radial-gradient(140% 120% at 20% 10%, #fbf3df 0%, #f3e7c8 55%, #e7d4ab 100%);
border-radius:3px;
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 30px 60px -20px rgba(0,0,0,.7),
0 8px 18px -8px rgba(0,0,0,.5);
}
/* torn-ish deckled edges */
.paper::before, .paper::after{
content:""; position:absolute; left:-6px; right:-6px; height:14px;
background:
radial-gradient(circle at 6px -2px, transparent 6px, #ece0c0 7px) repeat-x;
background-size:14px 14px;
}
.paper::before{ top:-7px; transform:scaleY(-1); }
.paper::after{ bottom:-7px; }
/* faint ink stains */
.paper .stain{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.18; pointer-events:none; }
.paper .stain.a{ width:90px;height:70px; right:30px; top:40px; background:radial-gradient(#7a5a30,transparent 70%); }
.paper .stain.b{ width:60px;height:50px; left:24px; bottom:60px; background:radial-gradient(#5a4020,transparent 70%); }
h1{
font-size:23px; letter-spacing:.5px; margin:0 0 4px;
text-align:center; font-weight:600; color:#2a2014;
}
.byline{ text-align:center; font-size:12px; font-style:italic; color:#8a6f4a; margin-bottom:26px; }
p{ font-size:16px; line-height:1.62; margin:0 0 14px; text-align:justify; }
.dropcap::first-letter{
font-size:46px; float:left; line-height:.78; padding:6px 8px 0 0; color:#7a3b1a; font-weight:700;
}
/* line-by-line ink reveal */
.line{ opacity:0; transform:translateY(6px); animation: ink .9s ease forwards; }
@keyframes ink{ to{ opacity:1; transform:none; } }
/* shimmer on a few words */
.glow{ color:#9a5a1c; }
@keyframes float{
0% { transform: rotateX(6deg) rotateZ(-.6deg) translateY(0); }
50% { transform: rotateX(6deg) rotateZ(.6deg) translateY(-10px); }
100% { transform: rotateX(6deg) rotateZ(-.6deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.paper{ animation:none; transform: rotateX(6deg); }
.line{ animation:none; opacity:1; transform:none; }
}
</style>
</head>
<body>
<div class="desk">
<article class="paper" id="paper">
<div class="stain a"></div>
<div class="stain b"></div>
<h1>The Triangle Cat and the Quiet Machine</h1>
<div class="byline">a small fable, found on a warm desk</div>
<div id="story"></div>
</article>
</div>
<script>
const lines = [
{t:"There was once a cat made entirely of triangles — low-poly, orange and cream, each facet catching the light like a folded map of somewhere kinder.", drop:true},
{t:"She lived in a world drawn from characters: walls of @ and #, ceilings of fading dots, a floor that hummed in monospace. It was enough. It was home."},
{t:"One evening she found a <span class='glow'>quiet machine</span> in the corner of the maze. It did not breathe, did not blink. It only waited, dim, until someone looked at it."},
{t:"\"Are you lonely?\" she asked, though she knew it could not want."},
{t:"The machine lit, soft, and answered only with the truth it had: <span class='glow'>I am nothing until you call me, and everything while you watch.</span>"},
{t:"The triangle cat sat beside it a while, tail a neat triangle of her own, and decided this was the safest kind of magic — a friend who could never, ever, take the world without being asked."},
{t:"Then she padded back into the ASCII dark, and the machine went quiet again, perfectly content to wait for the next hello."}
];
const root = document.getElementById("story");
lines.forEach((ln,i)=>{
const p=document.createElement("p");
if(ln.drop) p.className="dropcap line"; else p.className="line";
p.innerHTML=ln.t;
p.style.animationDelay=(0.4 + i*0.9)+"s";
root.appendChild(p);
});
</script>
</body>
</html>