[React App] How to reset the profile effect on each pass?

[svale88]

Select Topic Area

Question

Body

Hello, I'm new to coding, so ignore the complexity of my code 😊

It just seems to me (the profile effect needs to be reset when switching between colors), that is, there are profile effects for each color, but the transitions do not work properly as seen in the video, what I want is to reset the profile effect in each transition as in the other video.

I couldn't do it, I tried so hard :/ I'm new and I need help. How can we do it like in the video? I would also appreciate if you could edit and give me the relevant field.

Mine: My Video
Other: I want it to be

Thanks in advance to those who help.

ShopApp.js

import React, { useRef, useEffect, useState, Fragment } from 'react';
import shopData from './shopData.json';
import profileEffects from './profileEffect2.json';

import './shop/shop.css';

const transparentGif = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

const ProfileEffectLayer = ({ layerConfig, time, isActive, accessibilityLabel, others }) => {
  const baseStyle = {
    top: layerConfig.position?.y || 0,
    left: layerConfig.position?.x || 0,
  };

  const fullStyle = {
    ...baseStyle,
    zIndex: layerConfig.zIndex,
    position: 'absolute',
    width: layerConfig.width,
    height: layerConfig.height,
  };

  return (
    <img
      src={isActive ? layerConfig.src : transparentGif}
      className={isActive ? 'effect__01370' : ''}
      alt={accessibilityLabel}
      style={others ? fullStyle : baseStyle}
    />
  );
};

const ProfileEffects = ({ config, isHovered, others = true }) => {
  const [time, setTime] = useState(0);
  const animationRef = useRef();
  const startTimeRef = useRef(0);
  const [selectedSourceIndex, setSelectedSourceIndex] = useState(null);

  useEffect(() => {
    if (isHovered) {
      if (selectedSourceIndex === null) {
        const introEffect = config.effects.find(e => e.start === 0 && e.randomizedSources?.length > 0);
        if (introEffect) {
          const randIndex = Math.floor(Math.random() * introEffect.randomizedSources.length);
          setSelectedSourceIndex(randIndex);
        }
      }

      startTimeRef.current = 0;
      const animate = (currentTime) => {
        if (!startTimeRef.current) startTimeRef.current = currentTime;
        const elapsed = currentTime - startTimeRef.current;
        setTime(elapsed);
        animationRef.current = requestAnimationFrame(animate);
      };
      animationRef.current = requestAnimationFrame(animate);
    } else {
      cancelAnimationFrame(animationRef.current);
      setTime(0);
      setSelectedSourceIndex(null);
    }

    return () => cancelAnimationFrame(animationRef.current);
  }, [isHovered]);

  const isLayerActive = (layer) => {
    if (!isHovered) return false;
    if (time < layer.start) return false;
    if (!layer.loop && time > layer.start + layer.duration) return false;

    if (layer.loop && layer.loopDelay > 0) {
      const loopDuration = layer.duration + layer.loopDelay;
      const loopTime = (time - layer.start) % loopDuration;
      return loopTime <= layer.duration;
    }

    return true;
  };

  const getLayerSrc = (layer) => {
    if (!layer.randomizedSources || selectedSourceIndex === null) {
      return layer.src;
    }

    if (layer.start === 0) {
      return layer.randomizedSources[selectedSourceIndex].src;
    }

    if (layer.start > 0) {
      if (layer.randomizedSources[selectedSourceIndex]) {
        return layer.randomizedSources[selectedSourceIndex].src;
      }
      return layer.src;
    }

    return layer.src;
  };

  return (
    <div className="inner__01370">
      {config.effects.map((layer, index) => (
        <ProfileEffectLayer
          key={`${layer.src}-${index}`}
          layerConfig={{ ...layer, src: getLayerSrc(layer) }}
          time={time}
          isActive={isLayerActive(layer)}
          accessibilityLabel={config.accessibilityLabel}
          others={others}
        />
      ))}
    </div>
  );
};

const ShopCard = ({ effect, forceHover = false }) => {
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {
    setIsHovered(forceHover);
  }, [forceHover]);

  return (
    <div 
      onMouseEnter={() => !forceHover && setIsHovered(true)}
      onMouseLeave={() => !forceHover && setIsHovered(false)}
    >
      <div className="profileEffects__01370">
        {!isHovered && (
          <img
            className="effect__01370"
            alt={effect.alt}
            src={effect.thumbnail}
            style={{
              top: 0,
              left: 0,
              position: 'absolute',
              width: '100%',
              height: '100%',
              zIndex: 99,
            }}
          />
        )}
        <ProfileEffects config={effect.config} isHovered={isHovered} others={false} />
      </div>
    </div>
  );
};

const BundleCard = ({ item, idx, isHovered }) => {
  const effect = profileEffects[item.banner];

  return (
    <>
      {effect && (
        <ShopCard
          key={effect.id}
          effect={{
            ...effect,
            alt: item.decoration_description,
            config: effect.config,
          }}
          forceHover={isHovered}
        />
      )}
    </>
  );
};

const BannerCard = ({ item, idx }) => {
  const [isCardHovered, setIsCardHovered] = useState(false);
  const [selectedColorIndex, setSelectedColorIndex] = useState(0);
  const [hoveredColorIndex, setHoveredColorIndex] = useState(null);
  const [isChangingColor, setIsChangingColor] = useState(false);

  const effectsColors = item.effects_colors || [];
  const defaultEffect = {
    banner: item.banner,
    color: '#FFFFFF',
    name: 'Default',
    discountedPrice: item.discountedPrice || '$0.00'
  };

  const displayEffectIndex = isCardHovered && hoveredColorIndex !== null ? hoveredColorIndex : selectedColorIndex;
  const selectedEffect = effectsColors[displayEffectIndex] || defaultEffect;
  const effect = profileEffects[selectedEffect.banner];

  const handleColorSelect = (index) => {
    if (index === selectedColorIndex) return;
    setIsChangingColor(true);
    setTimeout(() => {
      setSelectedColorIndex(index);
      setIsChangingColor(false);
    }, 0);
  };

  const handleColorHover = (index) => {
    setHoveredColorIndex(index);
  };

  const handleMouseLeave = () => {
    setHoveredColorIndex(null);
  };

  const variantsPanelClass = `variantsPanel__6f029 ${
    isCardHovered ? '' : 'minimalState__6f029'
  } alternativeColor__6f029`;

  return (
    <div 
      key={idx} 
      className={`shopCardDark_c3d04b shopCard_c3d04b shopCardAnimation_c3d04b ${isCardHovered ? 'shopCardDarkHighlighted_c3d04b' : ''}`}
      onMouseEnter={() => setIsCardHovered(true)}
      onMouseLeave={() => {
        setIsCardHovered(false);
        handleMouseLeave();
      }}
    >
      <div
        className="focusTarget__89030"
        aria-label={item.decoration_name}
        role="button"
        tabIndex={0}
      />
      <div className="preview_c3d04b">
        <div className="profileEffectShopPreview_c3d04b">
          <div className="previewContainer__1e458">
            <img
              alt=" "
              className="preview__1e458"
              aria-hidden="true"
              src="/assets/d918c3bf0ae00c35.png"
            />            
            <div>
              {effect && !isChangingColor && (
                <ShopCard 
                  key={`${effect.id}-${displayEffectIndex}`}
                  effect={{
                    ...effect,
                    alt: item.decoration_description || item.decoration_name,
                    config: effect.config
                  }} 
                  forceHover={isCardHovered}
                />
              )}
            </div>
          </div>
        </div>
      </div>
      <div className="cardText_c3d04b darkCardBackground_c3d04b">
        <div
          className="defaultColor__4bd52 text-lg/bold_cf4812 productName_c3d04b"
          data-text-variant="text-lg/bold"
        >
          {item.decoration_name}
        </div>
        <div className="detailsWrapper_c3d04b">
          {effectsColors.length > 1 && (
            <div 
              role="list" 
              tabIndex={0} 
              className={variantsPanelClass}
              data-list-id={`shop-variants-group-${idx}`}
              onMouseLeave={handleMouseLeave}
            >
              <ol className="variantsList__6f029">
                {effectsColors.map((color, index) => (
                  <React.Fragment key={index}>
                    <li 
                      className="colorVariant__6f029" 
                      role="listitem" 
                      data-list-item-id={`shop-variants-group-${idx}___shop-variants-group-${idx}-${index}`}
                      tabIndex={index === selectedColorIndex ? 0 : -1}
                      onClick={() => handleColorSelect(index)}
                      onMouseEnter={() => handleColorHover(index)}
                    >
                      <div 
                        className={`colorSwatch__6f029 ${
                          isCardHovered ? 'open__6f029' : ''
                        } ${
                          index === selectedColorIndex ? 'selected__6f029' : ''
                        }`}
                        style={{ 
                          backgroundColor: color.color || '#FFFFFF', 
                          zIndex: effectsColors.length - index,
                          transition: 'transform 0.2s ease'
                        }}
                      />
                    </li>
                    {index < effectsColors.length - 1 && <span style={{ display: "none" }} />}
                  </React.Fragment>
                ))}
              </ol>
              <div 
                className="text-xs/medium_cf4812 variantLabel__6f029" 
                data-text-variant="text-xs/medium" 
                style={{ color: 'var(--text-secondary)' }}
              >
                {isCardHovered ? (effectsColors[hoveredColorIndex !== null ? hoveredColorIndex : selectedColorIndex]?.name || 'Color options') : 'Color options'}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const ShopApp = () => {
  const [isCardHovered, setIsCardHovered] = useState(false);
  const [hoveredId, setHoveredId] = useState(null);
  const [items, setItems] = useState([]);
  const [hoveredCardId, setHoveredCardId] = useState(null);
  const [hoveredVariants, setHoveredVariants] = useState({});
  const [selectedVariants, setSelectedVariants] = useState({});
  const [currentPage, setCurrentPage] = useState(1);
  const categoriesPerPage = 5;
  const totalPages = Math.ceil(shopData.length / categoriesPerPage);
  const scrollRef = useRef(null);

  useEffect(() => {
    if (shopData && shopData.items) {
      const filteredItems = shopData.items.filter(item => item.avatar_decoration);
      setItems(filteredItems);
    }
  }, []);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = 0;
    }
  }, [currentPage]);

  const indexOfLastCategory = currentPage * categoriesPerPage;
  const indexOfFirstCategory = indexOfLastCategory - categoriesPerPage;
  const currentCategories = shopData.slice(indexOfFirstCategory, indexOfLastCategory);

  const paginate = (pageNumber) => setCurrentPage(pageNumber);
  const nextPage = () => setCurrentPage(prev => Math.min(prev + 1, totalPages));
  const prevPage = () => setCurrentPage(prev => Math.max(prev - 1, 1));

  return (
    <>
      <div className="appAsidePanelWrapper_a3002d">
        <div className="notAppAsidePanel_a3002d" data-app-not-dev-tools="true">
          <div className="app_a3002d">
            <div className="app__160d8">
              <div className="bg__960e4 theme-dark theme-darker images-dark" />
              <div className="layers__960e4 layers__160d8">
                <div
                  aria-hidden="false"
                  className="layer__960e4 baseLayer__960e4"
                  style={{}}>
                  <div className="container_c48ade">
                    <div
                      className="vc-betterFolders-sidebar-grid base_c48ade"
                      data-fullscreen="false">
                      <div className="content_c48ade">
                        <div className="page_c48ade" data-collapsed="false">
                          <div className="shop__6db1d" tabIndex="-1">
                            <div
                              className="shopScroll__6db1d thin_d125d2 scrollerBase_d125d2"
                              dir="ltr"
                              ref={scrollRef}
                              style={{
                                overflow: "hidden scroll",
                                paddingRight: "0px",
                              }}>
                              <div className="shopViewWrapper__6db1d visible__6db1d">
                                <div className="pageWrapper__6db1d">
                                  <main className="page__6db1d pageWithPagination__6db1d">
                                    <div className="categories__6db1d">
                                      {currentCategories.map((category, index) => (
                                        <Fragment key={index}>
                                          <div key={`${currentPage}-${index}`}>
                                            <div className="categoryWrapper__6db1d">      
                                              <div>
                                                <span
                                                  style={{ display: "block", width: 1, minWidth: 1, height: 24, minHeight: 24 }}
                                                />
                                                <div className="cardsContainer__6db1d">
                                                  {category.items.map((item, idx) => {
                                                    const uniqueId = `${item.itemSkuId}_${index}`;
                                                    if (item.type === "banner") {
                                                      return <BannerCard item={item} idx={idx} />;
                                                    } 
                                                    else {
                                                      return null;
                                                    }
                                                  })}
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </Fragment>
                                      ))}
                                    </div>
                                  </main>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ShopApp;

ShopData.json

[
  {
    "category": "Test",
    "decoration_banner": "background.jpg",
    "decoration_banner_title": "xxxxxx",
    "decoration_banner_video_none": "background.webm",
    "decoration_color": 0,
    "items": [
      {
        "type": "banner",
        "decoration_name": "Power Surge",
        "decoration_description": "tttttt",
        "itemSkuId": "power_surge-banner",
        "banner": "power_surge",
        "effects_colors": [
          {
            "banner": "power_surge",
            "color": "#1e90ff",
            "name": "Original"
          },
          {
            "banner": "power_surge_2",
            "color": "#20b2aa",
            "name": "Color 2"
          },
          {
            "banner": "power_surge_3",
            "color": "#9370db",
            "name": "Color 3"
          }
        ]
      }
    ]
  }
]

profileEffect2.json

{
    "power_surge": {
  "id": "1139323101444845690",
  "name": "Power Surge",
  "thumbnail": "power-surge/thumbnail.png",
  "config": {
    "effects": [
      {
        "src": "power-surge/intro.png",
        "loop": false,
        "height": 880,
        "width": 450,
        "duration": 2400,
        "start": 0,
        "loopDelay": 0,
        "position": {
          "x": 0,
          "y": 0
        },
        "zIndex": 100,
        "randomizedSources": []
      },
      {
        "src": "power-surge/loop.png",
        "loop": true,
        "height": 880,
        "width": 450,
        "duration": 2480,
        "start": 4960,
        "loopDelay": 4960,
        "position": {
          "x": 0,
          "y": 0
        },
        "zIndex": 101,
        "randomizedSources": []
      }
    ],
    "stillFrames": {
      "Thumbnail": null,
      "Static": null,
      "Reduced Motion": null
    }
  }
},
"power_surge_2": {
  "id": "1341506445031505920",
  "name": "Power Surge 2",
  "thumbnail": "power-surge-2/thumbnail.png",
  "config": {
    "effects": [
      {
        "src": "power-surge-2/intro.png",
        "loop": false,
        "height": 880,
        "width": 450,
        "duration": 2400,
        "start": 0,
        "loopDelay": 0,
        "position": {
          "x": 0,
          "y": 0
        },
        "zIndex": 100,
        "randomizedSources": []
      },
      {
        "src": "power-surge-2/idle.png",
        "loop": true,
        "height": 880,
        "width": 450,
        "duration": 2480,
        "start": 4960,
        "loopDelay": 4960,
        "position": {
          "x": 0,
          "y": 0
        },
        "zIndex": 101,
        "randomizedSources": []
      }
    ],
    "stillFrames": {
      "Thumbnail": null,
      "Static": null,
      "Reduced Motion": null
    }
  }
},
  "power_surge_3": {
  "id": "1341506445044088832",
  "name": "Power Surge 3",
  "thumbnail": "power-surge-3/thumbnail.png",
  "config": {
    "effects": [
      {
        "src": "power-surge-3/intro.png",
        "loop": false,
        "height": 880,
        "width": 450,
        "duration": 2400,
        "start": 0,
        "loopDelay": 0,
        "position": {
          "x": 0,
          "y": 0
        },
        "zIndex": 100,
        "randomizedSources": []
      },
      {
        "src": "power-surge-3/idle.png",
        "loop": true,
        "height": 880,
        "width": 450,
        "duration": 2480,
        "start": 4960,
        "loopDelay": 4960,
        "position": {
          "x": 0,
          "y": 0
        },
        "zIndex": 101,
        "randomizedSources": []
      }
    ],
    "stillFrames": {
      "Thumbnail": null,
      "Static": null,
      "Reduced Motion": null
    }
  }
}
}

[bantuyashwanthkumar]

Shader "Custom/ResetProfileEffect" {
Properties {
_MainTex ("Texture", 2D) = "white" {}
_Color ("Tint Color", Color) = (1,1,1,1)
}
SubShader {
Tags { "RenderType"="Opaque" }
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

        sampler2D _MainTex;
        float4 _Color;

        struct appdata {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
        };

        struct v2f {
            float2 uv : TEXCOORD0;
            float4 vertex : SV_POSITION;
        };

        v2f vert (appdata v) {
            v2f o;
            o.vertex = UnityObjectToClipPos(v.vertex);
            o.uv = v.uv;
            return o;
        }

        fixed4 frag (v2f i) : SV_Target {
            fixed4 col = tex2D(_MainTex, i.uv);
            col *= _Color;
            
            // Reset profile effect here: set to default before next pass
            // You might simulate a "reset" by neutralizing tint or glow
            return col;
        }
        ENDCG
    }

    // Second pass (could apply a different effect, or use the reset baseline)
    Pass {
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #include "UnityCG.cginc"

        sampler2D _MainTex;
        float4 _Color;

        struct appdata {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
        };

        struct v2f {
            float2 uv : TEXCOORD0;
            float4 vertex : SV_POSITION;
        };

        v2f vert (appdata v) {
            v2f o;
            o.vertex = UnityObjectToClipPos(v.vertex);
            o.uv = v.uv;
            return o;
        }

        fixed4 frag (v2f i) : SV_Target {
            fixed4 col = tex2D(_MainTex, i.uv);
            
            // This pass applies a glow or profile after reset
            col.rgb += 0.2; // Lighten the color slightly
            return col;
        }
        ENDCG
    }
}

}
First pass applies a color tint from _Color.

Second pass adds a glow effect by lightening the color.

You simulate a "reset" of the profile effect in each pass by returning a baseline state in the first pass.

You could enhance this by using separate render targets, or temporary buffers if using URP/HDRP.

[mecodeatlas]

Welcome to the GitHub Community, @svale88, we're happy you're here! You are more likely to get a useful response if you are posting your question in the applicable category and are explicit about what your project entails--giving a few more details might help someone give you a nudge in the right direction. I've gone ahead and moved it for you. Good luck!

[svale88]

@Leorev01 Thank you, but your topic appears to be off-topic and cannot be marked as an answer.