chore: update changelog

Author: adithyaakrishna

apps/sim/app/(landing)/blog/[slug]/animated-blocks.tsx

@@ -10,16 +10,18 @@ const HOLD_MS = 3000
 const EXIT_STAGGER_MS = 120
 const EXIT_DURATION_MS = 500
 
-interface BlockState {
-  opacity: number
-  transitioning: boolean
+const RE_ENTER_OPACITIES = [1, 0.8, 0.6, 0.9] as const
+
+
+function setBlockOpacity(el: HTMLSpanElement | null, opacity: number, animate: boolean) {
+  if (!el) return
+  el.style.transition = animate ? `opacity ${ENTER_DURATION_MS}ms ease-out` : 'none'
+  el.style.opacity = String(opacity)
 }
 
 export function AnimatedColorBlocks() {
   const prefersReducedMotion = usePrefersReducedMotion()
-  const [blocks, setBlocks] = useState<BlockState[]>(
-    COLORS.map(() => ({ opacity: prefersReducedMotion ? 1 : 0, transitioning: false }))
-  )
+  const blockRefs = useRef<(HTMLSpanElement | null)[]>([])
   const timers = useRef<ReturnType<typeof setTimeout>[]>([])
   const mounted = useRef(true)
 
@@ -32,17 +34,18 @@ export function AnimatedColorBlocks() {
   useEffect(() => {
     mounted.current = true
     timers.current = []
+
     if (prefersReducedMotion) {
-      setBlocks(COLORS.map(() => ({ opacity: 1, transitioning: false })))
+      blockRefs.current.forEach((el) => setBlockOpacity(el, 1, false))
       return
     }
 
+    blockRefs.current.forEach((el) => setBlockOpacity(el, 0, false))
+
     COLORS.forEach((_, i) => {
       schedule(() => {
         if (!mounted.current) return
-        setBlocks((prev) =>
-          prev.map((b, idx) => (idx === i ? { opacity: 1, transitioning: true } : b))
-        )
+        setBlockOpacity(blockRefs.current[i], 1, true)
       }, i * ENTER_STAGGER_MS)
     })
 
@@ -65,9 +68,7 @@ export function AnimatedColorBlocks() {
     COLORS.forEach((_, i) => {
       schedule(() => {
         if (!mounted.current) return
-        setBlocks((prev) =>
-          prev.map((b, idx) => (idx === i ? { opacity: 0.15, transitioning: true } : b))
-        )
+        setBlockOpacity(blockRefs.current[i], 0.15, true)
       }, i * EXIT_STAGGER_MS)
     })
 
@@ -77,11 +78,7 @@ export function AnimatedColorBlocks() {
       COLORS.forEach((_, i) => {
         schedule(() => {
           if (!mounted.current) return
-          setBlocks((prev) =>
-            prev.map((b, idx) =>
-              idx === i ? { opacity: [1, 0.8, 0.6, 0.9][i], transitioning: true } : b
-            )
-          )
+          setBlockOpacity(blockRefs.current[i], RE_ENTER_OPACITIES[i], true)
         }, i * ENTER_STAGGER_MS)
       })
     }, exitTotalMs + 200)
@@ -96,12 +93,11 @@ export function AnimatedColorBlocks() {
       {COLORS.map((color, i) => (
         <span
           key={color}
-          className='inline-block h-3 w-3'
-          style={{
-            backgroundColor: color,
-            opacity: blocks[i]?.opacity ?? 0,
-            transition: `opacity ${blocks[i]?.transitioning ? ENTER_DURATION_MS : 0}ms ease-out`,
+          ref={(el) => {
+            blockRefs.current[i] = el
           }}
+          className='inline-block h-3 w-3'
+          style={{ backgroundColor: color, opacity: 0 }}
         />
       ))}
     </div>
@@ -110,32 +106,30 @@ export function AnimatedColorBlocks() {
 
 export function AnimatedColorBlocksVertical() {
   const prefersReducedMotion = usePrefersReducedMotion()
-  const [blocks, setBlocks] = useState<BlockState[]>(
-    COLORS.slice(0, 3).map(() => ({
-      opacity: prefersReducedMotion ? 1 : 0,
-      transitioning: false,
-    }))
-  )
+  const blockRefs = useRef<(HTMLSpanElement | null)[]>([])
   const timers = useRef<ReturnType<typeof setTimeout>[]>([])
   const mounted = useRef(true)
 
+  const verticalColors = [COLORS[0], COLORS[1], COLORS[2]] as const
+
   useEffect(() => {
     mounted.current = true
     timers.current = []
+
     if (prefersReducedMotion) {
-      setBlocks(COLORS.slice(0, 3).map(() => ({ opacity: 1, transitioning: false })))
+      blockRefs.current.forEach((el) => setBlockOpacity(el, 1, false))
       return
     }
 
+    blockRefs.current.forEach((el) => setBlockOpacity(el, 0, false))
+
     const baseDelay = COLORS.length * ENTER_STAGGER_MS + 100
 
-    COLORS.slice(0, 3).forEach((_, i) => {
+    verticalColors.forEach((_, i) => {
       const id = setTimeout(
         () => {
           if (!mounted.current) return
-          setBlocks((prev) =>
-            prev.map((b, idx) => (idx === i ? { opacity: 1, transitioning: true } : b))
-          )
+          setBlockOpacity(blockRefs.current[i], 1, true)
         },
         baseDelay + i * ENTER_STAGGER_MS
       )
@@ -149,19 +143,16 @@ export function AnimatedColorBlocksVertical() {
     }
   }, [prefersReducedMotion])
 
-  const verticalColors = [COLORS[0], COLORS[1], COLORS[2]]
-
   return (
     <div className='flex flex-col gap-0' aria-hidden='true'>
       {verticalColors.map((color, i) => (
         <span
           key={color}
-          className='inline-block h-3 w-3'
-          style={{
-            backgroundColor: color,
-            opacity: blocks[i]?.opacity ?? 0,
-            transition: `opacity ${blocks[i]?.transitioning ? ENTER_DURATION_MS : 0}ms ease-out`,
+          ref={(el) => {
+            blockRefs.current[i] = el
           }}
+          className='inline-block h-3 w-3'
+          style={{ backgroundColor: color, opacity: 0 }}
         />
       ))}
     </div>

apps/sim/app/(landing)/blog/[slug]/back-link.tsx

@@ -1,25 +1,15 @@
-'use client'
-
-import { useState } from 'react'
 import { ArrowLeft, ChevronLeft } from 'lucide-react'
 import Link from 'next/link'
 
 export function BackLink() {
-  const [isHovered, setIsHovered] = useState(false)
-
   return (
     <Link
       href='/blog'
       className='group flex items-center gap-1 text-[#999] text-sm hover:text-[#ECECEC]'
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
     >
-      <span className='group-hover:-translate-x-0.5 inline-flex transition-transform duration-200'>
-        {isHovered ? (
-          <ArrowLeft className='h-4 w-4' aria-hidden='true' />
-        ) : (
-          <ChevronLeft className='h-4 w-4' aria-hidden='true' />
-        )}
+      <span className='inline-flex transition-transform duration-200 group-hover:-translate-x-0.5'>
+        <ChevronLeft className='h-4 w-4 block group-hover:hidden' aria-hidden='true' />
+        <ArrowLeft className='h-4 w-4 hidden group-hover:block' aria-hidden='true' />
       </span>
       Back to Blog
     </Link>

apps/sim/app/(landing)/blog/[slug]/prose-studio.css

@@ -232,6 +232,18 @@ body[data-toc-rail-hover="true"] [data-blog-main-content] {
   opacity: 0.58;
 }
 
+.nav-label-softenable {
+  transition:
+    color 150ms ease-out,
+    filter 150ms ease-out,
+    opacity 150ms ease-out;
+}
+
+nav[data-rail-hover] .nav-label-softenable[data-softenable] {
+  opacity: 0.45;
+  filter: blur(1.5px);
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   [data-blog-main-content] {
@@ -241,4 +253,8 @@ body[data-toc-rail-hover="true"] [data-blog-main-content] {
   .prose-studio a {
     transition: none;
   }
+
+  .nav-label-softenable {
+    transition: none;
+  }
 }