Nick.Rosenloecher/Wabenhain
1
1 Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cart): keep the cart icon unchanged while it glows

Browse Source 
The landing glow was a larger, filled basket with a thicker stroke and
a blurred halo, so the icon looked bigger during the effect. The glow
is now an exact copy of the icon (same size, same stroke width, no
fill, no scaling) that only changes colour to honey for a moment.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed 2026-09-30 23:57:52 +02:00
1 parent e19827d6af
commit 55ae867f68
1 file changed
+7 -9
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cart-landing-effect.tsx
+7 -9
View File
@@ -19,9 +19,10 @@ const DRIP_DELAY_S = 0.3;
* unten ab — als waere der Honig durch den Korb gesickert. * unten ab — als waere der Honig durch den Korb gesickert.
* *
* Liegt als Overlay im Warenkorb-Knopf (relative) und faengt keine Klicks. * Liegt als Overlay im Warenkorb-Knopf (relative) und faengt keine Klicks.
* Das Leuchten ist eine eigene, honigfarbene Kopie des Korbs, deren Deckkraft * Das Leuchten ist eine deckungsgleiche, honigfarbene Kopie des Korbs (gleiche
* blinkt — so stimmt die Farbe im hellen wie im dunklen Farbschema, ohne die * Groesse, gleiche Strichstaerke, keine Fuellung), deren Deckkraft blinkt.
* Strichfarbe des eigentlichen Symbols anzufassen. Bei reduzierter Bewegung * Das Symbol selbst bleibt unveraendert; nur seine Farbe wechselt kurz — im
* hellen wie im dunklen Farbschema. Bei reduzierter Bewegung
* bleibt nur ein einzelnes, ruhiges Aufleuchten ohne Tropfen. * bleibt nur ein einzelnes, ruhiges Aufleuchten ohne Tropfen.
*/ */
export function CartLandingEffect() { export function CartLandingEffect() {
@@ -42,7 +43,6 @@ export function CartLandingEffect() {
void glowControls.start({ void glowControls.start({
opacity: [0, 1, 0.35, 1, 0], opacity: [0, 1, 0.35, 1, 0],
scale: [0.9, 1.08, 1, 1.05, 1],
transition: { duration: 0.75, ease: "easeInOut", times: [0, 0.2, 0.45, 0.65, 1] }, transition: { duration: 0.75, ease: "easeInOut", times: [0, 0.2, 0.45, 0.65, 1] },
}); });
void dripControls.start({ void dripControls.start({
@@ -70,18 +70,16 @@ export function CartLandingEffect() {
animate={glowControls} animate={glowControls}
className="absolute inset-0 flex items-center justify-center" className="absolute inset-0 flex items-center justify-center"
> >
{/* Warmer Schein hinter dem Korb. */}
<span className="absolute inset-1 rounded-full bg-honey/30 blur-md" />
<svg <svg
className="relative text-honey drop-shadow-[0_0_4px_var(--color-honey)]" className="text-honey drop-shadow-[0_0_3px_var(--color-honey)]"
width="20" width="20"
height="20" height="20"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
strokeWidth="1.8" strokeWidth="1.5"
> >
<path d="M6 6h15l-1.5 9h-12z" fill="var(--color-honey-pale)" fillOpacity="0.55" /> <path d="M6 6h15l-1.5 9h-12z" />
<path d="M6 6 5 3H2" /> <path d="M6 6 5 3H2" />
<circle cx="9" cy="20" r="1" /> <circle cx="9" cy="20" r="1" />
<circle cx="18" cy="20" r="1" /> <circle cx="18" cy="20" r="1" />