Actually fade in

Author: hasparus

src/components/blog-page/blog-card-picture.tsx

@@ -111,6 +111,8 @@ export function BlogCardPicture({
     }
 
     draw()
+
+    canvas.dataset.visible = "true"
   }, [seed])
 
   return (
@@ -124,7 +126,7 @@ export function BlogCardPicture({
       <canvas
         ref={canvasRef}
         aria-hidden="true"
-        className="animate-fade-in pointer-events-none absolute inset-0 !size-full"
+        className="data-[visible]:animate-fade-in pointer-events-none absolute inset-0 !size-full"
       />
       {children ? <div className="relative z-10 p-4">{children}</div> : null}
     </div>

tailwind.config.ts

@@ -80,7 +80,7 @@ const config: Config = {
           "arrow-left var(--animation-duration, .75s) var(--animation-direction, forwards) ease infinite",
         "show-overflow":
           "show-overflow var(--animation-duration, 12s) var(--animation-delay, 1s) var(--animation-direction, forwards) ease infinite",
-        "fade-in": "fade-in var(--animation-duration, 100ms) ease-out forwards",
+        "fade-in": "fade-in var(--animation-duration, 200ms) ease-out forwards",
       },
       keyframes: {
         scroll: {
@@ -105,6 +105,7 @@ const config: Config = {
           },
         },
         "fade-in": {
+          from: { opacity: "0" },
           to: { opacity: "1" },
         },
       },