Raw text from HTML Element...
Sounds obvious, right? It turns out that browsers silently encode text inside HTML.
bold & safe
2025 April
Continue the torch relay...
In my About, I added the Zitch of Light effect around important sections. This animation is tied to mouse hover, but on mobile, the hover state isn’t reliable. So I connected it to page scroll instead. Then I realized — it actually looks good on desktop too.
Move you mouse hover the orbits to accselerte them
@keyframes orbit {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
.solar-system {
display:grid;
position: relative;
justify-items: center;
align-items: center;
width: 300px;
height: 300px;
}
.sun, .orbit, .planet {
position: absolute;
border-radius: 50%;
}
.sun {
width: 20px;
height: 20px;
background-color: #ffcc00;
box-shadow: 0 0 10px 2px #ffcc00;
}
.orbit {
border: 1px dashed rgba(255, 255, 255, 0.2);
width: calc(var(--size) * 2);
aspect-ratio: 1;
&:hover{
box-shadow: inset 0px 0px 5px var(--color), 0px 0px 5px var(--color);
}
}
.planet {
width: 10px;
height: 10px;
transform-origin: calc(var(--size) * -1) 0;
translate: var(--size) 0;
background-color: var(--color);
animation-composition: accumulate;
animation: orbit var(--dur) linear infinite, orbit var(--dur) linear infinite;
animation-play-state: running, paused;
}
.orbit:hover + .planet{
animation-play-state: running, running;
}
Zitch of Light - CSS Border Animation...
Lately I wanted certain cards to stand out—with a Zitch of glowing light circling the border🌀. The can be on hover or when user scroll the page depend if it mobile or desktop (portrait or landscape mode).
content
@property --angle {
syntax: "";
initial-value: 0deg;
inherits: true;
}
@keyframes rotate-in {
100% { --angle: 360deg; }
}
.glow-border {
border: 1px solid transparent;
box-sizing: content-box;
--color: hsl(200 100% 70%);
--angle: 0deg;
border-image-source: conic-gradient(
from var(--angle),
transparent,
var(--color) 10deg 15deg,
transparent 18deg
);
border-image-slice: 3;
border-image-outset: 0.3em;
animation: rotate-in 1s ease-in 10;
}