@xingwangzhe/stalux 1.28.5 → 1.29.0

package/.release/cli.mjs

@@ -14,6 +14,7 @@ function getConfigYamls() {
 lang: en
 title: "My Blog"
 description: "A blog built with Stalux theme"
+accentColor: "#EAB308" # Shared theme accent color (six-digit HEX)
 url: "https://example.com"
 timezone: "Asia/Shanghai"
 `,

package/README.md

@@ -40,6 +40,12 @@ export default defineConfig({
 });
 ```
 
+Set the optional `accentColor` in `stalux/config/site.yml` to customize the shared theme and Waline accent. It accepts a six-digit HEX color and defaults to `#EAB308`; choose a color with sufficient contrast against your background.
+
+```yaml title="stalux/config/site.yml"
+accentColor: "#EAB308"
+```
+
 To customize the bundled integrations, pass options (or disable them with `false`):
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.28.5",
+    "version": "1.29.0",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/components/stalux/archives/archivesList.astro

@@ -58,18 +58,18 @@ const archiveYears = [...archivesByYearMonth.entries()]
             {archiveYears.length > 0 ? (
     archiveYears.map((archiveYear) => (
         <div class={styles.yearSection} data-year={String(archiveYear.year)}>
-            <div class={styles.yearHeader} data-year-header style="opacity:0">
+            <div class={styles.yearHeader}>
                 <h2 class={styles.yearTitle}>{archiveYear.year}</h2>
                 <div class={styles.yearCount}>
                     {t("archives.postCount", { n: archiveYear.count })}
                 </div>
             </div>
             {archiveYear.months.map(({ month, posts: monthPosts }) => (
-                <div class={styles.monthSection} data-month-section style="opacity:0">
+                <div class={styles.monthSection}>
                     <h3 class={styles.monthTitle}>{t("archives.month", { n: month })}</h3>
                     <ul class={styles.postList}>
                         {monthPosts.map((post) => (
-                            <li class={styles.postItem} data-post-item style="opacity:0">
+                            <li class={styles.postItem}>
                                 <time class={styles.postDate} datetime={post.data.date}>
                                     {format(parseDate(post.data.date), "yyyy-MM-dd")}
                                 </time>

package/src/components/stalux/categories/categoriesList.astro

@@ -8,7 +8,7 @@ const categoryList = await getCategoryCountList(Astro.logger);
 
 <ul class={`${styles.categoriesList} stagger-children`}>
     {categoryList.map((category) => (
-    <li class={styles.item} style="opacity:0">
+    <li class={styles.item}>
         <CategoriesCard category={category} />
     </li>
 ))}

package/src/components/stalux/posts/PostTaxonomy.astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import { fade } from "astro:transitions";
 import style from "@styles/components/posts/postTaxonomy.module.css";
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
@@ -46,11 +45,7 @@ const cfg = {
 <nav class={style.container} transition:name={cfg.containerName} aria-label={title ?? cfg.heading}>
     {items.length > 0 && <h3 class={style.title}>{title ?? cfg.heading}</h3>}
     {items.length > 0 ? (
-    <div
-        class={cfg.listClass}
-        transition:name={cfg.contentName}
-        transition:animate={fade({ duration: "0.3s" })}
-    >
+    <div class={cfg.listClass} transition:name={cfg.contentName}>
         {items.map((item) => (
             <a href={`${cfg.prefix}${item}/`} class={`${cfg.itemClass} a-none`} data-astro-prefetch>
                 {item}

package/src/components/stalux/posts/postCard.astro

@@ -4,6 +4,7 @@ import { getCollection } from "astro:content";
 import style from "@styles/components/posts/postCard.module.css";
 import { getSiteData } from "@utils/config-utils";
 import { toMachineDateTime } from "@utils/semantic-time";
+import { getPostTitleTransitionName } from "@utils/view-transitions";
 
 interface Props {
     post: CollectionEntry<"posts">;
@@ -41,7 +42,10 @@ const description = post.data.desc || "";
         </div>
     </a>
 )}
-        <h2 class={style.postTitle}>
+        <h2
+            class={style.postTitle}
+            transition:name={priority ? getPostTitleTransitionName(post.data.abbrlink) : undefined}
+        >
             <a href={`/posts/${post.data.abbrlink}/`} class="a-none" data-astro-prefetch="viewport">
                 {post.data.title}
             </a>

package/src/components/stalux/posts/postContent.astro

@@ -1,5 +1,4 @@
 ---
-import { fade } from "astro:transitions";
 import "photoswipe/dist/photoswipe.css";
 import style from "@styles/components/posts/postContent.module.css";
 import "@styles/components/markdown.css";
@@ -11,6 +10,7 @@ import { toMachineDateTime } from "@utils/semantic-time";
 interface Props {
     title: string;
     transitionName?: string;
+    titleTransitionName?: string;
     date?: string;
     updated?: string;
     readingMinutes?: number;
@@ -35,12 +35,11 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
 <article
     class={style.articleContent}
     data-stalux-gallery={props.hasImage ? "true" : undefined}
-    transition:name={props.transitionName ?? "post-content"}
-    transition:animate={fade({ duration: "0.45s" })}
+    transition:name={props.transitionName}
 >
     <!-- Article Header -->
     <header class={style.articleHeader}>
-        <h1 class={style.title}>{props.title}</h1>
+        <h1 class={style.title} transition:name={props.titleTransitionName}>{props.title}</h1>
         <div class={style.metadata}>
             {props.date && (
     <time

package/src/components/stalux/posts/postToc.astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import { fade } from "astro:transitions";
 import style from "@styles/components/posts/postToc.module.css";
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
@@ -36,11 +35,7 @@ const tocItems = headings
 >
     <h3 class={style.title}>{title}</h3>
     {tocItems.length > 0 ? (
-    <ul
-        class={style.list}
-        transition:name="toc-content"
-        transition:animate={fade({ duration: "0.3s" })}
-    >
+    <ul class={style.list} transition:name="toc-content">
         {tocItems.map((heading) => (
             <li>
                 <a

package/src/index.ts

@@ -36,6 +36,7 @@ import {
     resolveFontInputs,
     writePageFontSubset,
 } from "./internal/font-slices";
+import { addLocalImageDimensions } from "./internal/image-dimensions";
 import { createInjectedRoutes } from "./internal/injected-routes";
 import { createRuntimeCacheKey } from "./internal/runtime-cache-key";
 import {
@@ -376,7 +377,11 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                         /<style data-stalux-page-font>[\s\S]*?<\/style>/gi,
                         "",
                     );
-                    let after = applyHtmlImageLoadingPolicy(withoutPageFont);
+                    const withImageDimensions = await addLocalImageDimensions(
+                        withoutPageFont,
+                        outDir,
+                    );
+                    let after = applyHtmlImageLoadingPolicy(withImageDimensions);
                     if (pageFontData) {
                         const linkedStylesheetText = readLinkedStylesheetText(
                             after,

package/src/internal/image-dimensions.ts

@@ -0,0 +1,122 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+
+export type ImageDimensions = { width: number; height: number };
+
+/** Read intrinsic dimensions for common public image formats without loading an image library. */
+export function readImageDimensions(data: Buffer): ImageDimensions | undefined {
+    if (data.length >= 24 && data.toString("hex", 0, 8) === "89504e470d0a1a0a") {
+        return { width: data.readUInt32BE(16), height: data.readUInt32BE(20) };
+    }
+
+    if (
+        data.length >= 10 &&
+        (data.toString("ascii", 0, 6) === "GIF87a" || data.toString("ascii", 0, 6) === "GIF89a")
+    ) {
+        return { width: data.readUInt16LE(6), height: data.readUInt16LE(8) };
+    }
+
+    if (
+        data.length >= 30 &&
+        data.toString("ascii", 0, 4) === "RIFF" &&
+        data.toString("ascii", 8, 12) === "WEBP"
+    ) {
+        const chunk = data.toString("ascii", 12, 16);
+        if (chunk === "VP8X") {
+            return {
+                width: 1 + data.readUIntLE(24, 3),
+                height: 1 + data.readUIntLE(27, 3),
+            };
+        }
+        if (chunk === "VP8 " && data[23] === 0x9d && data[24] === 0x01 && data[25] === 0x2a) {
+            return {
+                width: data.readUInt16LE(26) & 0x3fff,
+                height: data.readUInt16LE(28) & 0x3fff,
+            };
+        }
+        if (chunk === "VP8L" && data[20] === 0x2f) {
+            const b1 = data[21] ?? 0;
+            const b2 = data[22] ?? 0;
+            const b3 = data[23] ?? 0;
+            const b4 = data[24] ?? 0;
+            return {
+                width: 1 + b1 + ((b2 & 0x3f) << 8),
+                height: 1 + (b2 >> 6) + (b3 << 2) + ((b4 & 0x0f) << 10),
+            };
+        }
+    }
+
+    if (data.length >= 4 && data[0] === 0xff && data[1] === 0xd8) {
+        let offset = 2;
+        while (offset + 4 <= data.length) {
+            if (data[offset] !== 0xff) break;
+            const marker = data[offset + 1] ?? 0;
+            const size = data.readUInt16BE(offset + 2);
+            if (size < 7 || offset + 2 + size > data.length) break;
+            if (
+                [
+                    0xc0, 0xc1, 0xc2, 0xc3, 0xc5, 0xc6, 0xc7, 0xc9, 0xca, 0xcb, 0xcd, 0xce, 0xcf,
+                ].includes(marker)
+            ) {
+                return {
+                    width: data.readUInt16BE(offset + 7),
+                    height: data.readUInt16BE(offset + 5),
+                };
+            }
+            offset += size + 2;
+        }
+    }
+
+    return undefined;
+}
+
+/** Add width/height to same-origin emitted images so their space is reserved before download. */
+export async function addLocalImageDimensions(html: string, outputDir: string): Promise<string> {
+    const dimensionsCache = new Map<string, Promise<ImageDimensions | undefined>>();
+    const root = path.resolve(outputDir);
+    const tags = [...html.matchAll(/<img\b[^>]*>/gi)];
+
+    for (const match of tags) {
+        const tag = match[0];
+        if (!tag || (/\swidth=/i.test(tag) && /\sheight=/i.test(tag))) continue;
+        const src = tag.match(/\ssrc="([^"]+)"/i)?.[1];
+        if (!src) continue;
+
+        let filePath: string;
+        try {
+            const url = new URL(src, "https://stalux.invalid");
+            if (url.origin !== "https://stalux.invalid") continue;
+            filePath = path.resolve(root, `.${decodeURIComponent(url.pathname)}`);
+        } catch {
+            continue;
+        }
+        if (filePath !== root && !filePath.startsWith(`${root}${path.sep}`)) continue;
+
+        let dimensions = dimensionsCache.get(filePath);
+        if (!dimensions) {
+            dimensions = readFile(filePath)
+                .then(readImageDimensions)
+                .catch(() => undefined);
+            dimensionsCache.set(filePath, dimensions);
+        }
+        const size = await dimensions;
+        if (!size || size.width <= 0 || size.height <= 0) continue;
+
+        const hasWidth = /\swidth=/i.test(tag);
+        const hasHeight = /\sheight=/i.test(tag);
+        const updated =
+            hasWidth && !hasHeight
+                ? tag.replace(/\s*\/?\s*>$/, (ending) => ` height="${size.height}"${ending}`)
+                : hasHeight && !hasWidth
+                  ? tag.replace(
+                        /\sheight="[^"]*"/i,
+                        ` width="${size.width}" height="${size.height}"`,
+                    )
+                  : tag.replace(
+                        /\s*\/?\s*>$/,
+                        (ending) => ` width="${size.width}" height="${size.height}"${ending}`,
+                    );
+        html = html.replace(tag, updated);
+    }
+    return html;
+}

package/src/layouts/PostLayout.astro

@@ -7,12 +7,14 @@ import PostNavigation from "@components/stalux/posts/postNavigation.astro";
 import PostRight from "@components/stalux/posts/postRight.astro";
 import WalineComment from "@components/stalux/posts/WalineComment.astro";
 import { getCommentData } from "@utils/config-utils";
+import { getPostTitleTransitionName } from "@utils/view-transitions";
 import { buildWalineProps } from "@utils/waline";
 import "@styles/base/math.css";
 import layoutStyle from "@styles/components/posts/postLayout.module.css";
 
 interface Props {
     title: string;
+    postId?: string | number;
     date?: string;
     updated?: string;
     readingMinutes?: number;
@@ -57,6 +59,7 @@ const walineConfig = walineSection?.serverURL
         <!-- Main Content -->
         <PostContent
             title={props.title}
+            titleTransitionName={props.postId === undefined ? undefined : getPostTitleTransitionName(props.postId)}
             date={props.date}
             updated={props.updated}
             readingMinutes={props.readingMinutes}

package/src/layouts/Stalux.astro

@@ -8,6 +8,7 @@ import "@pagefind/component-ui/css";
 import "@styles/base/init.css";
 import "@styles/shared/stagger.css";
 import "@styles/shared/view-transitions.css";
+import { getAccentColorStyle } from "@utils/accent-color";
 import {
     getAiDiscoveryData,
     getAuthorData,
@@ -56,7 +57,7 @@ const routeAnimation = getRouteAnimation(routeKind);
 ---
 
 <!doctype html>
-<html lang={htmlLang}>
+<html lang={htmlLang} style={getAccentColorStyle(siteConfig.accentColor)}>
     <Head
         title={props.title}
         description={props.description}

package/src/pages/posts/[post].astro

@@ -69,6 +69,7 @@ export async function getStaticPaths() {
     <div style="height:3em"></div>
     <PostLayout
         title={props.post.data.title}
+        postId={props.post.data.abbrlink}
         date={props.post.data.date}
         updated={props.post.data.updated}
         readingMinutes={flags.readingMinutes}

package/src/schemas/config.ts

@@ -16,6 +16,11 @@ export const siteSchema = z.object({
     title: z.string().min(1, "site.title is required"),
     url: z.url("site.url must be a valid URL"),
     description: z.string().min(1, "site.description is required"),
+    accentColor: z
+        .string()
+        .regex(/^#[\da-fA-F]{6}$/, "site.accentColor must be a six-digit HEX color such as #EAB308")
+        .optional()
+        .default("#EAB308"),
     seoTitle: z.string().min(1).optional(),
     timezone: z.string().optional().default("Asia/Shanghai"),
     canonical: z.url("site.canonical must be a valid URL").optional(),

package/src/styles/base/init.css

@@ -56,7 +56,7 @@ a::after {
     bottom: -2px;
     height: 1px;
     width: 100%;
-    background: linear-gradient(90deg, var(--stalux-accent-color), rgba(100, 255, 218, 0.5));
+    background: linear-gradient(90deg, var(--stalux-accent-color), var(--accent-50p));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.2, 1);
@@ -110,14 +110,17 @@ ul {
 :root {
     --stalux-bg-color: #202020;
     --stalux-bg-filter: none;
-    --stalux-text-shadow: #64ffda 0.1rem 0.1rem 0.2rem;
-    --stalux-accent-color: #64ffda;
+    --stalux-text-shadow: var(--stalux-accent-color) 0.08rem 0.08rem 0.18rem;
+    --stalux-accent-color: #eab308;
+    --stalux-accent-rgb: 234, 179, 8;
+    --surface-glass: var(--black-10p);
+    --surface-glass-shadow: var(--shadow-sidebar);
 
     /* 卡片和标签颜色 Token（可在这里统一调整主题色/透明度） */
-    --card-bg: rgba(0, 0, 0, 0.2);
+    --card-bg: var(--surface-glass);
     --card-border: rgba(255, 255, 255, 0.1);
-    --card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    --card-box-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.5);
+    --card-box-shadow: var(--shadow-sidebar);
+    --card-box-shadow-hover: var(--shadow-raised-hover);
 
     --tag-bg: rgba(255, 255, 255, 0.12);
     --tag-bg-hover: rgba(255, 255, 255, 0.18);
@@ -152,15 +155,15 @@ ul {
     --black-10p: rgba(0, 0, 0, 0.1);
 
     /* 强调色变体 */
-    --accent-90p: rgba(100, 255, 218, 0.9);
-    --accent-85p: rgba(100, 255, 218, 0.85);
-    --accent-80p: rgba(100, 255, 218, 0.8);
-    --accent-70p: rgba(100, 255, 218, 0.7);
-    --accent-60p: rgba(100, 255, 218, 0.6);
-    --accent-50p: rgba(100, 255, 218, 0.5);
-    --accent-40p: rgba(100, 255, 218, 0.4);
-    --accent-30p: rgba(100, 255, 218, 0.3);
-    --accent-20p: rgba(100, 255, 218, 0.2);
+    --accent-90p: rgba(var(--stalux-accent-rgb), 0.9);
+    --accent-85p: rgba(var(--stalux-accent-rgb), 0.85);
+    --accent-80p: rgba(var(--stalux-accent-rgb), 0.8);
+    --accent-70p: rgba(var(--stalux-accent-rgb), 0.7);
+    --accent-60p: rgba(var(--stalux-accent-rgb), 0.6);
+    --accent-50p: rgba(var(--stalux-accent-rgb), 0.5);
+    --accent-40p: rgba(var(--stalux-accent-rgb), 0.4);
+    --accent-30p: rgba(var(--stalux-accent-rgb), 0.3);
+    --accent-20p: rgba(var(--stalux-accent-rgb), 0.2);
 
     /* 常用过渡和动画 */
     --transition-fast: 0.18s ease;
@@ -193,7 +196,14 @@ ul {
     --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
     --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3);
     --shadow-xl: 0 12px 26px rgba(0, 0, 0, 0.28);
-    --shadow-sidebar: 0 4px 6px rgba(0, 0, 0, 0.753);
+    --shadow-sidebar:
+        0 16px 20px -12px rgba(0, 0, 0, 0.84),
+        10px 4px 16px -12px rgba(0, 0, 0, 0.58),
+        -10px 4px 16px -12px rgba(0, 0, 0, 0.58);
+    --shadow-raised-hover:
+        0 20px 24px -13px rgba(0, 0, 0, 0.9),
+        12px 5px 18px -13px rgba(0, 0, 0, 0.68),
+        -12px 5px 18px -13px rgba(0, 0, 0, 0.68);
     --shadow-dark: rgba(0, 0, 0, 0.753);
 
     /* 语义化颜色 */
@@ -269,5 +279,8 @@ footer {
     padding: var(--space-lg) var(--space-md);
     text-align: center;
     color: var(--muted-text);
-    background: transparent;
+    background: linear-gradient(180deg, rgba(12, 14, 18, 0.18), rgba(12, 14, 18, 0.72));
+    border-top: 1px solid var(--white-10p);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
 }

package/src/styles/components/archives/archivesList.module.css

@@ -9,6 +9,7 @@
     --tl-line: var(--radius-sm);
     --tl-pad: var(--space-xl);
     padding-left: var(--tl-pad);
+    animation: contentReveal 220ms ease 360ms both;
 }
 
 .timelineContainer::before {
@@ -78,118 +79,7 @@
     background-color: var(--black-10p);
     border-radius: 0.5rem;
     width: 100%;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes fadeInLeft {
-    from {
-        opacity: 0;
-        transform: translateX(-15px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-/* yearSection 子元素通用入场动画 */
-[data-year-header],
-[data-month-section],
-[data-post-item] {
-    animation: fadeInUp 0.53s ease both;
-}
-
-[data-year-header] {
-    animation-duration: 0.38s;
-}
-
-[data-post-item] {
-    animation-name: fadeInLeft;
-    animation-duration: 0.38s;
-}
-
-/* yearSection 内部阶梯延迟（yearHeader + monthSections 同为子元素） */
-[data-year-header]:nth-child(1) {
-    animation-delay: 0s;
-}
-
-[data-month-section]:nth-child(2) {
-    animation-delay: 0.18s;
-}
-[data-month-section]:nth-child(3) {
-    animation-delay: 0.24s;
-}
-[data-month-section]:nth-child(4) {
-    animation-delay: 0.3s;
-}
-[data-month-section]:nth-child(5) {
-    animation-delay: 0.36s;
-}
-[data-month-section]:nth-child(6) {
-    animation-delay: 0.42s;
-}
-[data-month-section]:nth-child(7) {
-    animation-delay: 0.48s;
-}
-[data-month-section]:nth-child(8) {
-    animation-delay: 0.54s;
-}
-[data-month-section]:nth-child(9) {
-    animation-delay: 0.6s;
-}
-[data-month-section]:nth-child(10) {
-    animation-delay: 0.66s;
-}
-[data-month-section]:nth-child(11) {
-    animation-delay: 0.72s;
-}
-[data-month-section]:nth-child(12) {
-    animation-delay: 0.78s;
-}
-
-/* postItem 阶梯延迟 */
-[data-post-item]:nth-child(1) {
-    animation-delay: 0s;
-}
-[data-post-item]:nth-child(2) {
-    animation-delay: 0.045s;
-}
-[data-post-item]:nth-child(3) {
-    animation-delay: 0.09s;
-}
-[data-post-item]:nth-child(4) {
-    animation-delay: 0.135s;
-}
-[data-post-item]:nth-child(5) {
-    animation-delay: 0.18s;
-}
-[data-post-item]:nth-child(6) {
-    animation-delay: 0.225s;
-}
-[data-post-item]:nth-child(7) {
-    animation-delay: 0.27s;
-}
-[data-post-item]:nth-child(8) {
-    animation-delay: 0.315s;
-}
-[data-post-item]:nth-child(9) {
-    animation-delay: 0.36s;
-}
-[data-post-item]:nth-child(10) {
-    animation-delay: 0.405s;
-}
-[data-post-item]:nth-child(n + 11) {
-    animation-delay: 0.45s;
+    animation: stalux-content-reveal 220ms ease 360ms both;
 }
 
 /* 懒加载指示器样式 */
@@ -374,3 +264,12 @@
         font-size: 1.1rem;
     }
 }
+
+@keyframes contentReveal {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

package/src/styles/components/categories/categoriesCard.module.css

@@ -4,11 +4,14 @@
     display: flex;
     flex-direction: column;
     padding: var(--space-lg);
-    background-color: var(--white-05p);
+    background-color: var(--surface-glass);
     border-radius: 0.8rem;
-    border: var(--border-thin) solid var(--white-10p);
     color: var(--white-full);
-    transition: all var(--transition-slow);
+    box-shadow: var(--shadow-sidebar);
+    transition:
+        transform 220ms ease,
+        background-color 220ms ease,
+        box-shadow 220ms ease;
     overflow: hidden;
     height: fit-content;
 }
@@ -27,15 +30,14 @@
         rgba(255, 255, 255, 0)
     );
     transform: translateX(-100%);
-    transition: transform 0.6s;
+    transition: transform 360ms ease;
     z-index: 1;
 }
 
 .categoryCard:hover {
     transform: translateY(-3px);
     background-color: rgba(255, 255, 255, 0.08);
-    border-color: var(--accent-50p);
-    box-shadow: var(--shadow-lg);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 .categoryCard:hover::before {
@@ -71,7 +73,11 @@
     width: 28px;
     height: 28px;
     color: var(--white-50p);
-    transition: all var(--transition-slower) var(--easing-bounce);
+    transition:
+        transform 240ms ease,
+        background-color 240ms ease,
+        color 240ms ease,
+        box-shadow 240ms ease;
     z-index: 2;
     transform-origin: center center;
     background: var(--black-15p);

package/src/styles/components/categories/categoriesList.module.css

@@ -11,17 +11,14 @@
 }
 
 .item {
-    animation: fadeInUp 0.5s ease both;
-    opacity: 0;
+    animation: contentReveal 220ms ease 360ms both;
 }
 
-@keyframes fadeInUp {
+@keyframes contentReveal {
     from {
         opacity: 0;
-        transform: translateY(20px);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
     }
 }