Mood Wheel

A precision-instrument timeline dial that winds to the scroll position.

Preview

Installation

pnpm dlx shadcn@latest add https://buxx.me/r/mood-wheel

Usage

Astro

---
import TimelineWheel from '@/components/ui/timeline-wheel.astro';
---

<main>
  <TimelineWheel compact />
  <div data-mood-feed>
    <div data-mood-list aria-busy="false">
      <section class="mood-date-group" data-date="2026-07-15">
        <h2 class="mood-date-header">July 15</h2>
        <article class="mood-item">Your timeline content</article>
      </section>
    </div>
  </div>
</main>

---
import TimelineWheel from '@/components/ui/timeline-wheel.astro';
---

<main>
  <TimelineWheel compact />
  <div data-mood-feed>
    <div data-mood-list aria-busy="false">
      <section class="mood-date-group" data-date="2026-07-15">
        <h2 class="mood-date-header">July 15</h2>
        <article class="mood-item">Your timeline content</article>
      </section>
    </div>
  </div>
</main>

Credits

Precision-instrument aesthetic; slot-text readout by Bunizao.

View source Components