dynaura

Introduction

dynaura shows toasts as one pill that spring-morphs between states, swipes away, and stays out of your way.

Try it

Every demo on this site runs the published dynaura package. Press a button and watch the island at the top of the page.

tsx
dynaura.success({ title: "Saved", description: "Your changes are live." });

That is the whole setup: mount one Toaster, call dynaura from anywhere.

Why dynaura

  • One island, real motionA single pill morphs between compact and expanded using a CSS linear() spring. No animation library.
  • Rich cardsA header tab plus any custom body. Flight passes, ride trackers, receipts.
  • Live activitiesSticky toasts with a running timer or an animated waveform.
  • Progress that feels aliveA value bar and rolling digits, updated in place with dynaura.update.
  • Built for touchSwipe to dismiss, tap or long-press to pin, hover to pause.
  • ThemeableDark, light, system, or your own colors. Everything is a CSS variable.
  • Any frameworkReact, Vue, Svelte, or plain JS, all on one shared core.
  • Light and accessibleZero dependencies, typed, aria-live, and prefers-reduced-motion respected.

Frameworks

The React adapter is the default import. Vue, Svelte and vanilla JS are thin wrappers over the same core, each on its own entry point. See Quick start for each one, or jump to the API reference.