chore(release): 4.24.0 [skip ci]

## [4.24.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.23.0...v4.24.0) (2025-10-20)

### Features

* **homepage:** add animated mini abacus to "Read and set numbers" card ([e028e34](e028e342ad))

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.24.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.23.0...v4.24.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add animated mini abacus to "Read and set numbers" card ([e028e34](https://github.com/antialias/soroban-abacus-flashcards/commit/e028e342ad4bc01491e05a4ba074628155926fd8))
+
 ## [4.23.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.22.0...v4.23.0) (2025-10-20)
 
 

apps/web/src/app/page.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
 import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
 import { getTutorialForEditor } from '@/utils/tutorialConverter'
@@ -8,6 +10,38 @@ import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'
 import { token } from '../../styled-system/tokens'
 
+// Mini abacus that cycles through random 3-digit numbers
+function MiniAbacus() {
+  const [currentValue, setCurrentValue] = useState(0)
+  const abacusConfig = useAbacusConfig({
+    abacusColumns: 3,
+    theme: 'dark',
+  })
+
+  useEffect(() => {
+    // Cycle through random 3-digit numbers every 2 seconds
+    const interval = setInterval(() => {
+      const randomNum = Math.floor(Math.random() * 1000) // 0-999
+      setCurrentValue(randomNum)
+    }, 2000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div
+      className={css({
+        height: '75px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <AbacusReact value={currentValue} config={abacusConfig} />
+    </div>
+  )
+}
+
 export default function HomePage() {
   // Extract just the "Friends of 5" step (2+3=5) for homepage demo
   const fullTutorial = getTutorialForEditor()
@@ -320,7 +354,7 @@ export default function HomePage() {
                               p: '2',
                             })}
                           >
-                            {skill.icon}
+                            {i === 0 ? <MiniAbacus /> : skill.icon}
                           </div>
                           <div className={stack({ gap: '2', flex: '1' })}>
                             <div className={hstack({ gap: '2', alignItems: 'center' })}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.23.0",
+  "version": "4.24.0",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [