Add limel-3d-hover-effect-glow as a @private internal component & use it

[Kiarokh]

A @private component that is required for making
a 3D glow effect on some components. This
can be replaced by some internal elements and
styles, to further simplify things.

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3330/

[Kiarokh]

the good thing with this component is that:

1. we can add more CSS props for it (like the color of the highlight/glow).
2. it can be more easily used in other repos by us, if needed. It's private, but still available.
3. together with mixins, which are also available via importing the mixins.scss from node modules folder, we can achieve the same effect way more easily this way

[adrianschmidt]

The problem with putting the styling here is that the component will be rendered before the styling applies. It won't be visible then, since it's unstyled, but it will have a default opacity of 1. Then the styling applies, which set's the opacity to 0.1. But there's also been a transition applied to the opacity, so there will be this little "lightning flash" when the component is loaded.

[adrianschmidt]

lightning-flash.mov

[Kiarokh]

😄 On my slow machine things load in a totally different way and jump around so much until the page is completely loaded, so that I can't even see this visual effect that you screen recorded.

Bu I think I can fix it. I'll adda. fixup

[Kiarokh]

A note for future:

There are several ways of mitigating the effect that you mentioned.

The best one would be using the @property rule to animate the x and y, and opacity values of the radial gradient. I tried it, but couldn't really make it work. I don't exactly know why. Due to lack of time, I decided to keep a copy of the code here, and do it in a simpler but dirtier way.

What I did was like below…
In 3d-hover-effect-glow.scss tried to transition the CSS custom properties, combining them with @property rule.

:host(limel-3d-hover-effect-glow) {
    @property --limel-3d-hover-effect-glow-opacity {
        syntax: '<number>';
        inherits: true;
        initial-value: 0.1;
    }

    @property --limel-3d-hover-effect-glow-position-x {
        syntax: '<percentage>';
        inherits: true;
        initial-value: 50%;
    }

    @property --limel-3d-hover-effect-glow-position-y {
        syntax: '<percentage>';
        inherits: true;
        initial-value: -20%;
    }

    transition-property: --limel-3d-hover-effect-glow-opacity,
        --limel-3d-hover-effect-glow-position-x,
        --limel-3d-hover-effect-glow-position-y;
    transition-timing-function: ease-out; // Must be the same as the 3D Element itself
    transition-duration: 0.8s; // Must be the same as the 3D Element itself

    display: block;
    pointer-events: none;

    position: absolute;
    inset: 0;

    background-image: radial-gradient(
        circle at var(--limel-3d-hover-effect-glow-position-x, 50%)
            var(--limel-3d-hover-effect-glow-position-y, -20%),
        rgb(var(--color-white), var(--limel-3d-hover-effect-glow-opacity, 0.1)),
        rgb(var(--color-white), 0)
    );

    mix-blend-mode: plus-lighter;
}

and then in the mixins.scss, I would do:

@mixin the-3d-element {
    
   // …

    &:hover {
        limel-3d-hover-effect-glow {
            transition-duration: 0s;
            --limel-3d-hover-effect-glow-opacity: 0.5;
            @media (prefers-reduced-motion) {
                --limel-3d-hover-effect-glow-opacity: 0.2;
            }
        }
    }
}

and of course the JS in 3d-tilt-hover-effect.ts was updated too:

        const glowPositionX = `
    ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px
`;
        const glowPositionY = `
    ${center.y * GLOW_POSITION_MULTIPLIER + the3dElementBounds.height / CENTER_DIVISOR}px
`;
        element.style.setProperty(
            '--limel-3d-hover-effect-glow-position-x',
            glowPositionX,
        );
        element.style.setProperty(
            '--limel-3d-hover-effect-glow-position-y',
            glowPositionY,
        );
    };

and

    const handleMouseLeave = () => {
        document.removeEventListener('mousemove', tiltCallback);
        element.style.removeProperty('--limel-3d-hover-effect-rotate3d');
        element.style.removeProperty('--limel-3d-hover-effect-glow-position-x');
        element.style.removeProperty('--limel-3d-hover-effect-glow-position-y');
    };

Why would this way be better?

Because animating the position and opacity of the gradient itself (the glow) would result in a nicer and smoother animation, when switching between hover and default states, as compared to animating the opacity of the whole thing. Today, only very trained eyes of "animators" would notice that the location of the gradient jumps, when switching between the hover and default (due to the opacity and 3D transitions). However, the more natural these transitions are, the better of course. That is why I wanted to animate them instead.

[adrianschmidt]

Yeah, I've noticed there's a bit of a jump too.

But, can we put this PR on ice until cooldown? (Or if you can convince someone appropriate that I should spend cycle time on this, then I'm happy to help out and review further 😅)

[Kiarokh]

Yes, all is done on this PR for now. And this can go to cooldown.

But now I don't know which cooldown board 😄, since we have now several cooldown boards 🙈