Как создать точный компонент пользовательского интерфейса с анимацией? ⇐ CSS

[Anonymous]

Я попробовал создать компонент карточки и градиент для фона вместе с анимацией. Но это было совсем не похоже на предоставленную гифку. Как я могу создать плавную анимацию и точный градиент, а также сделать так, чтобы карточка выглядела так, как показано на изображении?
[ПРИМЕЧАНИЕ. Нажмите на гифку, возможно, она отобразилась неправильно. в разделе вопросов"]

Код: Выделить всё

import { useCallback, useEffect, useRef, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import Card from "../Card";
import demoCardData from "../../constants/cardData";

export const ScrollableCardList = ({
cardData: propCardData,
}: {
cardData?: Array;
}) => {
const data = propCardData || demoCardData;
const containerRef = useRef(null);
const [activeIndex, setActiveIndex] = useState(0);

const handleScroll = useCallback(() => {
if (!containerRef.current) return;

const scrollTop = containerRef.current.scrollTop;
const scrollHeight = containerRef.current.scrollHeight;
const clientHeight = containerRef.current.clientHeight;

const scrollRatio = scrollTop / (scrollHeight - clientHeight);
const newActiveIndex = Math.floor(scrollRatio * data.length);

setActiveIndex(newActiveIndex);
}, [data]);

useEffect(() => {
if (!containerRef.current) return;

containerRef.current.addEventListener("scroll", handleScroll);

return () => {
if (!containerRef.current) return;
containerRef.current.removeEventListener("scroll", handleScroll);
};
}, [handleScroll]);

return (
ref={containerRef}
className="flex flex-col items-center h-screen overflow-auto"
style={{ scrollBehavior: "smooth" }}
>
{data.map((card, index) => (

))}

);
};

Код: Выделить всё

import { Circular, Rectangular, SubTitle, Title } from "./placeholders";

type CardProps = {
isActive?: boolean;
cardContainerStyles?: string;
rectangleContainerStyles?: string;
circleContainerStyles?: string;
imageUrl?: string;
avatarImageUrl?: string;
titleText?: string;
subTitleText?: string;
};
const Card = ({
isActive,
cardContainerStyles,
rectangleContainerStyles,
circleContainerStyles,
imageUrl,
avatarImageUrl,
titleText,
subTitleText,
}: CardProps) => {
const activeClass = isActive ? "scale-110" : "";
// Ensure transition-transform is part of the base class string
const cardBaseStyles = "transition-transform duration-300 ease-in-out";
const cardDynamicStyles =
cardContainerStyles ||
"w-80 min-h-80 rounded-2xl shadow-4xl p-4 my-4 bg-gradient-to-br from-rose-500 to-rose-400";
const cardStyles = `${cardBaseStyles} ${activeClass} ${cardDynamicStyles}`;
const rectangleStyles =
rectangleContainerStyles ||
"bg-gradient-to-br from-rose-400 to-[#db7483] w-[100%] h-36 rounded-2xl shadow-2xl";
const circleStyles =
circleContainerStyles ||
"w-12 h-12 rounded-full bg-gradient-to-br from-rose-400 to-rose-300 shadow-md";

return (










);
};

export default Card;

Следует ли мне использовать библиотеку анимации? Как я могу создать точный градиент, эффект всплывающего окна, анимацию и т. д.? Может ли кто-нибудь помочь мне в этом процессе? Если кто-то предложит отличное решение, если кто-то проведет меня еще лучше.
Спасибо.
Вот ссылка на коды и коробку: https: //codesandbox.io/p/github/Habi-Thapa/rockandscroll/main?import=true

Подробнее здесь: https://stackoverflow.com/questions/783 ... -animation