perf(web): cut RAF handler from 62ms to single-frame budget

"[Violation] requestAnimationFrame handler took 62ms" was Timeline's
paintPlayhead reading clientWidth + scrollLeft on every frame —
forced-layout reads inside the RAF body — plus an unnecessary
textContent write to the elapsed-time counter at 60fps.

Timeline:
- Cache clientWidth + scrollLeft in scrollMetricsRef. The view-emit
  effect already reads them once per scroll/resize inside its own RAF;
  paintPlayhead now uses the cached values and only writes scrollLeft
  when the playhead crosses the auto-follow trigger. No layout
  thrashing per frame.

ComposePage:
- Throttle the elapsed-counter to ~10 fps. Sub-100ms changes aren't
  readable by a human, but every textContent assignment forces a string
  allocation and a DOM mutation; doing it 60× a second was a
  measurable slice of the per-frame budget. Playheads still paint at
  full 60fps for smoothness.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: productdevbook

AGENTS.md

@@ -26,7 +26,7 @@ src/
   _persist.ts       # localStorage volume + mute persistence
   _render.ts        # OfflineAudioContext render-to-WAV
   _analyser.ts      # AnalyserNode tap on master (waveform / spectrum)
-  presets/          # One file per built-in preset (36 total)
+  presets/          # One file per built-in preset
     _meta.ts        # PresetEntry type + asHandle/callGain/noiseBurst helpers
     _template.ts    # Copy-paste starter for new presets
     CONTRIBUTING.md # 30-line guide for adding presets
@@ -135,6 +135,6 @@ pnpm release        # pnpm test && build && bundle-budget && bumpp --commit --ta
 - ⬜ v0.1.0 — `createSeslen` + synthesised presets + Vite/Tailwind playground
 - ⬜ v0.2.0 — full Web Audio surface: buses, voices, ducking, throttle, jitter,
   fades, pan, sprites, scheduling (`when`), reduced-motion, persistence,
-  OfflineAudioContext render-to-WAV, AnalyserNode tap, latency reporting; 36
+  OfflineAudioContext render-to-WAV, AnalyserNode tap, latency reporting;
   built-in presets across UI / game / ambient categories.
 - ⬜ v0.3.0 — framework adapters (react, vue, svelte) + theme/preset packs.

README.md

@@ -12,10 +12,15 @@
   <a href="https://www.npmjs.com/package/seslen"><img src="https://img.shields.io/npm/v/seslen?color=42b883" alt="npm"></a>
   <a href="https://bundlephobia.com/package/seslen"><img src="https://img.shields.io/bundlephobia/minzip/seslen?color=7073e8" alt="bundle size"></a>
   <a href="./LICENSE"><img src="https://img.shields.io/npm/l/seslen?color=ff8a65" alt="license"></a>
+  <a href="https://seslen.productdevbook.com"><img src="https://img.shields.io/badge/playground-seslen.productdevbook.com-2563eb" alt="playground"></a>
 </p>
 
-> [!WARNING]
-> `seslen` is under active development. The API may break between 0.x releases.
+<p align="center">
+  <strong>🎧 Live playground:</strong> <a href="https://seslen.productdevbook.com">seslen.productdevbook.com</a> — preview every preset, build patterns in the composer, and copy the exact code.
+</p>
+
+> [!IMPORTANT]
+> **Got a sound in your head? Send it our way.** `seslen` is community-built — every preset starts as a one-file PR. The biggest contribution you can make right now is a new preset: open [`src/presets/`](./src/presets/), copy [`_template.ts`](./src/presets/_template.ts), and ship it. We'll help land it.
 
 ## Why seslen?
 
@@ -37,7 +42,7 @@ handle?.stop()
 ## Features
 
 - 🪶 **Zero dependencies**, pure ESM, tree-shakeable
-- 🎹 **36 synthesised presets** — every play generated fresh on `AudioContext`
+- 🎹 **Synthesised UI presets** — every play generated fresh on `AudioContext`
 - ⚡ **Lazy AudioContext** — created only on the first `play()`
 - 🔓 **Auto-unlock** — resumes the context on the first user gesture
 - ♿️ **Respects `prefers-reduced-motion`** — auto-mutes by default

package.json

@@ -1,7 +1,7 @@
 {
   "name": "seslen",
   "version": "0.0.1",
-  "description": "High-DX Web Audio: zero-dep, tree-shakeable library with 36 synthesised UI sound presets, named buses + ducking, polyphony cap, throttle, jitter, fades, pan, sprites, sample-accurate scheduling, OfflineAudioContext render-to-WAV, AnalyserNode tap, prefers-reduced-motion auto-mute, localStorage persistence and an SSR-safe stub. Strict TypeScript.",
+  "description": "High-DX Web Audio: zero-dep, tree-shakeable library with synthesised UI sound presets, named buses + ducking, polyphony cap, throttle, jitter, fades, pan, sprites, sample-accurate scheduling, OfflineAudioContext render-to-WAV, AnalyserNode tap, prefers-reduced-motion auto-mute, localStorage persistence and an SSR-safe stub. Strict TypeScript.",
   "keywords": [
     "analyser",
     "audio",

web/src/components/Timeline.tsx

@@ -81,6 +81,13 @@ export const Timeline = forwardRef<TimelineHandle, Props>(function Timeline(
   const userScrolledRef = useRef(false)
   const followRef = useRef(followPlayhead)
   followRef.current = followPlayhead
+  // Cache scroll metrics so paintPlayhead() doesn't read clientWidth /
+  // scrollLeft every frame — those are forced-layout reads and were
+  // pushing the RAF handler over the 16 ms budget.
+  const scrollMetricsRef = useRef<{ clientWidth: number; scrollLeft: number }>({
+    clientWidth: 0,
+    scrollLeft: 0,
+  })
 
   const contentW = Math.max(400, Math.round(totalMs * pxPerMs))
 
@@ -154,16 +161,21 @@ export const Timeline = forwardRef<TimelineHandle, Props>(function Timeline(
       el.style.left = `${LABEL_W + elapsedMs * pxPerMs}px`
 
       if (followRef.current && !userScrolledRef.current && root) {
-        const visiblePx = Math.max(0, root.clientWidth - LABEL_W)
+        // Use cached metrics. The scroll listener / ResizeObserver below
+        // keep them in sync; reading them here would force a layout
+        // every frame.
+        const { clientWidth, scrollLeft } = scrollMetricsRef.current
+        const visiblePx = Math.max(0, clientWidth - LABEL_W)
         if (visiblePx > 0) {
           const playheadX = elapsedMs * pxPerMs
-          const visStart = root.scrollLeft
-          const trigger = visStart + visiblePx * 0.8
-          if (playheadX > trigger || playheadX < visStart) {
+          const trigger = scrollLeft + visiblePx * 0.8
+          if (playheadX > trigger || playheadX < scrollLeft) {
             const target = playheadX - visiblePx * 0.2
             const newContentW = Math.max(400, Math.round(totalMs * pxPerMs))
             const maxScroll = Math.max(0, newContentW - visiblePx)
-            root.scrollLeft = Math.max(0, Math.min(maxScroll, target))
+            const next = Math.max(0, Math.min(maxScroll, target))
+            root.scrollLeft = next
+            scrollMetricsRef.current.scrollLeft = next
           }
         }
       }
@@ -188,8 +200,13 @@ export const Timeline = forwardRef<TimelineHandle, Props>(function Timeline(
         raf = 0
         const root = scrollRef.current
         if (!root) return
-        const visiblePx = Math.max(0, root.clientWidth - LABEL_W)
-        const startMs = root.scrollLeft / pxPerMs
+        const clientWidth = root.clientWidth
+        const scrollLeft = root.scrollLeft
+        // Batch the layout reads here once per scroll/resize so the
+        // playhead RAF can use cached values.
+        scrollMetricsRef.current = { clientWidth, scrollLeft }
+        const visiblePx = Math.max(0, clientWidth - LABEL_W)
+        const startMs = scrollLeft / pxPerMs
         const endMs = startMs + visiblePx / pxPerMs
         onViewChange({
           startMs: Math.max(0, startMs),

web/src/routes/compose.tsx

@@ -6,6 +6,7 @@ import { HugeiconsIcon } from "@hugeicons/react"
 import {
   ArrowLeft01Icon,
   ArrowDown01Icon,
+  Github01Icon,
   UndoIcon,
   RedoIcon,
   PauseIcon,
@@ -226,8 +227,12 @@ function ComposePage(): React.ReactElement {
     // Single RAF drives Timeline's playhead, PreviewPanel's playhead and
     // the transport bar's elapsed counter — all from the same
     // performance.now() sample, so nothing can drift relative to anything
-    // else.
+    // else. Playheads paint every frame; the elapsed counter only
+    // refreshes at ~10 fps because no human reads sub-100ms changes and
+    // String allocation + DOM textContent writes were a measurable slice
+    // of the per-frame budget.
     const startedAt = performance.now()
+    let lastLabelMs = -1
     timelineRef.current?.paintPlayhead(0)
     previewRef.current?.paintPlayhead(0)
     if (elapsedLabelRef.current) elapsedLabelRef.current.textContent = formatTime(0)
@@ -240,7 +245,10 @@ function ComposePage(): React.ReactElement {
       }
       timelineRef.current?.paintPlayhead(t)
       previewRef.current?.paintPlayhead(t)
-      if (elapsedLabelRef.current) elapsedLabelRef.current.textContent = formatTime(t)
+      if (elapsedLabelRef.current && t - lastLabelMs >= 100) {
+        elapsedLabelRef.current.textContent = formatTime(t)
+        lastLabelMs = t
+      }
       elapsedRafRef.current = requestAnimationFrame(tick)
     }
     elapsedRafRef.current = requestAnimationFrame(tick)
@@ -558,6 +566,23 @@ function ComposePage(): React.ReactElement {
         </span>
 
         <div className="ml-auto flex items-center gap-2">
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <a
+                  href="https://github.com/productdevbook/seslen"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-2.5 gap-1.5 text-[12px] font-medium hover:bg-muted transition"
+                >
+                  <HugeiconsIcon icon={Github01Icon} strokeWidth={2} className="size-4" />
+                  <span className="hidden md:inline">GitHub</span>
+                </a>
+              }
+            />
+            <TooltipContent>Open repo · contribute a preset</TooltipContent>
+          </Tooltip>
+
           <Popover open={demosOpen} onOpenChange={setDemosOpen}>
             <PopoverTrigger
               render={

web/src/routes/index.tsx

@@ -7,9 +7,12 @@ import {
   ArrowRight01Icon,
   ArrowUp01Icon,
   Copy01Icon,
+  FavouriteIcon,
+  Github01Icon,
   RepeatIcon,
   PlayCircleIcon,
   Search01Icon,
+  StarIcon,
   UnfoldMoreIcon,
 } from "@hugeicons/core-free-icons"
 import { Badge } from "@/components/ui/badge"
@@ -240,6 +243,26 @@ function IndexPage(): React.ReactElement {
 
   return (
     <main className="mx-auto max-w-6xl px-4 py-8 sm:py-10 flex flex-col gap-6">
+      <a
+        href="https://github.com/productdevbook/seslen"
+        target="_blank"
+        rel="noreferrer"
+        className="group flex items-center gap-3 rounded-lg border border-border bg-muted/40 hover:bg-muted px-4 py-2.5 text-[12px] transition"
+      >
+        <HugeiconsIcon icon={Github01Icon} strokeWidth={2} className="size-4 shrink-0" />
+        <span className="flex-1 leading-snug">
+          <strong className="font-semibold">Got a sound in your head?</strong>{" "}
+          <span className="text-muted-foreground">
+            Contribute a preset on GitHub — it's a single self-contained file under{" "}
+            <code className="font-mono text-[11px]">src/presets/</code>.
+          </span>
+        </span>
+        <span className="hidden sm:inline-flex items-center gap-1 font-mono text-[11px] uppercase tracking-wider text-muted-foreground group-hover:text-foreground transition">
+          Open repo
+          <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} className="size-3.5" />
+        </span>
+      </a>
+
       <header className="flex items-end justify-between gap-4">
         <div className="flex flex-col gap-2">
           <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
@@ -317,8 +340,63 @@ function IndexPage(): React.ReactElement {
         emptyState={`No presets match "${query}".`}
       />
 
-      <footer className="pt-4 pb-2 text-center text-[11px] font-mono text-muted-foreground">
-        github.com/productdevbook/seslen — contribute presets in src/presets/
+      <footer className="pt-6 pb-4 flex flex-col sm:flex-row items-center justify-between gap-3 text-[11px] font-mono text-muted-foreground border-t mt-2">
+        <span>
+          MIT ©{" "}
+          <a
+            href="https://github.com/productdevbook"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-foreground transition"
+          >
+            productdevbook
+          </a>
+        </span>
+        <nav className="flex items-center gap-3 flex-wrap justify-center">
+          <a
+            href="https://github.com/productdevbook/seslen"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1.5 hover:text-foreground transition"
+          >
+            <HugeiconsIcon icon={Github01Icon} strokeWidth={2} className="size-3.5" />
+            Repository
+          </a>
+          <a
+            href="https://github.com/productdevbook/seslen/tree/main/src/presets"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1.5 hover:text-foreground transition"
+          >
+            <HugeiconsIcon icon={StarIcon} strokeWidth={2} className="size-3.5" />
+            Contribute a preset
+          </a>
+          <a
+            href="https://www.npmjs.com/package/seslen"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-foreground transition"
+          >
+            npm
+          </a>
+          <a
+            href="https://github.com/productdevbook/seslen/issues"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-foreground transition"
+          >
+            Issues
+          </a>
+          <a
+            href="https://github.com/sponsors/productdevbook"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1.5 hover:text-foreground transition"
+          >
+            <HugeiconsIcon icon={FavouriteIcon} strokeWidth={2} className="size-3.5" />
+            Sponsor
+          </a>
+        </nav>
       </footer>
     </main>
   )