Fade the glimmer out at two corners, and cap it at half

Featurekamo-login
Shipped
September 5, 2026 at 7:24 PM UTC
Author
Kamo
Commit
6810799

The sheen now dies completely at the top-right and bottom-left corners and peaks, at half opacity, over the top-left and bottom-right. Each revolution reads as two episodes that rise and fall across a corner rather than one continuous lap, and the corner it dies on is the one the ribbon occupies, so the two never compete. Implemented as a static mask on the wrappers rather than a keyframed opacity, because the angle at which a corner sits depends on the pane's aspect ratio: 58 degrees off vertical at 1440x900, 24 at 390x844. Timed opacity would need retiming per viewport, and would drift the moment the window was resized. `to bottom right` does that geometry itself — CSS places the two corners the gradient line does not run through, here the top-right and the bottom-left, at exactly the 50% stop whatever the shape of the box, so a transparent stop at 50% is transparent at both by construction. Being static, it also costs nothing per frame; the mask is applied once and the spin underneath it is still the only thing that moves. The rim needed a nested element to carry it. Its ring already occupies .kamo-glimmer-edge's own mask property, and stacking the envelope on as a third layer would mean a three-way mask-composite list — whose failure mode, if a browser drops the list as invalid, is every layer compositing with `add` and the gradient filling the entire pane. A nested element multiplies the two masks instead and degrades to nothing worse than a missing fade. Measured by sampling the gap pixel just outside each corner at the moment the core reaches it, against the same pixel with the glimmer removed. Luma delta: top-left +24.0, bottom-right +24.0, top-right 0.0, bottom-left 0.0 — half of the +48.9 the full-strength envelope gave, and gone entirely at the other two.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing