yotost

v1.0.1

Published

a month ago

AI-themed animated toast notification library with 27 toast types, 10 themes, light/dark mode, Lucide icons, and extended types (loading, countdown, multi-step, safety-scan, streaming, with-action & more)

✦ YOTOST — AI-Themed Toast Notification Library

Animated, AI-themed toast notifications for the modern web.
27 toast types · 10 themes · 7 animations · light/dark mode · Lucide icons · fully customizable

Quick Start

npm install yotost

import yotost from 'yotost';
import 'yotost/src/yotost.css';

yotost.success('Training Complete', 'Model converged at 98.7%');
yotost.neural('Processing', 'Through 12 hidden layers…');

Or via CDN:

<link rel="stylesheet" href="path/to/yotost.css">
<script type="module">
  import yotost from './src/yotost.js';
  yotost.success('Ready', 'YOTOST loaded');
</script>

Demo

Try the live demo: shekhsahebali.github.io/yotost/demo/demo.html

27 Toast Types

Core (4)

| Type | Icon | Use Case | |------|------|----------| | success | ✓ | Operation completed | | error | ✕ | Failures / crashes | | warning | ⚠ | Threshold alerts | | info | ℹ | General info |

AI (6)

| Type | Icon | Use Case | |------|------|----------| | neural | 🧠 | AI processing | | thinking | ⟳ | Model inference | | training | ⚡ | Training progress | | token | ◆ | Token consumption | | inception | 🔄 | Recursive loops | | singularity | ◈ | Emergent behavior |

Extended (7)

| Type | Icon | Use Case | |------|------|----------| | loading | ◌ | Progress indicator with percentage updates | | countdown | ⏱ | Timer with auto-dismiss | | multi-step | ✓✓ | Multi-stage pipeline progress | | with-action | ☝ | User action required (buttons) | | gradient-sweep | 🎨 | Animated background gradient | | safety-scan | 🛡 | Scanning animation with live findings | | streaming | 〰 | Typewriter/streaming text effect |

More AI (10)

| Type | Icon | Use Case | |------|------|----------| | prompt | ✉ | Prompt engineering | | inference | 👁 | Model inference output | | deploy | ☁ | Deployment status | | experiment | ⚗ | Research experiment tracking | | metric | 📊 | Performance metric display | | alert | 🔔 | System alert | | memory | 📖 | Context memory | | feedback | 👍 | User feedback / RLHF reward | | dataset | 🗂 | Dataset operations |

10 Themes

neural · cyberpunk · matrix · quantum · aurora
hologram · deep-mind · digital · void · synthetic

Each theme has both dark and light variants.
Global themes switch automatically via mode: 'auto' (OS preference), or you can set 'light' / 'dark' explicitly.

7 Animations

slide-in-right · slide-in-left · slide-in-up · slide-in-down
fade · pop · float

Each has a matching exit animation on dismiss.

Light / Dark Mode

// Follow OS preference (default)
yotost.config({ mode: 'auto' });

// Force light
yotost.config({ mode: 'light' });

// Force dark
yotost.config({ mode: 'dark' });

Also toggle at page level by setting data-yto-mode on <html>:

<html data-yto-mode="light">  <!-- or "dark" / "auto" -->

API

Configuration

yotost.config({
  position: 'top-right',    // top/bottom × left/center/right
  duration: 4000,           // ms before auto-dismiss
  animation: 'slide-in-right',
  theme: 'neural',
  mode: 'auto',             // 'auto' | 'light' | 'dark'
  maxVisible: 5,            // max toasts on screen at once
  showProgress: true,       // show progress bar
  pauseOnHover: true,       // pause timer on hover
  closeable: true,          // show X close button
  glow: false,              // rotating glow border
  sticky: false,            // never auto-dismiss
});

Standard Toast Methods

All return a ToastInstance.

yotost.success(title?, message?, opts?)
yotost.error(title?, message?, opts?)
yotost.warning(title?, message?, opts?)
yotost.info(title?, message?, opts?)
yotost.neural(title?, message?, opts?)
yotost.thinking(title?, message?, opts?)
yotost.training(title?, message?, opts?)
yotost.token(title?, message?, opts?)
yotost.inception(title?, message?, opts?)
yotost.singularity(title?, message?, opts?)
yotost.prompt(title?, message?, opts?)
yotost.inference(title?, message?, opts?)
yotost.deploy(title?, message?, opts?)
yotost.experiment(title?, message?, opts?)
yotost.metric(title?, message?, opts?)
yotost.alert(title?, message?, opts?)
yotost.memory(title?, message?, opts?)
yotost.feedback(title?, message?, opts?)
yotost.dataset(title?, message?, opts?)
yotost.gradientSweep(title?, message?, opts?)

Per-toast options

yotost.info('Context', '8K tokens used', {
  theme: 'quantum',
  animation: 'float',
  duration: 6000,
  position: 'top-left',
  glow: true,
});

Extended Toast Methods

Loading

const t = yotost.loading('Training', 'Epoch 42…');

// Update progress and message
yotost.updateLoading(t.id, {
  progress: 0.65,          // 0.0 – 1.0
  title: 'Still Training',
  message: '65% complete',
});

Countdown

// Auto-dismiss after 10 seconds
const t = yotost.countdown('Auto-save', 10, {
  onComplete: (id) => console.log('done', id),
});

Multi-step

const t = yotost.multiStep('Deploy', [
  'Build', 'Test', 'Deploy', 'Verify'
]);

// Advance one step
yotost.advanceStep(t.id);

// Skip to complete
yotost.completeSteps(t.id, { dismissAfter: 2000 });

With Action

yotost.withAction('Update ready', 'Restart now?', {
  actions: [
    {
      label: 'Cancel',
      onClick: (id) => yotost.dismiss(id),
    },
    {
      label: 'Restart',
      primary: true,
      onClick: (id) => {
        yotost.update(id, { title: 'Restarting…' });
        // do something
      },
    },
  ],
});

Safety Scan

const t = yotost.safetyScan('Scanning', 'Checking files…', {
  findings: ['Checking source code…'],
});

// Live findings
yotost.addFinding(t.id, 'No hardcoded secrets');
yotost.addFinding(t.id, '3 outdated packages');

// Mark complete
yotost.setScanResult(t.id, '2 vulnerabilities found');

Streaming (typewriter)

yotost.streaming('Generating', 'Long text to display character by character…', {
  speed: 25,               // ms per character
  variableSpeed: true,     // adds randomness (realistic)
  startDelay: 300,         // ms before typing starts
  duration: 3000,          // ms after finish before dismiss
});

Generic / Management

yotost.show('success', title, message, opts);      // any type by name
yotost.dismiss(id);                                  // dismiss one
yotost.dismissAll();                                  // dismiss all
yotost.dismissType('loading');                       // dismiss by type
yotost.getActive();                                   // [{id, type, title, message}]
yotost.update(id, { title: 'New', message: '…', theme: 'cyberpunk', glow: true });

ToastInstance

Every toast method returns:

const t = yotost.success('Saved', 'Checkpoint OK');

t.id;            // unique string id
t.el;            // DOM element
t.title;         // current title
t.message;       // current message
t.type;          // toast type

t.dismiss();     // animate out & remove
t.pause();       // pause progress timer
t.resume();      // resume progress timer
t.update(opts);  // update title/message/theme/glow in-place

TypeScript

import yotost, { ToastOptions, ToastInstance, ActionDef } from 'yotost';

yotost.success('Done', 'All good', { theme: 'cyberpunk' });

Full type definitions included (src/yotost.d.ts).

Themes Comparison

| Theme | Vibe | Light bg | Font | |-------|------|----------|------| | neural | Sleek blue tech | #f5f8ff | Segoe UI | | cyberpunk | Neon magenta | #fff0ff | Segoe UI | | matrix | Green terminal | #ebffeb | Courier New | | quantum | Cyan-blue gradient | #ebf5ff | Segoe UI | | aurora | Mint green | #ebfff8 | Segoe UI | | hologram | Cool cyan | #ebf8ff | Segoe UI | | deep-mind | Purple deep | #f0eeff | Inter | | digital | Teal sharp | #ebfaf8 | JetBrains Mono | | void | Minimal white/black | #ffffff | Segoe UI | | synthetic | Warm orange | #fff8f0 | Segoe UI |

License

ISC